import data from "./tempData";
import React, {
  useReducer,
  useContext,
  useRef,
  useState,
  useEffect
} from "react";
import { Tree, Divider, Tabs } from "antd";
import {
  FolderOutlined,
  FolderOpenOutlined,
  FileOutlined
} from "@ant-design/icons";
import styles from "./index.less";

import CommonViewTable from "@/components/Common/CommonViewTable";
import CommonViewDragable from "@/components/Common/CommonViewDragable";

import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
const { myContext, reducer } = commonUtils;

const initialState = {
  selectedData: {},
  getFolderIcon: ({ expanded }) => {
    return expanded ? <FolderOpenOutlined /> : <FolderOutlined />;
  }
};

const usetProcessInstructionBookEvent = props => {
  const { formData = [] } = props;
  useEffect(
    async () => {
      if (!formData.length) return;
      const slaveConfig = formData.find(item => item.sGrd === "slave") || {};
      const controlConfig =
        formData.find(item => item.sGrd === "control") || {};
      const processConfig =
        formData.find(item => item.sGrd === "process") || {};

      const addState = {
        ...handleGetColumnData(slaveConfig, "slave"),
        ...handleGetColumnData(controlConfig, "control"),
        ...handleGetColumnData(processConfig, "process"),
        ...(await handleGetData(slaveConfig, "slave")),
        ...(await handleGetData(controlConfig, "control")),
        ...(await handleGetData(processConfig, "process")),
        bFinish: true
      };

      props.onSaveState(addState);
    },
    [formData]
  );

  // 获取表头数据
  const handleGetColumnData = (config, name) => {
    const column = commonFunc.getHeaderConfig(config);
    return {
      [`${name}Column`]: column,
      [`${name}Config`]: config
    };
  };

  // 获取数据集
  const handleGetData = async (config, name) => {
    const conditonValues = props.onGetSqlConditionValues(config);
    try {
      const addState =
        (await props.onGetDataSet({
          name: name,
          configData: config,
          condition: { sSqlCondition: { ...conditonValues } },
          isWait: true
        })) || {};
      return addState;
    } catch (error) {
      return {};
    }
  };

  return {
    ...props,
    ...data
  };
};

const ProcessInstructionBook = baseProps => {
  const props = usetProcessInstructionBookEvent(
    useCommonBase({ ...baseProps, sModelsId: "12710101117086786735350" })
  );

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <myContext.Provider
      value={{
        props,
        hooksProps: { ...state, dispatch }
      }}
    >
      {props.bFinish ? (
        <div className={styles.commonPartsInfo}>
          <div className="leftTree">
            {location.pathname === "/indexPage/processCardPackTableTree" ? (
              <TreeComponent />
            ) : (
              <TreeComponent1 />
            )}
          </div>
          <div className="rightContent">
            <ContentComponent />
          </div>
        </div>
      ) : (
        ""
      )}
    </myContext.Provider>
  );
};

const TreeComponent = () => {
  const { props, hooksProps } = useContext(myContext);
  const { dispatch, getFolderIcon } = hooksProps;
  const {
    slaveData = [],
    controlData = [],
    processData = [],
    partsInfoBtnConfig = {}
  } = props;
  const { sAssignField } = partsInfoBtnConfig;
  const [selectedKeys, setSelectedKeys] = useState([]);
  const initFlag = useRef(true);

  const treeData = [];
  slaveData.forEach(slaveRow => {
    const { sId: sId0, sProductName, sProductNo } = slaveRow;
    const lv1 = {
      title: sProductName,
      key: sId0,
      icon: getFolderIcon,
      readOnly: true,
      children: []
    };

    let bFirst = true;
    controlData.forEach(controlRow => {
      const { sId: sId1, sPartsName, sCombinedMemo } = controlRow;
      const sCombinedMemoArr = commonUtils.convertStrToObj(sCombinedMemo, []);
      const bMatch = sCombinedMemoArr.some(
        item => item.sProductNo && sProductNo === item.sProductNo
      );
      if (bMatch) {
        if (bFirst) {
          bFirst = false;
          treeData.push(lv1);
        }
        const lv2 = {
          title: sPartsName,
          key: sId1,
          icon: getFolderIcon,
          readOnly: true
        };
        lv1.children.push(lv2);
        const childrenData = processData.filter(
          process => process.sControlId === sId1
        );
        if (commonUtils.isNotEmptyArr(childrenData)) {
          lv2.children = childrenData.map(process => {
            const { sId, sProcessClassifyName } = process;
            const sMemo = sAssignField ? process[sAssignField] : "";
            if (initFlag.current) {
              initFlag.current = false;
              setSelectedKeys([sId]);
            }
            return {
              title: `${sProcessClassifyName}${
                sAssignField ? `【${sMemo || "无"}】` : ""
              }`,
              key: sId,
              icon: <FileOutlined />
            };
          });
        }
      }
    });
  });

  useEffect(
    () => {
      if (selectedKeys[0]) {
        dispatch([
          "saveState",
          {
            selectedData: processData.find(item => item.sId === selectedKeys[0])
          }
        ]);
      }
    },
    [selectedKeys[0]]
  );

  return (
    <Tree
      showLine
      showIcon
      defaultExpandAll
      selectedKeys={selectedKeys}
      treeData={treeData}
      onSelect={(selectedKeys, { node }) => {
        if (!node.readOnly) {
          setSelectedKeys(selectedKeys);
        }
      }}
    />
  );
};

const TreeComponent1 = () => {
  const { props, hooksProps } = useContext(myContext);
  const { dispatch, getFolderIcon } = hooksProps;
  const { controlData = [], processData = [], slaveData = [] } = props;
  const { currentSelectedMachineTaskDataRow = {} } = commonUtils.getAppData(
    "globalData"
  );
  const { sWorkOrderProcessTbId } = currentSelectedMachineTaskDataRow;

  const [selectedKeys, setSelectedKeys] = useState([]);
  const initFlag = useRef(true);
  const treeData = controlData.map(control => {
    const { sId, sPartsName } = control;
    const lv1 = {
      title: sPartsName,
      key: sId,
      icon: getFolderIcon,
      readOnly: false,
      readOnly1: false
    };

    const childrenData = processData.filter(
      process => process.sControlId === sId
    );
    if (commonUtils.isNotEmptyArr(childrenData)) {
      const selectedData =
        childrenData.find(item => item.sId === sWorkOrderProcessTbId) || {};

      lv1.children = childrenData.map(process => {
        const { sId, sProcessClassifyName, iOrder } = process;
        if (initFlag.current && sId === sWorkOrderProcessTbId) {
          initFlag.current = false;
          setSelectedKeys([sId]);
        }
        const bReadOnly =
          sId !== sWorkOrderProcessTbId &&
          sProcessClassifyName !== selectedData.sProcessClassifyName;
        return {
          title: `${iOrder}-${sProcessClassifyName}`,
          key: sId,
          icon: <FileOutlined />,
          readOnly: bReadOnly,
          readOnly1: bReadOnly
        };
      });
    }

    return lv1;
  });

  useEffect(
    () => {
      if (selectedKeys[0]) {
        let selectedData = processData.find(
          item => item.sId === selectedKeys[0]
        );
        if (!selectedData) {
          selectedData = { ...(slaveData[0] || {}), ...(controlData[0] || {}) };
        }
        dispatch([
          "saveState",
          {
            selectedData
          }
        ]);
      }
    },
    [selectedKeys[0]]
  );

  return (
    <Tree
      showLine
      showIcon
      defaultExpandAll
      selectedKeys={selectedKeys}
      treeData={treeData}
      onSelect={(selectedKeys, { node }) => {
        if (!node.readOnly1) {
          setSelectedKeys(selectedKeys);
        } else {
          setSelectedKeys([sWorkOrderProcessTbId]);
        }
      }}
    />
  );
};

const ContentComponent = () => {
  const { props, hooksProps } = useContext(myContext);
  const { partsInfoType, slaveConfig = {}, controlConfig = {} } = props;
  const { selectedData } = hooksProps;
  const { sProductName, iOrder, sProcessClassifyName } = selectedData;
  const bSlave = !sProcessClassifyName;
  const showName = bSlave ? sProductName : `${iOrder}-${sProcessClassifyName}`;

  const { gdsconfigformslave = [] } = slaveConfig;
  const { gdsconfigformslave: gdsconfigformslave1 = [] } = controlConfig;
  const viewConfig = [...gdsconfigformslave, ...gdsconfigformslave1].filter(
    item =>
      item.sName !== "" &&
      item.bControl &&
      item.sControlName.indexOf("Btn") === -1
  );

  const commonViewDragableProps = bSlave
    ? {
        ...props,
        viewConfigs: viewConfig,
        tableConfig: {
          ...slaveConfig,
          gdsconfigformslave: [...gdsconfigformslave, ...gdsconfigformslave1]
        },
        iColValueView: 24,
        viewRow: selectedData,
        tableName: "control"
      }
    : {
        ...props,
        hideTabsNav: true,
        sParamData: [
          {
            sParamType: partsInfoType,
            sParamName: "参数"
          }
        ],
        tableName: "partsInfo",
        partsInfoData: [selectedData],
        partsInfoSelectedRowKeys: [selectedData.sId]
      };

  return (
    <>
      <Divider orientation="left" plain>
        {showName}
      </Divider>
      <Tabs
        defaultActiveKey="1"
        items={[
          {
            label: showName,
            key: "1",
            children: bSlave ? (
              <CommonViewTable {...commonViewDragableProps} />
            ) : (
              <CommonViewDragable {...commonViewDragableProps} />
            )
          }
        ]}
      />
    </>
  );
};

export default ProcessInstructionBook;