import React, { useEffect } from "react";
import * as commonUtils from "@/utils/utils";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";

import ShowType from "@/components/Common/CommonComponent";

import styles from "./index.less";

const usePrenatalReminderInfoEvent = props => {
  const { formData } = props;

  useEffect(
    async () => {
      if (commonUtils.isNotEmptyArr(formData)) {
        const result = await handleGetData(formData[0]);
        const result1 = await handleGetData(formData[1], 1);
        const result2 = await handleGetData(formData[2], 2);
        props.onSaveState({
          ...result,
          ...result1,
          ...result2,
          slaveConfig: formData[0],
          slave1Config: formData[1],
          slave2Config: formData[2],
          bFinish: true
        });
      }
    },
    [formData]
  );

  // 获取数据集
  const handleGetData = async (config, index = "") => {
    const { app } = props;
    const { userinfo = {} } = app;
    const globalData = commonUtils.convertStrToObj(
      localStorage.xlybusinessglobalData
    );
    const { sWorkshopId } = userinfo;
    const { currentSelectedMachineTaskDataRow = {} } = globalData;
    const { sOrderId } = currentSelectedMachineTaskDataRow;
    const conditonValues = props.onGetSqlConditionValues(config);
    const addState =
      (await props.onGetDataSet({
        name: `slave${index}`,
        configData: config,
        condition: {
          sSqlCondition: {
            ...conditonValues,
            sWorkshopId,
            sOrderId
          }
        },
        isWait: true
      })) || {};
    return addState;
  };

  return {
    ...props
  };
};

const PrenatalReminderInfo = baseProps => {
  const props = usePrenatalReminderInfoEvent(useCommonBase(baseProps));
  const { bFinish } = props;
  if (!bFinish) return "";

  const { app, slaveData, slave1Data, slave2Data, slave2Config } = props;

  const viewRow1 = commonUtils.isNotEmptyArr(slaveData) ? slaveData[0] : {};
  const viewRow2 = commonUtils.isNotEmptyArr(slave1Data) ? slave1Data[0] : {};
  const viewRow3 = commonUtils.isNotEmptyArr(slave2Data) ? slave2Data[0] : {};
  const viewRow = { ...viewRow1, ...viewRow2, ...viewRow3 };
  const tableName = "slave";

  const memoListFilter =
    slave2Config?.gdsconfigformslave
      .filter(item => item.bVisible)
      .map(({ sName, showName }) => ({ sName, showName })) || [];

  const leftSize = Math.ceil(memoListFilter.length / 2);
  const rightSize = memoListFilter.length - leftSize;
  const leftMemoList = memoListFilter.slice(0, leftSize);
  const rightMemoList = memoListFilter.slice(leftSize, memoListFilter.length);

  return (
    <div className={styles.prenatalReminderInfo}>
      {[
        "技术评审汇签",
        "客户投诉",
        "本批生产注意事项",
        "不合格报告",
        "车间产前提醒",
        "制程异常",
        "质检反馈"
      ].map((title, index) => {
        let dataValueNew = "";
        const child = {
          sId: commonUtils.createSid(),
          sName: `sTempMemo${index}`,
          sControlName: "",
          bVisible: true,
          showName: title
        };

        const memoList = new Array(20)
          .fill("")
          .map((_, i) => viewRow[`sNoteMemo${i + 1}`]);

        const getMemoValue = (from, to) => {
          const tempList = memoList
            .slice(from, to)
            .filter(item => item !== undefined)
            .map((item, i) => `${i + 1}) ${item}`);
          return tempList.join("\n");
        };

        if (title === "客户投诉") {
          dataValueNew = getMemoValue(0, 4);
        } else if (title === "不合格报告") {
          dataValueNew = getMemoValue(4, 8);
        } else if (title === "制程异常") {
          dataValueNew = getMemoValue(8, 12);
        } else if (title === "质检反馈") {
          dataValueNew = getMemoValue(12, 16);
        } else if (title === "车间产前提醒") {
          dataValueNew = viewRow.sMemo;
        } else if (title === "本批生产注意事项") {
          dataValueNew = getMemoValue(16, 20);
        } else if (title === "技术评审汇签") {
          const dataValue1 = leftMemoList
            .map(
              ({ sName, showName }) => `${showName}：${viewRow[sName] || ""}`
            )
            .join("\n");

          const dataValue2 = rightMemoList
            .map(
              ({ sName, showName }) => `${showName}：${viewRow[sName] || ""}`
            )
            .join("\n");
          const showTypeProps1 = {
            app,
            className: styles.showType,
            iColValue: 24,
            name: tableName,
            record: viewRow,
            sId: commonUtils.createSid(),
            getSqlDropDownData: props.getSqlDropDownData,
            getSqlCondition: props.getSqlCondition,
            handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
            getFloatNum: props.getFloatNum,
            onChange: props.onDataChange,
            showConfig: { ...child, costomStyle: styles.hideRightBorder },
            slaveConfig: props[`${tableName}Config`],
            formItemLayout: { labelCol: { span: 0 }, wrapperCol: { span: 24 } },
            textArea: true,
            enabled: false,
            dataValue: dataValue1,
            bTable: true,
            bViewTable: true,
            formRoute: props.formRoute,
            getDateFormat: props.getDateFormat
          };

          const showTypeProps2 = {
            app,
            className: styles.showType,
            iColValue: 24,
            name: tableName,
            record: viewRow,
            sId: commonUtils.createSid(),
            getSqlDropDownData: props.getSqlDropDownData,
            getSqlCondition: props.getSqlCondition,
            handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
            getFloatNum: props.getFloatNum,
            onChange: props.onDataChange,
            showConfig: { ...child, costomStyle: styles.hideLeftBorder },
            slaveConfig: props[`${tableName}Config`],
            formItemLayout: { labelCol: { span: 0 }, wrapperCol: { span: 24 } },
            textArea: true,
            enabled: false,
            dataValue: dataValue2,
            bTable: true,
            bViewTable: true,
            formRoute: props.formRoute,
            getDateFormat: props.getDateFormat
          };

          return (
            <div>
              <div className={styles.title}>{title}</div>
              <div className={styles.content1}>
                <ShowType {...showTypeProps1} />
                <ShowType {...showTypeProps2} />
              </div>
            </div>
          );
        }
        const showTypeProps = {
          app,
          className: styles.showType,
          iColValue: 24,
          name: tableName,
          record: viewRow,
          sId: commonUtils.createSid(),
          getSqlDropDownData: props.getSqlDropDownData,
          getSqlCondition: props.getSqlCondition,
          handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
          getFloatNum: props.getFloatNum,
          onChange: props.onDataChange,
          showConfig: child,
          slaveConfig: props[`${tableName}Config`],
          formItemLayout: { labelCol: { span: 0 }, wrapperCol: { span: 24 } },
          textArea: true,
          enabled: false,
          dataValue: dataValueNew,
          bTable: true,
          bViewTable: true,
          formRoute: props.formRoute,
          getDateFormat: props.getDateFormat
        };

        return (
          <div>
            <div className={styles.title}>{title}</div>
            <div className={styles.content}>
              <ShowType {...showTypeProps} />
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default PrenatalReminderInfo;