import React, { useEffect } from "react";
import moment from "moment";
import { cloneDeep } from "lodash";
import { Button, Modal, message } from "antd";
import { UnorderedListOutlined, ArrowLeftOutlined } from "@ant-design/icons";

import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import * as commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";
import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonBusiness from "@/components/Common/commonBusiness";
import StaticEditTable from "@/components/Common/CommonTable";
import CommonViewTable from "@/components/Common/CommonViewTable";
import SetCountModalComponent from "../setCountModalComponent";

import styles from "./index.less";

const useVerifyScrapBillEvent = props => {
  const { formData = [], billType, copyTo = {} } = props;

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

      const [masterConfig, slaveConfig] = formData;
      const slaveColumn = commonFunc.getHeaderConfig(slaveConfig);

      let addState = {
        masterConfig,
        slaveConfig,
        slaveColumn,
        slaveConfigBak: cloneDeep(slaveConfig),
        slaveColumnBak: cloneDeep(slaveColumn),
        bFinish: true
      };

      if (billType === "add") {
        addState.enabled = true;
        addState.masterData = {
          sId: commonUtils.createSid(),
          handleType: "add",
          sFormId: props.sModelsId,
          maxBillNo: "sBillNo",
          tStartDate: moment().format("YYYY-MM-DD HH:mm:ss")
        };
        addState.slaveData = [
          {
            sParentId: addState.masterData.sId,
            sId: commonUtils.createSid(),
            handleType: "add"
          }
        ];
      } else if (billType === "view") {
        addState = {
          ...addState,
          ...(await hanldeGetData(copyTo.masterData.sId, true)),
          preMasterId: copyTo.masterData.sId
        };
      }
      props.onSaveState(addState);
    },
    [formData.length]
  );

  const hanldeGetData = async (sId, isWait) => {
    const [masterConfig, slaveConfig] = formData;
    const result = {
      ...((await props.onGetDataSet({
        name: "master",
        configData: masterConfig,
        condition: {
          sSqlCondition: { sId }
        },
        isWait: true
      })) || {}),
      ...((await props.onGetDataSet({
        name: "slave",
        configData: slaveConfig,
        condition: {
          sSqlCondition: { sParentId: sId }
        },
        isWait: true
      })) || {})
    };
    result.masterData = result.masterData[0];
    if (isWait) {
      return result;
    } else {
      props.onSaveState(result);
    }
  };

  // 监听主表sWorkOrderNo变化 => 根据返回的customConfig修改从表表头
  const { enabled, masterData = {} } = props;
  useEffect(
    () => {
      if (!masterData.sWorkOrderNo) return;
      const { slaveConfig = {}, slaveData = [] } = props;
      const { customConfig: customConfigStr = "[]" } = masterData;
      const customConfig = commonUtils.convertStrToObj(customConfigStr, []);

      const slaveConfigNew = cloneDeep(slaveConfig);
      slaveConfigNew.gdsconfigformslave = customConfig.sort(
        (a, b) => a.iOrder - b.iOrder
      );
      const slaveColumnNew = commonFunc.getHeaderConfig(slaveConfigNew);
      let addState = {
        slaveConfig: slaveConfigNew,
        slaveColumn: slaveColumnNew
      };

      if (enabled) {
        addState = {
          ...addState,
          slaveDelData: slaveData
            .filter(item => item.handleType !== "add")
            .map(item => ({ ...item, handleType: "del" })),
          slaveData: [
            {
              sParentId: masterData.sId,
              sId: commonUtils.createSid(),
              handleType: "add"
            }
          ]
        };
      }
      props.onSaveState(addState);
    },
    [masterData.sWorkOrderNo]
  );

  // 自定义表格内容处理
  const handleCostomColums = columns => {
    const { slaveConfig } = props;
    const { gdsconfigformslave } = slaveConfig;
    const showConfig = gdsconfigformslave.filter(
      item =>
        item.bVisible &&
        item.sName &&
        item.sDropDownType === "popup" &&
        item.sName !== "sTrayNo"
    );
    const sNameList = showConfig.map(item => item.sName);

    const costomColumns = columns.filter(item =>
      sNameList.includes(item.dataIndex)
    );

    costomColumns.forEach(column => {
      const config = showConfig.find(item => item.sName === column.dataIndex);
      column.render = (value, record, index) => {
        const valueJson = commonUtils.convertStrToObj(value, {});
        return (
          <div className={styles.tdDiv}>
            <Button
              type="link"
              size="large"
              onClick={e => {
                e.stopPropagation();
                if (!record.sTrayNo) {
                  message.error("请先选择版号!");
                  return;
                }

                props.onSaveState({
                  setCountModalbVisible: true,
                  sModalActiveId: config.sActiveId,
                  currentRowData: record,
                  currentColumn: config.sName,
                  currentProcessParentId: config.sControlName
                });
              }}
              style={
                commonUtils.isNotEmptyObject(valueJson.detail)
                  ? {
                      color: "#72c240"
                    }
                  : {}
              }
            >
              {valueJson.title && valueJson.count
                ? `${valueJson.title}：${valueJson.count}`
                : config.showName}
            </Button>
            <div className={styles.tdDetail}>
              {[""].map(() => {
                if (!valueJson.detail) return "";

                if (valueJson.bTree) {
                  return valueJson.detail.map(item => {
                    const { node = {}, data = [] } = item;
                    const { showName } = node;
                    const content = data
                      .map(i => `${i.sName}:${i.dWasteQty}`)
                      .join(";");
                    return (
                      <div
                        style={{ textWrap: "pretty" }}
                      >{`${showName}(${content})`}</div>
                    );
                  });
                } else {
                  return valueJson.detail.map(item => (
                    <div style={{ textWrap: "pretty" }}>{`${item.sName}:${
                      item.dWasteQty
                    }`}</div>
                  ));
                }
              })}
            </div>
          </div>
        );
      };
    });
  };

  const handleCancel = () => {
    props.onSaveState({ setCountModalbVisible: false });
  };

  const handleOk = result => {
    const { currentRowData, currentColumn, slaveData = [] } = props;
    const iIndex = slaveData.findIndex(item => item.sId === currentRowData.sId);
    slaveData[iIndex][currentColumn] = JSON.stringify(result);
    slaveData[iIndex].handleType = slaveData[iIndex].handleType || "update";

    props.onSaveState({ slaveData, setCountModalbVisible: false });
  };

  // 保存
  const handleBtnSave = async cb => {
    const {
      token,
      sModelsId,
      masterConfig,
      masterData,
      slaveConfig,
      slaveData,
      slaveDelData
    } = props;
    if (!commonBusiness.validateMaster(masterConfig, masterData, props)) return;
    if (!commonBusiness.validateTable(slaveConfig, slaveData, props)) return;

    const data = [];
    data.push(
      commonBusiness.mergeData("master", masterConfig.sTbName, [masterData])
    );
    data.push(
      commonBusiness.mergeData(
        "slave",
        slaveConfig.sTbName,
        slaveData,
        slaveDelData
      )
    );
    const params = { data, sClientType: "1", sSysLogSrcId: masterData.sId };
    const returnData = await commonBusiness.saveData({
      token,
      value: params,
      sModelsId
    });
    if (returnData.code === 1) {
      if (cb && false) {
        cb();
        return;
      }
      const bContinue = cb === "masterClick" ? false : true;
      hanldeGetData(masterData.sId);
      props.onSaveState({
        enabled: bContinue,
        billType: "view",
        preMasterId: masterData.sId
      });
    } else {
      props.getServiceError(returnData);
    }
  };

  // 取消
  const handleBtnCancel = () => {
    const { preMasterId } = props;
    if (preMasterId) {
      hanldeGetData(preMasterId);
      props.onSaveState({ enabled: false });
    } else {
      props.onBackList();
    }
  };
  const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
  const confirmDelete = commonFunc.showLocalMessage(props, 'confirmDelete', '确定删除');
  const BtnSure = commonFunc.showLocalMessage(props, 'BtnSure', '确认');
  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  // 删除
  const handleBtnDel = () => {
    const handleOkDel = async () => {
      const {
        // app,
        sModelsId,
        token,
        masterConfig,
        masterData,
        slaveConfig
      } = props;

      const value = {
        sClientType: "1",
        data: {
          sMasterTable: masterConfig.sTbName,
          sId: [masterData.sId]
        }
      };

      const sSlaveTable = [];
      sSlaveTable.push({
        tableName: slaveConfig.sTbName,
        relationName: "sParentId"
      });

      value.sSlaveTable = sSlaveTable;
      const url = `${
        commonConfig.server_host
      }business/delMasSlaBusinessData?sModelsId=${sModelsId}`;
      /*   接收返回值   */
      const { data } = await commonServices.postValueService(token, value, url);
      if (data.code === 1) {
        /*   数据删除成功   */
        message.info("删除成功");
        props.onBackList();
      } else {
        /*   失败   */
        props.getServiceError(data);
      }
    };

    Modal.confirm({
      title: FriendlyReminder,
      content: <div>{confirmDelete}</div>,
      okText: BtnSure,
      cancelText: BtnCancel,
      onOk() {
        handleOkDel();
      }
    });
  };

  // 新增
  const handleBtnAdd = () => {
    const sId = commonUtils.createSid();
    const addState = {
      billType: "add",
      enabled: true,
      masterData: {
        sId,
        handleType: "add",
        sFormId: props.sModelsId,
        maxBillNo: "sBillNo"
      },
      slaveConfig: props.slaveConfigBak,
      slaveColumn: props.slaveColumnBak,
      slaveData: [
        {
          sParentId: sId,
          sId: commonUtils.createSid(),
          handleType: "add"
        }
      ],
      slaveDelData: [],
      slaveSelectRowKeys: []
    };
    props.onSaveState(addState);
  };

  // 提交
  const handleBtnSubmit = () => {
    const { masterConfig, masterData } = props;
    const btnConfig = masterConfig.gdsconfigformslave.find(
      item => item.sControlName === "BtnSubmit"
    );
    if (!btnConfig) {
      message.info("请先添加按钮配置！");
      return;
    }

    props.onProcedureCall({
      btnConfig,
      onSuccess: () => {
        hanldeGetData(masterData.sId);
      }
    });
  };

  // 取消提交
  const handleBtnSubmitCancel = () => {
    const { masterConfig, masterData } = props;
    const btnConfig = masterConfig.gdsconfigformslave.find(
      item => item.sControlName === "BtnSubmitCancel"
    );
    if (!btnConfig) {
      message.info("请先添加按钮配置！");
      return;
    }

    props.onProcedureCall({
      btnConfig,
      onSuccess: () => {
        hanldeGetData(masterData.sId);
      }
    });
  };

  return {
    ...props,
    onCostomColums: handleCostomColums,
    onCancel: handleCancel,
    onOk: handleOk,
    onBtnSave: handleBtnSave,
    onBtnCancel: handleBtnCancel,
    onBtnDel: handleBtnDel,
    onBtnAdd: handleBtnAdd,
    onBtnSubmit: handleBtnSubmit,
    onBtnSubmitCancel: handleBtnSubmitCancel
  };
};
const VerifyScrapBill = baseProps => {
  const sModelsId =
    location.pathname.split("/")[8] || "12710101117056272342380";
  const props = useVerifyScrapBillEvent(
    useCommonBase({ ...baseProps, sModelsId })
  );

  const { bFinish } = props;
  if (!bFinish) return "";

  const {
    enabled,
    billType,
    setCountModalbVisible,
    sModalActiveId,
    masterData = {},
    currentRowData = {},
    currentColumn,
    currentProcessParentId
  } = props;

  const bCheckModel = sModelsId !== "12710101117056272342380";

  const { bSubmit, bCheck } = masterData;
  const bStatus = bCheckModel ? bCheck : bSubmit;

  const { sEmployeeName } = currentRowData;
  const employeeDataArr = commonUtils.convertStrToObj(sEmployeeName, []);
  const employeeData =
    employeeDataArr.find(item => item.sName === currentColumn) || {};

  const modalProps = {
    app: props.app,
    enabled,
    bVisible: setCountModalbVisible,
    sModelsId: sModalActiveId,
    onOk: props.onOk,
    onCancel: props.onCancel,
    employeeData,
    sValue: currentRowData[currentColumn],
    fixedConditonValues: {
      sWorkOrderId: masterData.sWorkOrderId,
      sBoardNo: currentRowData.sBoardNo,
      sProcessParentId: employeeData.sProcessParentId,
      sWorkOrderProcessTbId: employeeData.sWorkOrderProcessTbId,
      sProcessParentId: currentProcessParentId
    }
  };
  const BtnSure = commonFunc.showLocalMessage(props, 'BtnSure', '确认');
  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');4
  const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
  return (
    <div className={styles.verifyScrapBill}>
      <div className={styles.toolBar}>
        <div className={styles.content}>检验废登记表</div>
        <div className={styles.bakTools}>
          <Button
            size="large"
            type="link"
            icon={<ArrowLeftOutlined />}
            onClick={() => {
              if (enabled) {
                Modal.confirm({
                  title: FriendlyReminder,
                  content: "单据未保存，是否保存后返回？",
                  okText: BtnSure,
                  cancelText: BtnCancel,
                  onOk() {
                    props.onBtnSave(() => {
                      props.onBackList();
                    });
                  },
                  onCancel() {
                    props.onBackList();
                  }
                });
              } else {
                props.onBackList();
              }
            }}
          >
            返回
          </Button>
        </div>
        <div className={styles.tools}>
          <Button
            size="large"
            type="link"
            icon={<UnorderedListOutlined />}
            onClick={props.onBackList}
          >
            列表
          </Button>
        </div>
      </div>
      <div className={styles.billForm}>
        <div>
          <FormComponent {...props} />
        </div>
        <div>
          {/* <div>
            <Button
              type="primary"
              size="large"
              disabled={enabled}
              onClick={props.onBtnAdd}
            >
              新增
            </Button>
          </div> */}
          <div>
            <Button
              type="primary"
              size="large"
              disabled={enabled || bSubmit}
              onClick={() => {
                props.onSaveState({ enabled: true });
              }}
            >
              修改
            </Button>
          </div>
          <div>
            <Button
              type="primary"
              size="large"
              disabled={!enabled}
              onClick={() => props.onBtnSave("masterClick")}
            >
              保存
            </Button>
          </div>
          {/* <div>
            <Button
              type="primary"
              size="large"
              disabled={!enabled}
              onClick={props.onBtnCancel}
            >
              取消
            </Button>
          </div> */}
          <div>
            <Button
              type="primary"
              size="large"
              disabled={billType === "add" || enabled || bStatus || bCheckModel}
              onClick={props.onBtnDel}
            >
              删除
            </Button>
          </div>
          <div>
            <Button
              type="primary"
              size="large"
              disabled={billType === "add" || enabled || bStatus}
              onClick={props.onBtnSubmit}
            >
              {bCheckModel ? "审核" : "提交"}
            </Button>
          </div>
          <div>
            <Button
              type="primary"
              size="large"
              disabled={billType === "add" || enabled || !bStatus}
              onClick={props.onBtnSubmitCancel}
            >
              {bCheckModel ? "取消审核" : "取消提交"}
            </Button>
          </div>
        </div>
      </div>
      <div className={styles.table} key={masterData.sWorkOrderNo}>
        <TableComponent {...props} />
      </div>
      {modalProps.bVisible ? <SetCountModalComponent {...modalProps} /> : ""}
    </div>
  );
};

// 表单
const FormComponent = props => {
  const { masterConfig, masterData = {} } = props;
  const viewConfigs = masterConfig.gdsconfigformslave.filter(
    item =>
      item.sName &&
      item.bVisible &&
      item.sControlName.indexOf("Btn") === -1 &&
      item.sControlName.indexOf("_") === -1
  );

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: masterConfig,
    iColValueView: 24,
    viewRow: masterData,
    tableName: "master"
  };

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


// 表格
const TableComponent = props => {
  const FriendlyReminder = commonFunc.showLocalMessage(props, 'FriendlyReminder', '温馨提示');
  const BtnSure = commonFunc.showLocalMessage(props, 'BtnSure', '确认');
  const BtnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  const confirmDelRow = commonFunc.showLocalMessage(props, 'confirmDelRow', '确认删除行?');

  const baseProps = commonBusiness.getTableTypes("slave", {
    ...props,
    noStorageColumn: true
  });
  const tableProps = {
    ...baseProps,
    onCostomColums: props.onCostomColums,
    tableProps: {
      onChange: () => {}
    },
    bAddFirst: true,
    onMesTableLineDel: (...args) => {
      Modal.confirm({
        title: FriendlyReminder,
        content: <div>{confirmDelRow}</div>,
        okText: BtnSure,
        cancelText: BtnCancel,
        onOk() {
          props.onMesTableLineDel(...args);
        }
      });
    },
    onMesTableLineSave: () => {
      props.onBtnSave(() => {});
    },
    fixedHeight: "calc(100% - 50px)"
  };
  return <StaticEditTable {...tableProps} />;
};

export default VerifyScrapBill;