import React, { useEffect, useRef } from "react";
import { Modal, Button, Space, Row, Col } 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 instructSet from "@/components/Common/CommonInstructSet";

const AutoTableHeight = "350px";

// 业务层
const useTeamInfoEvent = props => {
  const nameCrewOrigin = useRef();
  const { formData, hasShowInfo } = props;

  let queryId = [];
  try {
    queryId = JSON.parse(props.reportRef?.sActiveKey || "[]");
  } catch (error) {
    queryId = [];
  }

  const queryFormData = queryId
    .map(j => {
      const result = formData.find(i => i && i.sId === j);
      if (result) return result;
    })
    .filter(Boolean);

  useEffect(
    async () => {
      if (
        commonUtils.isNotEmptyArr(queryFormData) &&
        queryFormData.length === 2
      ) {
        const nameCrew = queryFormData[1].sGrd;
        const colunmData = handleGetColumnData(queryFormData, true);
        const result = await handleGetData(queryFormData, true);
        const addState = {
          ...colunmData,
          ...result,
          [`${nameCrew}SelectedRowKeys`]:
            hasShowInfo?.sMainAssistantId?.split(",") || []
        };
        props.onSaveState(addState);
        nameCrewOrigin.current = addState[`${nameCrew}Data`];
      }
    },
    [formData, props.reportRef?.sActiveKey]
  );

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

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

  return {
    ...props,
    queryFormData,
    nameCrewOrigin
  };
};

export default _props => {
  if (!_props.reportInfoVisible) return "";

  const props = useTeamInfoEvent(_props);

  const { queryFormData, nameCrewOrigin } = props;

  if (!Array.isArray(queryFormData) || queryFormData.length !== 2) return "";

  const namePost = queryFormData[0].sGrd;
  const nameCrew = queryFormData[1].sGrd;

  let relationId = "sDepartId";
  if (queryFormData[1].sSqlCondition) {
    relationId = queryFormData[1].sSqlCondition.split(",")[0].split(".")[1];
  }

  const handleShowData = (name, selectedRowKeys) => {
    const dataShow = nameCrewOrigin.current;
    if (!Array.isArray(dataShow) || !Array.isArray(selectedRowKeys)) return;
    const sResponsibleDepartId = props[`${name}Data`]?.find(
      i => i && selectedRowKeys.includes(i.sId)
    )?.[relationId];
    const showData = dataShow.filter(
      i => i && sResponsibleDepartId === i[relationId]
    );
    props.onSaveState({ [`${nameCrew}NewData`]: showData });
  };

  const selectData = () => {
    return commonFunc.getTableSelectedData({
      props: { ...props, [`${nameCrew}Data`]: nameCrewOrigin.current || [] },
      tableName: nameCrew
    });
  };

  const tablePropsPost = {
    ...commonBusiness.getTableTypes(namePost, props),
    // tableProps: {
    //   AutoTableHeight
    // },
    fixedHeight: AutoTableHeight,
    onSelectRowChange: (name, selectedRowKeys) => {
      props.onSaveState({ [`${namePost}SelectedRowKeys`]: selectedRowKeys });
      handleShowData(name, selectedRowKeys);
    }
  };

  const tableBaseProps = commonBusiness.getTableTypes(nameCrew, props);
  const tablePropsCrew = {
    ...(tableBaseProps || {}),
    data: props[`${nameCrew}NewData`] || props[`${nameCrew}Data`],
    // tableProps: {
    //   AutoTableHeight
    // },
    fixedHeight: AutoTableHeight
  };

  const {
    [`${nameCrew}Data`]: crewData = [],
    [`${nameCrew}SelectedRowKeys`]: crewSelectedRowKeys = []
  } = props;
  const tablePropsCollect = {
    ...tableBaseProps,
    data: crewData.filter(item => crewSelectedRowKeys.includes(item.sId)),
    // tableProps: {
    //   AutoTableHeight
    // },
    fixedHeight: AutoTableHeight
  };

  // 执行指令集
  const handleExecInstructSet = async params => {
    const { btnConfig } = params;
    const { sInstruct } = btnConfig;
    if (!sInstruct) throw "";
    window.instructSetLock = false;
    await instructSet({ ...params });
  };

  const handleOk = () => {
    handleExecInstructSet({
      ...props,
      btnConfig: props.reportRef || {},
      [`${nameCrew}Data`]: selectData(),
      [`${nameCrew}DelData`]: [],
      [`${nameCrew}Config`]: queryFormData[1]
    }).then(() => {
      cancelCache();
    });
  };

  const cancelCache = () => {
    props.onSaveState({
      [`${namePost}Data`]: [],
      [`${namePost}DelData`]: [],
      [`${namePost}SelectedRowKeys`]: [],
      [`${nameCrew}Data`]: [],
      [`${nameCrew}NewData`]: undefined,
      [`${nameCrew}DelData`]: [],
      [`${nameCrew}SelectedRowKeys`]: []
    });
    props.handleReportInfo();
  };

  return (
    <Modal
      title={props.reportRef?.sDefault || ""}
      open={props.reportInfoVisible}
      width="65%"
      onCancel={cancelCache}
      maskClosable={false}
      className="mesCommonModal"
      footer={
        <Space>
          <Button size="large" onClick={cancelCache}>
            取消
          </Button>
          <Button size="large" type="primary" onClick={handleOk}>
            {props.confirmBtnName || "确定"}
          </Button>
        </Space>
      }
    >
      <Row gutter={[16, 0]}>
        <Col span={8} flex={1}>
          <StaticEditTable {...tablePropsPost} />
        </Col>
        <Col span={8} flex={1}>
          <StaticEditTable {...tablePropsCrew} />
        </Col>
        <Col span={8} flex={1}>
          <StaticEditTable {...tablePropsCollect} />
        </Col>
      </Row>
    </Modal>
  );
};