import React, { useEffect, useReducer } from "react";
import { Tree, Input, Card, Tooltip } from "antd";
import styles from "./index.less";
import { doFetch } from "@/utils/doFetch";
import Fieldmanage from "./Fieldmanage";
import { useRequest } from "umi";
const { Search } = Input;
const initState = {
  searchValue: {},
  expandedKeys: [],
  autoExpandParent: false,
  checkedNode: {},
};
function reducer(state, action) {
  if (action.type == "changeSearch") {
    return {
      ...state,
      autoExpandParent: true,
      expandedKeys: action.expandedKeys,
      searchValue: action.searchValue,
    };
  } else if (action.type == "expand") {
    return {
      ...state,
      autoExpandParent: false,
      expandedKeys: action.expandedKeys,
    };
  } else if (action.type == "checked") {
    return {
      ...state,
      checkedNode: action.checkedNode,
    };
  }
}
const getParentKey = (key, system) => {
  let parentKey;
  for (let i = 0; i < system.length; i++) {
    const node = system[i];
    if (node.children) {
      if (node.children.some((item) => item.id === key)) {
        parentKey = node.id;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
const Specialproperties = (props) => {
  const [state, dispatch] = useReducer(reducer, initState);
  const { searchValue, expandedKeys, autoExpandParent, checkedNode } = state;
  let { data, loading } = useRequest(
    () => {
      return doFetch({
        url: "/ngic-base-business/paForm/queryList",
        params: searchValue,
      });
    },
    {
      formatResult: (res) => res?.data?.dataList,
      refreshDeps: [searchValue],
    }
  );
  const loop = (datas) => {
    return datas?.map((item) => {
      if (item.children) {
        return {
          title: item.formName,
          key: item.id,
          children: loop(item.children),
        };
      }
      return {
        title: item.formName,
        key: item.id,
      };
    });
  };
  const onExpand = (expandedKeys) => {
    dispatch({ type: "expand", expandedKeys });
  };
  const searchTree = (val, e) => {
    let value;
    if (val) {
      value = val;
    } else {
      value = e.target.value;
    }
    const dataLists = getAllList();
    const expandedKeys = dataLists
      .map((item) => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, data);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    dispatch({
      type: "changeSearch",
      expandedKeys,
      searchValue: { formName: value },
    });
  };



  
  const selectTree = (selectedKeys, selectedNodes) => {
    const dataLists = getAllList();
    let checkedNode = dataLists.filter((it) => it.key == selectedKeys[0])[0];
    dispatch({ type: "checked", checkedNode });
  };
  function getAllList() {
    const dataLists = [];
    const generateLists = (datas) => {
      for (let i = 0; i < datas.length; i++) {
        const node = datas[i];
        const key = node.id;
        dataLists.push({ key, title: node.formName, type: node.type });
        if (node.children) {
          generateLists(node.children, node.id);
        }
      }
    };
    generateLists(data);
    return dataLists;
  }
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "#fff",
        minHeight: 300,
      }}
    >
      <div style={{ width: "100%", border: "1px solid rgba(0, 0, 0, 0.06)" }}>
        <div style={{ padding: "16px 20px", fontSize: 16 }}>
          {props.route.name}
        </div>
      </div>
      <div style={{ display: "flex" }}>
        <div className={styles.leftTree} style={{ width: 200 }}>
          <Search
            style={{ marginBottom: 15 }}
            placeholder="请输入"
            onSearch={searchTree}
            allowClear
            
          />
          <Tree
            onExpand={onExpand}
            expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            treeData={loop(data)}
            onSelect={selectTree}
          />
        </div>
        <div className={`${styles.rightTable} specialpropertiesCard`}>
          <Fieldmanage checkedNode={checkedNode} />
        </div>
      </div>
    </div>
  );
};

export default Specialproperties;