import React, { useEffect } from "react";
import { cloneDeep } from "lodash";
import { Modal, Space, Button, Tree } from "antd";

import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import CommonViewTable from "@/components/Common/CommonViewTable";

import styles from "./index.less";

const useModalEvent = props => {
  const { formData = [], fixedConditonValues = {}, sValue: sValueStr } = props;

  useEffect(
    async () => {
      if (!formData.length) return;

      const config = formData[0];
      const conditonValues = props.onGetSqlConditionValues(config);
      const treeConfig =
        config.gdsconfigformslave.find(item => item.bTree) || {};
      const treeConditonValues = props.onGetSqlConditionValues(treeConfig);

      const result = {
        ...((await props.onGetDataSet({
          name: "slave",
          configData: config,
          condition: {
            sSqlCondition: { ...conditonValues, ...fixedConditonValues }
          },
          isWait: true
        })) || {}),
        ...((await props.onGetTreeDataSet({
          configData: treeConfig,
          condition: {
            sSqlCondition: { ...treeConditonValues, ...fixedConditonValues }
          },
          isWait: true
        })) || {}),
        slaveConfig: config,
        slaveColumn: commonFunc.getHeaderConfig(config)
      };

      const bTree = result.treeData?.[0]?.children.length;
      result.bTree = bTree;

      if (bTree) {
        for (let i = 0; i < result.treeData[0].children.length; i++) {

            // 外发废
            if(result.masterConditionData.sProcessParentId=='5'){
                let sclassifyId = result.treeData[0].children[i].sclassifyId;
                const nweSlaveData = result.slaveData.filter(e=>e.sWfProcessParentId && e.sWfProcessParentId == sclassifyId);
                // nweSlaveData.forEach(e=>e.enabledNew = true)
                result[`slave${i}Data`] = cloneDeep([...nweSlaveData, ...result.slaveData.filter(e=>!e.sWfProcessParentId)]);
            }else{
                result[`slave${i}Data`] = cloneDeep(result.slaveData);
            }
        }
        result.treeSelectedKeys = [result.treeData[0].children[0].key];
      }

      const sValue = commonUtils.convertStrToObj(sValueStr, {});
      const { detail = [], sMemo = "" } = sValue;
      if (bTree) {
        result.treeData[0].children.forEach((treeNode, index) => {
          const nodeIndex = detail.findIndex(
            item => item.node.sId === treeNode.sId
          );
          if (nodeIndex !== -1) {
            const detailData = detail[nodeIndex];
            result[`slave${index}Data`].forEach(item => {
              const iIndex = detailData.data.findIndex(i => i.sId === item.sId);
              if (iIndex !== -1) {
                item.dWasteQty = detailData.data[iIndex].dWasteQty;
              }
            });
            if (result[`slave${index}Data`]?.length) {
              result[`slave${index}Data`].push({
                sId: "viewRowSid999",
                sMemo: detailData.sMemo || ""
              });
            }
          }
        });
      } else {
        result.slaveData?.forEach(item => {
          const iIndex = detail.findIndex(i => i.sId === item.sId);
          if (iIndex !== -1) {
            item.dWasteQty = detail[iIndex].dWasteQty;
          }
        });
        if (result.slaveData?.length) {
          result.slaveData.push({ sId: "viewRowSid999", sMemo });
        }
      }
      console.log(result)
      props.onSaveState(result);
    },
    [formData.length]
  );

  // 监听键盘事件
  useEffect(() => {
    const getCurrent = element => {
      let current = element;
      while (current !== null) {
        const classes = current.classList;
        for (let i = 0; i < classes.length; i++) {
          if (classes[i].startsWith("ant-col-order-")) {
            return current;
          }
        }
        current = current.parentNode;
      }
      return null;
    };

    const isCursorOnFirstLine = textarea => {
      const cursorPosition = textarea.selectionStart;
      const textBeforeCursor = textarea.value.substring(0, cursorPosition);
      return textBeforeCursor.indexOf("\n") === -1;
    };

    const isCursorAtStart = textarea => {
      return textarea.selectionStart === 0;
    };

    const keydownEvent = event => {
      const focusedElement = document.activeElement;
      if (
        !["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(event.key)
      )
        return;

      if (focusedElement.tagName.toLowerCase() === "textarea") {
        if (
          (event.key === "ArrowUp" && isCursorOnFirstLine(focusedElement)) ||
          (event.key === "ArrowLeft" && isCursorAtStart(focusedElement))
        ) {
          try {
            const oColDom = getCurrent(focusedElement);
            const oMemoDom = oColDom.parentNode.parentNode.parentNode;
            const oNewDom = oMemoDom.previousElementSibling.firstChild.lastChild.querySelector(
              "input"
            );
            oNewDom.focus();
          } catch (error) {}
        }
        return;
      }

      if (focusedElement.tagName.toLowerCase() !== "input") return;
      if (!focusedElement.classList.contains("ant-input-number-input")) return;

      const oColDom = getCurrent(focusedElement);
      const classes = oColDom.classList;
      let currentIndex = -1;
      try {
        for (let i = 0; i < classes.length; i++) {
          if (classes[i].startsWith("ant-col-order-")) {
            currentIndex = Number(classes[i].replace("ant-col-order-", "")) - 1;
          }
        }
      } catch (error) {}

      if (currentIndex === -1) return;
      const oParent = oColDom.parentNode;
      const totalSize = oParent.children.length;

      let newIndex = currentIndex;

      switch (event.key) {
        case "ArrowLeft":
          event.preventDefault();
          newIndex = currentIndex - 1;
          break;
        case "ArrowUp":
          event.preventDefault();
          newIndex = currentIndex - 3;
          break;
        case "ArrowRight":
          event.preventDefault();
          newIndex = currentIndex + 1;
          break;
        case "ArrowDown":
          event.preventDefault();
          newIndex = currentIndex + 3;
          break;
        default:
          break;
      }

      if (newIndex < 0) return;

      if (newIndex >= totalSize) {
        try {
          document.querySelector("#sMemoviewRowSid999").focus();
        } catch (error) {}
        return;
      }

      try {
        oParent
          .querySelector(".ant-col-order-" + (newIndex + 1))
          .querySelector(".ant-input-number-input")
          .focus();
      } catch (error) {}
    };

    document.addEventListener("keydown", keydownEvent);
    return () => {
      document.removeEventListener("keydown", keydownEvent);
    };
  }, []);

  return {
    ...props
  };
};

const SetCountModalComponent = baseProps => {
  const props = useModalEvent(useCommonBase(baseProps));

  const { bVisible, formData = [] } = props;

  if (!formData.length) return "";

  const title = props.slaveData?.[0]?.sType || "废品类别";

  const handleOk = () => {
    const { treeData = [], employeeData = {}, bTree } = props;
    const { sEmployeeName = "数量" } = employeeData;
    const addState = {};
    addState.title = sEmployeeName;
    if (bTree) {
      // 左侧有树
      addState.bTree = true;
      const detail = [];
      const allData = treeData[0].children.reduce((pre, treeNode, index) => {
        const tableData = props[`slave${index}Data`] || [];
        const tableDataFilter = tableData.filter(item => item.dWasteQty);
        if (tableDataFilter.length) {
          const temp = {
            node: treeNode,
            data: tableDataFilter,
            sMemo: tableData
              .filter(item => item.sMemo)
              .map(item => item.sMemo)[0]
          };
          detail.push(temp);
        }
        pre = [...pre, ...tableData];
        return pre;
      }, []);
      addState.detail = detail;
      addState.count = allData.reduce((pre, item) => {
        if (typeof item.dWasteQty === "number" && item.dWasteQty) {
          pre += item.dWasteQty;
        }
        return pre;
      }, 0);
    } else {
      // 左侧没有树
      const { slaveData = [] } = props;
      addState.count = slaveData.reduce((pre, item) => {
        if (typeof item.dWasteQty === "number" && item.dWasteQty) {
          pre += item.dWasteQty;
        }
        return pre;
      }, 0);
      addState.detail = slaveData.filter(item => item.dWasteQty);
      const sMemoValue = slaveData
        .filter(item => item.sMemo)
        .map(item => item.sMemo)[0];
      addState.sMemo = sMemoValue || "";
    }
    props.onOk(addState);
  };

  return (
    <Modal
      title={title}
      open={bVisible}
      width={1000}
      height={520}
      zIndex={1000}
      style={{ top: 20 }}
      className="mesCommonModal"
      footer={
        <Space>
          <Button size="large" onClick={props.onCancel}>
            取消
          </Button>
          <Button size="large" type="primary" onClick={handleOk}>
            确定
          </Button>
        </Space>
      }
      onCancel={props.onCancel}
    >
        <div className={styles.modal}>
            <div className={styles.tree} style={!props.treeData?.length ? { width: 0, border: 0 } : {}} >
                <TreeComponent {...props} />
            </div>
            <div className={styles.content}>
                <ContentComponent {...props} />
                <SMemoComponent {...props} />
            </div>
        </div>
    </Modal>
  );
};

const TreeComponent = props => {
  const { treeData, treeSelectedKeys } = props;

  if (commonUtils.isEmptyObject(treeData)) return "";

  return (
    <Tree
      fieldNames={{
        title: "showName"
      }}
      showLine
      showIcon
      defaultExpandAll
      selectedKeys={treeSelectedKeys}
      treeData={treeData}
      onSelect={(selectedKeys, { node }) => {
        if (node.children?.length) return;
        props.onSaveState({
          treeSelectedKeys: selectedKeys
        });
      }}
    />
  );
};

const ContentComponent = props => {
  const { slaveConfig, treeData = [], treeSelectedKeys = [] } = props;

  let currentTreeNodeIndex = treeData[0]?.children?.findIndex(
    item => item.key === treeSelectedKeys[0]
  );
  currentTreeNodeIndex =
    currentTreeNodeIndex === undefined ? -1 : currentTreeNodeIndex;
  const slaveNo = currentTreeNodeIndex === -1 ? "" : currentTreeNodeIndex;

  const slaveData = props[`slave${slaveNo}Data`] || [];

  const viewRow = {};
  const idMap = {};
  const viewConfigs = slaveData
    .filter(item => item.sId !== "viewRowSid999")
    .map((item, index) => {
      viewRow.sId = `viewRowSid${index + 1}`;
      viewRow[`dName${index + 1}`] =
        item.dWasteQty === 0 ? undefined : item.dWasteQty;
      idMap[`dName${index + 1}`] = item.sId;
      return {
        sId: `sId${index + 1}`,
        iOrder: index + 1,
        sName: `dName${index + 1}`,
        sControlName: `dName${index + 1}`,
        showName: item.sName,
        iColValue: 8,
        keyboard: false
      };
    });

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: slaveConfig,
    iColValueView: 24,
    viewRow,
    tableName: "slave",
    onDataChange: (tableName, sName, returnValue) => {
      const iIndex = slaveData.findIndex(item => item.sId === idMap[sName]);
      if (iIndex !== -1) {
        slaveData[iIndex].dWasteQty = returnValue[sName];

        // if(viewProps.masterConditionData.sProcessParentId==5){
        //     debugger
        //     let arrNum = slaveData.filter(e=>e.sWfProcessParentId).map(e=>e.dWasteQty);
        //     if(arrNum.length!==0){
        //         slaveData[ slaveData.findIndex(e => !e.sWfProcessParentId) ].dWasteQty = arrNum.reduce((a, b) => a + b, 0)
        //     }
        // }

        props.onSaveState({ [`slave${slaveNo}Data`]: slaveData });
      }
    }
  };

  console.log(viewProps)

  return <CommonViewTable {...viewProps} />;
};

const SMemoComponent = props => {
  const { slaveConfig, treeData = [], treeSelectedKeys = [] } = props;

  let currentTreeNodeIndex = treeData[0]?.children?.findIndex(
    item => item.key === treeSelectedKeys[0]
  );
  currentTreeNodeIndex =
    currentTreeNodeIndex === undefined ? -1 : currentTreeNodeIndex;
  const slaveNo = currentTreeNodeIndex === -1 ? "" : currentTreeNodeIndex;

  const slaveData = props[`slave${slaveNo}Data`] || [];
  if (!slaveData.length) return "";

  const viewRow = slaveData.find(item => item.sId === "viewRowSid999") || {
    sId: "viewRowSid999",
    sMemo: ""
  };
  const viewConfigs = [
    {
      sId: "sId999",
      iOrder: 999,
      sName: "sMemo",
      sControlName: "sMemo",
      showName: "备注",
      iColValue: 24,
      keyboard: false,
      iRowValue: 2
    }
  ];

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: slaveConfig,
    iColValueView: 24,
    viewRow,
    tableName: "slave",
    onDataChange: (tableName, sName, returnValue) => {
      const iIndex = slaveData.findIndex(item => item.sId === "viewRowSid999");
      const sMemo = returnValue[sName]
        ? returnValue[sName].replace(/['"\\]/g, " ")
        : "";
      if (iIndex !== -1) {
        slaveData[iIndex].sMemo = sMemo;
        props.onSaveState({ [`slave${slaveNo}Data`]: slaveData });
      } else {
        slaveData.push({ sId: "viewRowSid999", sMemo });
      }
    }
  };

  return (
    <div className={styles.memo}>
      <CommonViewTable {...viewProps} />
    </div>
  );
};

export default SetCountModalComponent;