import React, { useEffect, useState } from "react";
import { Modal, Button, Input, message } from "antd";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonUtils from "@/utils/utils";
import * as commonBusiness from "@/components/Common/commonBusiness";
import StaticEditTable from "@/components/Common/CommonTable";
import CommonViewTable from "@/components/Common/CommonViewTable";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import styles from "./index.less";
import { cloneDeep } from "lodash";

const teamInfoSid = "12710101117087385123610";
// 业务层
const useTeamInfoEvent = props => {
  const { formData } = props;
  useEffect(
    async () => {
      if (commonUtils.isNotEmptyArr(formData)) {
        const colunmData = handleGetColumnData(formData, true);
        const result = await handleGetData(formData, true);
        const addState = {
          bFinish: true,
          ...colunmData,
          ...result
        };
        props.onSaveState(addState);
      }
    },
    [formData]
  );

  // 默认选中签样部门第一条数据
  const { slave0Data = [], slave0SelectedRowKeys = [] } = props;
  const sIds = slave0Data.map(item => item.sId).join(",");
  useEffect(
    () => {
      if (
        commonUtils.isNotEmptyArr(slave0Data) &&
        !slave0SelectedRowKeys.length
      ) {
        onSelectRowChange("slave0", [slave0Data[0].sId]);
      }
    },
    [sIds]
  );

  // 获取表头数据
  const handleGetColumnData = (formData = [], isWait) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      const column = commonFunc.getHeaderConfig(config);
      addState = {
        ...addState,
        [`slave${i}Column`]: column,
        [`slave${i}Config`]: config
      };
    }
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  // 获取数据集
  const handleGetData = async (formData = [], isWait, extraConditions = {}) => {
    let addState = {};
    for (let i = 0; i < formData.length; i++) {
      const config = formData[i];
      if (!config) continue;
      const conditonValues = props.onGetSqlConditionValues(config);
      const staticValues = {
        sWorkshopId: props.app.userinfo.sWorkshopId
      };
      const result =
        (await props.onGetDataSet({
          name: `slave${i}`,
          configData: config,
          condition: {
            sSqlCondition: {
              ...conditonValues,
              ...staticValues,
              ...extraConditions
            }
          },
          isWait: true
        })) || {};
      props.setTempRef(result);
      addState = { ...addState, ...result };
    }
    props.setTempRef({}, true);
    if (isWait) {
      return addState;
    } else {
      props.onSaveState(addState);
    }
  };

  // 刷新指定表格
  const handleRefreshTableOne = (slaveIndex, extraConditions = {}) => {
    const formDataNew = new Array(slaveIndex + 1)
      .fill("")
      .map((_, index) => (index === slaveIndex ? formData[index] : ""));
    handleGetData(formDataNew, false, extraConditions);
  };

  // 初始化后执行一次指令集
  useEffect(
    () => {
      if (!props.bFinish) return;

      const { sOnShowInstruct } = formData[0];
      if (sOnShowInstruct) {
        props.onExecInstructSet({
          btnConfig: { sInstruct: sOnShowInstruct, showName: "页面初始化" }
        });
      }
    },
    [props.bFinish]
  );

  const onSelectRowChange = (name, selectedRowKeys) => {
    props.onTableSelectRowChange(name, selectedRowKeys);
    const selectedData = props.slave0Data.find(
      item => item.sId === selectedRowKeys[0]
    );
    handleRefreshTableOne(1, {
      iOrgeh: selectedData.sNo,
      sId: selectedRowKeys[0]
    });
  };

  // 如果父页面是签样/完成，发送成功后刷新父页面
  const handleSearchParentTable = () => {
    const oTab = document.querySelector(
      '.ant-tabs-tabpane[id*="签样/完成列表"]'
    );
    if (!oTab) return;
    const oRightBar = oTab.querySelector(".rightBar");
    if (!oRightBar) return;
    const oSearchBtnList = oRightBar.querySelectorAll(".ant-space-item");
    if (oSearchBtnList.length === 0) return;
    const oSearchBtnLength = oSearchBtnList.length;
    oSearchBtnList[oSearchBtnLength - 1].childNodes[0].click();
  };

  return {
    ...props,
    //  其他对象
    onRefreshTableOne: handleRefreshTableOne,
    onSearchParentTable: handleSearchParentTable,
    onSelectRowChange
  };
};

const firstNoticeModal = _props => {
  if (!_props.modalValue) return "";

  const props = useTeamInfoEvent(
    useCommonBase({ ..._props, sModelsId: teamInfoSid })
  );

  // 人员
  const [employeeName, setEmployeeName] = useState("");
  const [filterEmployeeName, setFilterEmployeeName] = useState("");
  const tableBaseProps = commonBusiness.getTableTypes("slave1", props);
  const tablePropsCrew = {
    ...tableBaseProps,
    data:
      tableBaseProps?.data?.filter(item =>
        item.sEmployeeName?.includes(filterEmployeeName) || item.sEmployeeNo?.includes(filterEmployeeName)
      ) || [],
    tableProps: {
      onChange: () => {},
      tableHeight: "100%"
    },
    onSelectRowChange: (name, selectedRowKeys) => {
      props.onTableSelectRowChange(name, selectedRowKeys);

      const {
        slave1Data = [],
        slave2Data = [],
        slave2SelectedRowKeys = []
      } = props;
      const slave2DataCopy = cloneDeep(slave2Data);
      slave1Data.forEach(item => {
        if (
          selectedRowKeys.includes(item.sId) &&
          !slave2SelectedRowKeys.includes(item.sId)
        ) {
          slave2DataCopy.push(item);
        }
        if (
          !selectedRowKeys.includes(item.sId) &&
          slave2SelectedRowKeys.includes(item.sId)
        ) {
          slave2DataCopy.splice(
            slave2DataCopy.findIndex(i => i.sId === item.sId),
            1
          );
        }
      });
      props.onSaveState({
        slave2Data: slave2DataCopy,
        slave2SelectedRowKeys: selectedRowKeys
      });
    }
  };

  // 收信人
  const tablePropsCollect = {
    ...commonBusiness.getTableTypes("slave2", props),
    // data: commonFunc.getTableSelectedData({ props, tableName: "slave1" }),
    tableProps: {
      onChange: () => {},
      tableHeight: "100%"
    },
    onSelectRowChange: (name, selectedRowKeys) => {
      props.onTableSelectRowChange(name, selectedRowKeys);

      props.onSaveState({
        slave2Data: props.slave2Data.filter(item =>
          selectedRowKeys.includes(item.sId)
        ),
        slave1SelectedRowKeys: selectedRowKeys
      });
    }
  };

  // 岗位
  const tablePropsPost = {
    ...commonBusiness.getTableTypes("slave0", props),
    tableProps: {
      onChange: () => {},
      tableHeight: "100%"
    },
    onSelectRowChange: props.onSelectRowChange
  };

  // 通知列表
  const tableProps = {
    ...commonBusiness.getTableTypes("slave4", props),
    tableProps: {
      onChange: () => {},
      tableHeight: "100%"
    }
  };

  const viewName = "slave3";
  const config = props[`${viewName}Config`] || {};
  const viewConfigs =
    config?.gdsconfigformslave?.filter(item => item.sName && item.bVisible) ||
    [];

  const viewRow = props[`${viewName}Data`]
    ? props[`${viewName}Data`][0] || {}
    : {};

  const viewProps = {
    ...props,
    enabled: true,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: viewName
  };
  const firstNotice = commonFunc.showLocalMessage(props, 'firstNotice', '首签样通知');
  const firstNoticeList = commonFunc.showLocalMessage(props, 'firstNoticeList', '版材消耗登记');
  const employeeNameIdTitle = commonFunc.showLocalMessage(props, 'employeeName', '员工名称/工号');
  const btnAll = 22222;
  const btnSearch = commonFunc.showLocalMessage(props, 'BtnSearch', '查询');
  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  const selectRecipient = commonFunc.showLocalMessage(props, 'selectRecipient', '请先选择接收人！');
  const btnSend = commonFunc.showLocalMessage(props, 'btnSend', '确认');

  return (
    <Modal
      title={firstNotice}
      footer={null}
      open={props.modalValue}
      width="65%"
      onCancel={() => props.setModalShow(false)}
      className="mesCommonModal"
    >
      <div className={styles.firstNoticeBox}>
        <div className="noticeInfo">
          <div className="post">
            {/* <h2>签样岗位</h2> */}
            <div className="post_table">
              <StaticEditTable {...tablePropsPost} />
            </div>
          </div>
          <div className="postUser">
            <div className="postUser_box">
              <div className="postTable">
                <StaticEditTable {...tablePropsCrew} />
              </div>
              <div className="userTable">
                <StaticEditTable {...tablePropsCollect} />
              </div>
            </div>
            <div className="postUser-foot">
              <Button
                size="large"
                type="primary"
                onClick={() => {
                  setEmployeeName("");
                  setFilterEmployeeName("");
                }}
              >
                {btnAll}
              </Button>
              <Input
                size="large"
                placeholder={employeeNameIdTitle}
                style={{ border: "1px solid #AAA", borderRadius: 5 }}
                value={employeeName}
                onChange={e => {
                  setEmployeeName(e.target.value);
                }}
              />
              <Button
                size="large"
                type="primary"
                onClick={() => {
                  setFilterEmployeeName(employeeName);
                }}
              >
                {btnSearch}
              </Button>
            </div>
          </div>
          <div className="postFrom">
            <div class="postFrom_box">
              <CommonViewTable {...viewProps} />
            </div>
            <div className="postFrom-foot">
              <Button
                size="large"
                type="primary"
                onClick={() => props.setModalShow(false)}
                style={{ background: "#ff7800", "border-color": "#ff7800" }}
              >
                {BtnCancel}
              </Button>
              <Button
                size="large"
                type="primary"
                onClick={() => {
                  if (commonUtils.isEmptyObject(tablePropsCollect.data)) {
                    message.info(selectRecipient);
                    return;
                  }

                  const btnSendConfig = props.slave3Config.gdsconfigformslave.find(
                    item => item.sControlName === "BtnSend"
                  );

                  props.onExecInstructSet({
                    btnConfig: btnSendConfig,
                    callback: () => {
                      props.onRefreshTableOne(4);
                      props.onSearchParentTable();
                    }
                  });
                }}
              >
                {btnSend}
              </Button>
            </div>
          </div>
        </div>
        <div class="noticeList">
          <h2>{firstNoticeList}</h2>
          <div>
            <StaticEditTable {...tableProps} />
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default firstNoticeModal;