import React, { useEffect, useState, useRef, useMemo } from "react";
import { Button, Spin, Row, Col } from "antd";
import { operationFetch } from "./operationFetch";

import * as commonUtils from "@/utils/utils";
import useCommonBase from "@/components/Common/CommonHooks/useCommonBase";
import SiderInfoComponent from "@/mes/common/siderInfoComponent";
import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonFunc from "@/components/Common/commonFunc";
import StaticEditTable from "@/components/Common/CommonTable";
import CommonViewTable from "@/components/Common/CommonViewTable";
import CommonOperationBarComponent from "@/mes/common/commonOperationBarComponent";

import styles from "./index.less";
import {
  DoubleLeftOutlined,
  LeftOutlined,
  MinusOutlined,
  PlusOutlined,
  RightOutlined
} from "@ant-design/icons";
import { Space } from "antd";
import CommonModelComponent from "../../common/commonModelComponent";
import { message } from "antd";
import { Modal } from "antd";
import { Select } from "antd";
import { Input } from "antd";
import { cloneDeep } from "lodash";

const list = [
  { sName: "qztable0", sGrd: "qztable0" }, // 切纸生产执行
  { sName: "jytable0", sGrd: "jytable0" }, // 胶印生产执行
  { sName: "wytable0", sGrd: "wytable0" }, // 凹印生产执行
  { sName: "wytgtable0", sGrd: "wytgtable0" } // 凹印挑规生产执行
];

const useProductionExecMainEvent = props => {
  const { formData = [] } = props;
  const noProduction= commonFunc.showLocalMessage(props, 'noProduction', '暂无生产执行数据，请先开工一条任务!');

  const waitWorkLoading = commonFunc.showLocalMessage(props, 'waitWorkLoading', '等待工单数据加载中...');

  const productionLoading = commonFunc.showLocalMessage(props, 'productionLoading', '生产执行数据加载中...');

  const [refreshCount, setRefreshCount] = useState(0);
  const [pageloading, setPagesLoading] = useState(true);

  const { workOrderInfoData = [] } = props;
  const workOrderInfoRowData = workOrderInfoData[0] || {};
  const { sSrcSlaveId, iInterface: iInterfaceOld } = workOrderInfoRowData;
  const bNoWorkOrderInfo = props.bFinish1 && !sSrcSlaveId;
  const pageloadingMsg = sSrcSlaveId
    ? productionLoading
    : props.bFinish1
      ? noProduction
      : waitWorkLoading;

  const { app } = props;
  const { userinfo = {} } = app;
  const iInterface =
    iInterfaceOld === undefined ? userinfo.iInterface : iInterfaceOld;
  useEffect(
    async () => {
      if (commonUtils.isEmptyArr(formData)) return;
      if (!sSrcSlaveId) return;

      const listFilter = window.execTest
        ? list
        : list.filter((_, index) => iInterface == index);

      // 页面表明和配置表名对应关系
      const tableNameCompareJson = {};
      [...listFilter, ...props.execListExtra].forEach(item => {
        tableNameCompareJson[item.sGrd] = item.sName;
      });

      let addState = {
        tableNameCompareJson,
        bFinish: true
      };

      const fetchData = async () => {
        for (let i = 0; i < listFilter.length; i++) {
          const item = listFilter[i];
          const { sName, sGrd } = item;
          const config = formData.find(item => item.sGrd === sGrd);
          if (config) {
            addState = {
              ...addState,
              ...handleGetColumnData(config, sName),
              ...(await handleGetData(config, sName))
            };
          }
        }
      };
      fetchData()
        .then(() => {
          props.onSaveState(addState);
        })
        .finally(() => {
          setPagesLoading(false);
        });
    },
    [formData.length, sSrcSlaveId, refreshCount]
  );

  // 获取表头数据
  const handleGetColumnData = (config, name) => {
    const column = commonFunc.getHeaderConfig(config);
    return {
      [`${name}Column`]: column,
      [`${name}Config`]: config
    };
  };

  // 获取数据集
  const handleGetData = async (config, name, filterFunc) => {
    const conditonValues = props.onGetSqlConditionValues(config);
    const { [`${name}Filter`]: bFilter } = props;
    try {
      const addState =
        (await props.onGetDataSet({
          name: name,
          configData: config,
          condition: {
            sSqlCondition: { ...conditonValues, sSrcSlaveId },
            bFilter
          },
          isWait: true
        })) || {};
      // 如果选中的数据不在返回的数据中，则清空选中数据
      const { [`${name}Data`]: tableDataOld = [] } = addState;
      const tableData = filterFunc ? filterFunc(tableDataOld) : tableDataOld;
      addState[`${name}Data`] = tableData;
      const { [`${name}SelectedRowKeys`]: selectedRowKeys = [] } = props;
      if (selectedRowKeys.length) {
        const selectedRowKeysNew = selectedRowKeys.filter(item =>
          tableData.some(rowData =>
            [rowData.sId, rowData.sSlaveId].includes(item)
          )
        );
        addState[`${name}SelectedRowKeys`] = selectedRowKeysNew;
      }
      if (addState[`${name}SelectedRowKeys`] === undefined) {
        delete addState[`${name}SelectedRowKeys`];
      }
      return addState;
    } catch (error) {
      console.log("=====error", error);
      return {};
    }
  };

  // 刷新页面
  const handleRefresh = () => {
    setRefreshCount(pre => pre + 1);
  };

  // 刷新指定表格
  const { refreshTableList = [] } = props;
  useEffect(
    async () => {
      if (!refreshTableList.length) return;
      if (!list.some(item => refreshTableList.includes(item.sName))) return;

      if (refreshTableList.includes("*")) {
        props.onSaveState({ refreshTableList: [] }, () => {
          handleRefresh();
        });
        return;
      }

      let addState = {
        refreshTableList: []
      };
      for (let i = 0; i < refreshTableList.length; i++) {
        const tableName = refreshTableList[i];
        const config = props[`${tableName}Config`];
        if (!config || tableName.includes("FirstlineSelected")) continue;

        const result = await handleGetData(config, tableName);
        const tableList = refreshTableList;
        if (tableName?.includes("master")) {
          const masterData = result[`${tableName}Data`];
          result[`${tableName}Data`] = masterData?.[0] || {};
        } else {
          // 如果选中的数据不在返回的数据中，则清空选中数据
          const { [`${tableName}Data`]: tableData = [] } = result;
          const {
            [`${tableName}SelectedRowKeys`]: selectedRowKeys = []
          } = props;
          if (selectedRowKeys.length) {
            const selectedRowKeysNew = selectedRowKeys.filter(item =>
              tableData.some(rowData =>
                [rowData.sId, rowData.sSlaveId].includes(item)
              )
            );
            result[`${tableName}SelectedRowKeys`] = selectedRowKeysNew;
          }
        }

        // 如果配置了默认选中第一行,则默认选中第一行,刷新数据集时配置NotFirstlineSelected则不刷新
        let bNotFirstlineSelected =
          tableList.findIndex(
            item => item === `${tableName}NotFirstlineSelected`
          ) > -1;

        if (!bNotFirstlineSelected) {
          // 如果配置了默认选中第一行,则默认选中第一行
          let bFirstlineSelected = config.gdsconfigformslave.find(
            item => item.sControlName === "bFirstlineSelected" && item.bVisible
          );
          // 配置刷新数据时，配置 数据集名称+FirstlineSelected，默认选中首行数据。
          if (!bFirstlineSelected) {
            bFirstlineSelected =
              tableList.findIndex(
                item => item === `${tableName}FirstlineSelected`
              ) > -1;
          }
          if (bFirstlineSelected) {
            if (commonUtils.isNotEmptyObject(result[`${tableName}Data`])) {
              result[`${tableName}SelectedRowKeys`] = [
                result[`${tableName}Data`][0].sId
              ];
              result.triggerClickTableList = result.triggerClickTableList || [];
              result.triggerClickTableList.push(tableName);
            }
          }
        }

        addState = { ...addState, ...result };
      }

      props.onSaveState(addState);
    },
    [refreshTableList.length]
  );

  // 操作选中上一条下一条
  const handlePagesNuxt = (tableName, type) => {
    const {
      [`${tableName}Data`]: data = [],
      [`${tableName}SelectedRowKeys`]: selectedRowKeys = []
    } = props;
    let index = props[`${tableName}Data`].findIndex(
      item => item.sId === selectedRowKeys[0]
    );
    const checkedRows = sId =>
      props.onSaveState({ [`${tableName}SelectedRowKeys`]: [sId] });
    ({
      // 下一条
      next: () => {
        if (!data.length) return;
        if (data.length - 1 == index) {
          message.info("已经是最后一条了");
          return;
        }
        checkedRows(data[index + 1].sId);
      },
      // 上一条
      up: () => {
        if (!data.length) return;
        if (index == 0) {
          message.info("已经是第一条了");
          return;
        }
        checkedRows(data[index - 1].sId);
      }
    }[type]());
  };

  // 过滤未打标签的数据
  const { untaggedTableName, untaggedFilterFields = [] } = props;
  useEffect(
    async () => {
      if (!untaggedTableName) return;

      const config = props[`${untaggedTableName}Config`];
      const addState = await handleGetData(
        config,
        untaggedTableName,
        tableData => {
          if (untaggedFilterFields.length) {
            return tableData.filter(item =>
              untaggedFilterFields.every(field => !item[field])
            );
          } else {
            return tableData.filter(item =>
              [
                item.bClStatus,
                item.bCpStatus,
                item.bYcStatus,
                item.bWlStatus
              ].includes(false)
            );
          }
        }
      );

      props.onSaveState({
        ...addState,
        untaggedTableName: undefined,
        untaggedFilterFields: undefined
      });
    },
    [untaggedTableName]
  );

  // 获取按钮状态
  const handleGetBtnStatus = (tableNameOld, btnConfig) => {
    const { sDefault: str } = btnConfig;
    if (!str) return false;

    let tableName = tableNameOld;
    const iIndex = list.findIndex(item => item.sName === tableNameOld);
    if (iIndex > -1) {
      tableName = list[iIndex].sGrd;
    }

    const {
      [`${tableNameOld}SelectedRowKeys`]: selectedRowKeys = [],
      [`${tableNameOld}Data`]: tableData = []
    } = props;

    if (!tableData.length) return true;

    const record =
      tableData.find(item => item.sId === selectedRowKeys[0]) || tableData[0];

    let strNew = str;
    const tempData = {
      [tableName]: record
    };

    let result = true;
    try {
      Object.keys(tempData).forEach(key => {
        const reg = new RegExp(`${key}\\.`, "g");
        strNew = strNew.replace(reg, `tempData["${key}"].`);
        const reg1 = new RegExp(`${key}@`, "g");
        strNew = strNew.replace(reg1, `tempData["${key}"]`);
      });
      const evalStr = eval("`" + strNew + "`");
      result = !eval(evalStr);
    } catch (error) {
      console.log("=====表格行按钮状态错误", {
        tempData,
        str,
        error
      });
    }
    return result;
  };

  // 获取成品不良类别弹窗数据
  const handleGetBllbData = async (sId, cb) => {
    const config = formData.find(item => item.sGrd === "bllbtable0");
    if (!config) return;
    const result =
      (await props.onGetDataSet({
        name: "bllbtable0",
        configData: config,
        condition: {
          sSqlCondition: { sId }
        },
        isWait: true
      })) || {};
    result.bllbtable0Config = config;
    props.onSaveState(result, cb);
  };

  // 限制半秒内只能点一次
  const clickRef = useRef(true);
  const timeRef = useRef(null);
  const handleGetBtnContinue = () => {
    const result = clickRef.current;
    if (result) {
      clickRef.current = false;
      clearTimeout(timeRef.current);
      timeRef.current = setTimeout(() => {
        clickRef.current = true;
      }, 500);
    }
    return result;
  };

  return {
    ...props,
    iInterface,
    pageloading,
    setPagesLoading,
    pageloadingMsg,
    bNoWorkOrderInfo,
    onRefresh: handleRefresh, // 刷新页面
    onPagesNuxt: handlePagesNuxt, // 操作选中上一条下一条
    onGetBtnStatus: handleGetBtnStatus, // 获取按钮状态
    onGetBllbData: handleGetBllbData, // 获取成品不良类别弹窗数据
    onGetBtnContinue: handleGetBtnContinue
  };
};

const ProductionExecMain = baseProps => {
  const bStartWork = commonUtils.getAppData("userinfo", "bStartWork");
  const workFirst = commonFunc.showLocalMessage(baseProps, 'workFirst', '请先上班后再操作');
  if (!bStartWork) {
    return <div className={styles.noStartWork}>{workFirst}</div>;
  }

  const props = useProductionExecMainEvent(useCommonBase(baseProps));
  const { app = {} } = baseProps;

  const [refreshCount, setRefreshCount] = useState(0);

  useEffect(() => {
    const getValue = () => {
      const changeExecInfo = commonUtils.getAppData("changeExecInfo");
      if (changeExecInfo.dReplyPalletERp === 1) {
        props.onRefresh();
        setRefreshCount(pre => pre + 1);
      }
    };

    getValue();
    const timer = setInterval(() => {
      getValue();
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  const { bFinish } = props;
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className={styles.productionExecMain}>
      <div className={`leftPanel ${collapsed ? "collapsed" : ""}`}>
        <SiderInfoComponent {...props} />
      </div>
      <div className={`rightPanel ${collapsed ? "collapsed" : ""}`}>
        {props.pageloading ? (
          <div
            className={`mesPageloadingDiv ${
              props.bNoWorkOrderInfo ? "hideDot" : ""
            }`}
          >
            <Spin
              spinning={props.pageloading}
              size="large"
              tip={props.pageloadingMsg}
            />
          </div>
        ) : (
          ""
        )}
        {window.execTest ? (
          <div style={{ position: "absolute", top: -30, right: 0 }}>
            {[
              "切纸0",
              "胶印1",
              "凹印2",
              "凹印挑规3",
              "凹印分切4",
              "剔废5",
              "拼接6",
              "倒卷7",
              "读码8",
              "品检9",
              "包装10"
            ].map((item, index) => {
              let productionExecType = "type0";
              if (item === "切纸0") {
                productionExecType = "type";
              } else {
                productionExecType = `type${index - 1}`;
              }

              return (
                <Button
                  type={
                    (props.productionExecType || `type0`) == productionExecType
                      ? "primary"
                      : "dashed"
                  }
                  onClick={() => {
                    props.onSaveState({
                      productionExecType
                    });
                  }}
                >
                  {item}
                </Button>
              );
            })}
          </div>
        ) : (
          ""
        )}

        {bFinish && (
          <ProductionExecContentByType
            key={props.productionExecType}
            {...props}
            changeExecInfo={app.changeExecInfo}
            refreshCount={refreshCount}
          />
        )}
      </div>

      {/* 侧边展开收缩 */}
      <div
        onClick={() => {
          setCollapsed(!collapsed);
        }}
        className={`btns ${styles.expandCutBtn} ${
          collapsed ? "collapsed" : ""
        }`}
        style={{ display: !props.bFinish1 ? "none" : "" }}
      >
        <Button
          icon={<DoubleLeftOutlined rotate={collapsed ? 180 : 0} />}
          type="link"
        />
      </div>
    </div>
  );
};

// 根据类型展示不同内容
const ProductionExecContentByType = props => {
  const {
    productionExecType,
    deviceTargetInfoConfig = {},
    deviceTargetInfoData = [],
    setPagesLoading,
    refreshCount = 0
  } = props;
  const PRrevisionEnd = commonFunc.showLocalMessage(props, 'Proofreading/revisionEnd', '装校版结束');
  const PRrevisionStart = commonFunc.showLocalMessage(props, 'Proofreading/revisionStart', '装校版开始');
  /**
   * 设备状态值
   */
  const sStatusNameProcess = useMemo(
    () => {
      if (
        !Array.isArray(deviceTargetInfoData) ||
        !deviceTargetInfoData[0] ||
        !deviceTargetInfoData[0]?.sStatus
      )
        return;
      const sStatusNameValue = deviceTargetInfoData[0]?.sStatus?.includes(
        "adjustment"
      )
        ? 0
        : 1;

      const showValue = {
        stop: {
          showName: PRrevisionEnd,
          onClick: config =>
            operationFetch(props, config, undefined, () => {
              props.onSaveState({
                refreshDeviceTargetInfo: true
              });
              setPagesLoading(false);
            })
        },
        again: {
          showName: PRrevisionStart,
          onClick: config =>
            operationFetch(props, config, "again", () => {
              props.onSaveState({
                refreshDeviceTargetInfo: true
              });
              setPagesLoading(false);
            })
        }
      };

      const flag = {
        0: "stop",
        1: "again"
      }[sStatusNameValue];

      return showValue[flag];
    },
    [deviceTargetInfoConfig, deviceTargetInfoData]
  );

  props = { ...props, sStatusNameProcess };

  const { iInterface } = props;
  if (iInterface === undefined) {
    message.warning("未获取到iInterface字段！");
    return "";
  }

  const type0 =
    window.execTest && productionExecType
      ? productionExecType
      : `type${iInterface === 0 ? "" : iInterface - 1}`;

  const type = `${type0}-${refreshCount}`;

  const content = {
    type: <ProductionExecContent {...props} key={type} />,
    type0: <ProductionExecContent0 {...props} key={type} />,
    type1: <ProductionExecContent1 {...props} key={type} />,
    type2: <ProductionExecContent2 {...props} key={type} />,
    type3: <ProductionExecContent3 {...props} key={type} />,
    type4: <ProductionExecContent4 {...props} key={type} />,
    type5: <ProductionExecContent5 {...props} key={type} />,
    type6: <ProductionExecContent6 {...props} key={type} />,
    type7: <ProductionExecContent7 {...props} key={type} />,
    type8: <ProductionExecContent8 {...props} key={type} />,
    type9: <ProductionExecContent9 {...props} key={type} />
  };

  return content[type0] || "";
};

// 类型-切纸
const ProductionExecContent = props => {
  const tableName = "qztable0";
  const tableTypes = commonBusiness.getTableTypes(tableName, props);
  const {
    config: configOld = {},
    data = [],
    selectedRowKeys = [],
    name
  } = tableTypes;
  const config = props.onMergeTableConfig(configOld);

  const sIdGroupStr = data.map(item => item.sId).toString();

  useEffect(
    () => {
      if (!data.length) return;
      // 让第一条选中
      props.onSaveState({
        [`${tableName}SelectedRowKeys`]: [data[0].sId]
      });
    },
    [sIdGroupStr]
  );

  const tableProps = {
    ...tableTypes,
    footer: "hidden", // 合计栏
    tableProps: {}
  };

  const viewConfigs = config.gdsconfigformslave
    .filter(item => item.bControl && item.sControlName.indexOf("Btn") === -1)
    // .filter((_, index) => index < 8)
    .map(item => ({
      ...item,
      iColValue: 24
    }));

  const viewRow =
    (selectedRowKeys[0]
      ? data.find(item => item.sId === selectedRowKeys[0])
      : data[0]) || {};

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: name,
    enabled: commonUtils.isNotEmptyObject(viewRow)
  };

  const btnProps = {
    type: "primary",
    size: "large",
    style: { width: 80 }
  };

  const getBtnConfigByControlName = sControlName => {
    const btnConfig =
      config.gdsconfigformslave.find(
        item => item.sControlName === sControlName
      ) || {};
    return {
      ...btnConfig,
      disabled: props.onGetBtnStatus(tableName, btnConfig),
      onClick: async () => {
        if (!props.onGetBtnContinue()) return;
        await props.awaitPromiseReturn();
        const { sButtonParam, sInstruct } = btnConfig;
        // 调用指令集
        if (sInstruct) {
          props.onExecInstructSet({
            ...props,
            btnConfig,
            tableLineParams: {
              name: "qztable0",
              record: viewRow,
              index: data.findIndex(item => item.sId === viewRow.sId)
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }
      }
    };
  };

  const operationBarProps = {
    ...props,
    sName: name,
    bCostom: true,
    onRefresh: props.onRefresh // 刷新页面
  };

  const btnTableList = [
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    // "plateInfo",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const { workOrderInfoData = [] } = props;
  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    hideTabList: ["plateInfo"],
    sFilterConditions: {
      sId: selectedRowKeys[0],
      sSrcSlaveId: workOrderInfoData[0]?.sWorkOrderId,
      sProductId: workOrderInfoData[0]?.sProductId
    },
    noGetData: !selectedRowKeys.length
  };

  const tabRef = useRef();
  const changeTab = index => {
    if (!tabRef.current) return;
    const oNavList = tabRef.current.querySelector(".ant-tabs-nav-list");
    if (!oNavList) return;
    oNavList.childNodes[index].click();
  };
  const MCR = commonFunc.showLocalMessage(props, 'MCR', '物料消耗登记');
  const PMCR = commonFunc.showLocalMessage(props, 'PMCR', '版材消耗登记');
  const Blanking = commonFunc.showLocalMessage(props, 'finishConstruction', '下料');
  const product1 = commonFunc.showLocalMessage(props, 'product1', '产量①');
  const product2 = commonFunc.showLocalMessage(props, 'product2', '产品②');
  const revoke = commonFunc.showLocalMessage(props, 'revoke', '撤销');
  const abnormal3 = commonFunc.showLocalMessage(props, 'abnormal3', '异常③');
  return (
    <div className={styles.type1}>
      <div className="topPart">
        <div className="type1Content">
          <div className="leftTable">
            <StaticEditTable {...tableProps} />
          </div>
          <div className="rightForm">
            <CommonViewTable className="rightFormBox" {...viewProps} />
            <div className="rightFormBtn">
              <div className="rightFormBtnFloor">
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnEventBlanking")}
                  >
                    {Blanking}
                  </Button>
                </Space>
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint1")}
                  >
                    {product1}
                  </Button>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint2")}
                  >
                    {product2}
                  </Button>
                  {/* <Button {...btnProps}>产品②</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFloor">
                <Space className="leftPart">
                  <Button
                    className="abnormalBtn"
                    style={{ "border-color": "#faad14", background: "#faad14" }}
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnCancel")}
                  >
                    {revoke}
                  </Button>
                </Space>
                <Space className="rightPart">
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint3")}
                  >
                    {abnormal3}
                  </Button>
                  {/* <Button {...btnProps}>撤销</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFoot pagesNuxt">
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "up")}
                  icon={<LeftOutlined />}
                  {...btnProps}
                />
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "next")}
                  icon={<RightOutlined />}
                  {...btnProps}
                />
                {[""].map(() => {
                  const sControlName = "BtnRight1.BtnPrint4";
                  const btnConfig = config.gdsconfigformslave.find(
                    item => item.sControlName === sControlName
                  );
                  if (!btnConfig) return "";

                  return (
                    <Button
                      {...btnProps}
                      {...getBtnConfigByControlName(sControlName)}
                      className={`${styles.print4} print4`}
                    >
                      {btnConfig.showName}
                    </Button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="btns">
          <CommonOperationBarComponent {...operationBarProps} />
        </div>
      </div>
      <div className="bottomPart">
        <div className="commonModel" ref={tabRef}>
          <CommonModelComponent {...commonModelProps} />
        </div>
        <div className="btnPart">
          <Space>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 0)}
            >
              {MCR}
            </Button>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 2)}
            >
              {PMCR}
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

// 类型0-胶印
const ProductionExecContent0 = props => {
  const tableName = "jytable0";
  const tableTypes = commonBusiness.getTableTypes(tableName, props);
  const {
    config: configOld = {},
    data = [],
    selectedRowKeys = [],
    name
  } = tableTypes;
  const config = props.onMergeTableConfig(configOld);
  const sIdGroupStr = data.map(item => item.sId).toString();

  const timer = useRef(null);
  useEffect(
    () => {
      if (!data.length) return;
      // 让第一条选中
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        props.onSaveState({
          [`${tableName}SelectedRowKeys`]: [data[0].sId]
        });
      }, 200);
    },
    [sIdGroupStr]
  );

  const tableProps = {
    ...tableTypes,
    footer: "hidden", // 合计栏
    tableProps: {}
  };

  const viewConfigs = config.gdsconfigformslave
    .filter(item => item.bControl && item.sControlName.indexOf("Btn") === -1)
    // .filter((_, index) => index < 8)
    .map(item => ({
      ...item,
      iColValue: 24
    }));

  const viewRow =
    (selectedRowKeys[0]
      ? data.find(item => item.sId === selectedRowKeys[0])
      : data[0]) || {};

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: name,
    enabled: commonUtils.isNotEmptyObject(viewRow)
  };

  const btnProps = {
    type: "primary",
    size: "large",
    style: { width: 80 }
  };

  const getBtnConfigByControlName = sControlName => {
    const btnConfig =
      config.gdsconfigformslave.find(
        item => item.sControlName === sControlName
      ) || {};
      if (!btnConfig.bVisible) {
        btnConfig.style = { display: "none" };
      }
    return {
      ...btnConfig,
      disabled: props.onGetBtnStatus(tableName, btnConfig),
      onClick: async () => {
        if (!props.onGetBtnContinue()) return;
        await props.awaitPromiseReturn();
        const { sButtonParam, sInstruct } = btnConfig;
        // 调用指令集
        if (sInstruct) {
          props.onExecInstructSet({
            ...props,
            btnConfig,
            tableLineParams: {
              name: "jytable0",
              record: viewRow,
              index: data.findIndex(item => item.sId === viewRow.sId)
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }
      }
    };
  };

  const operationBarProps = {
    ...props,
    sName: name,
    bCostom: true,
    onRefresh: props.onRefresh // 刷新页面
  };

  const btnTableList = [
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    "plateInfo",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const { workOrderInfoData = [] } = props;
  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    sFilterConditions: {
      sId: selectedRowKeys[0],
      sSrcSlaveId: workOrderInfoData[0]?.sWorkOrderId,
      sProductId: workOrderInfoData[0]?.sProductId
    },
    noGetData: !selectedRowKeys.length
  };
  const Blanking = commonFunc.showLocalMessage(props, 'finishConstruction', '下料');
  const product1 = commonFunc.showLocalMessage(props, 'product1', '产量①');
  const product2 = commonFunc.showLocalMessage(props, 'product2', '产品②');
  const Revoke = commonFunc.showLocalMessage(props, 'revoke', ' 撤销');
  const abnormal3 = commonFunc.showLocalMessage(props, 'abnormal3', '异常③');
  const MCR = commonFunc.showLocalMessage(props, 'MCR', '物料消耗登记');
  const PMCR = commonFunc.showLocalMessage(props, 'PMCR', '版材消耗登记');

  const tabRef = useRef();
  const changeTab = index => {
    if (!tabRef.current) return;
    const oNavList = tabRef.current.querySelector(".ant-tabs-nav-list");
    if (!oNavList) return;
    oNavList.childNodes[index].click();
  };

  return (
    <div className={styles.type1}>
      <div className="topPart">
        <div className="type1Content">
          <div className="leftTable">
            <StaticEditTable {...tableProps} />
          </div>
          <div className="rightForm">
            <CommonViewTable className="rightFormBox" {...viewProps} />
            <div className="rightFormBtn">
              <div className="rightFormBtnFloor">
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnEventBlanking")}
                  >
                    {Blanking}
                  </Button>
                </Space>
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint1")}
                  >
                    {product1}
                  </Button>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint2")}
                  >
                    {product2}
                  </Button>
                  {/* <Button {...btnProps}>产品②</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFloor">
                <Space className="leftPart">
                  <Button
                    className="abnormalBtn"
                    style={{ "border-color": "#faad14", background: "#faad14" }}
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnCancel")}
                  >
                    {Revoke}
                  </Button>
                </Space>
                <Space className="rightPart">
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint3")}
                  >
                    {abnormal3}
                  </Button>
                  {/* <Button {...btnProps}>撤销</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFoot pagesNuxt">
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "up")}
                  icon={<LeftOutlined />}
                  {...btnProps}
                />
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "next")}
                  icon={<RightOutlined />}
                  {...btnProps}
                />
                {[""].map(() => {
                  const sControlName = "BtnRight1.BtnPrint4";
                  const btnConfig = config.gdsconfigformslave.find(
                    item => item.sControlName === sControlName
                  );
                  if (!btnConfig) return "";

                  return (
                    <Button
                      {...btnProps}
                      {...getBtnConfigByControlName(sControlName)}
                      className={`${styles.print4} print4`}
                    >
                      {btnConfig.showName}
                    </Button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="btns">
          <CommonOperationBarComponent {...operationBarProps} />
        </div>
      </div>
      <div className="bottomPart">
        <div className="commonModel" ref={tabRef}>
          <CommonModelComponent {...commonModelProps} />
        </div>
        <div className="btnPart">
          <Space>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 0)}
            >
              {MCR}
            </Button>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 2)}
            >
              {PMCR}
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

// 类型1-凹印
const ProductionExecContent1 = props => {
  const tableName = "wytable0";
  const tableTypes = commonBusiness.getTableTypes(tableName, props);
  const {
    config: configOld = {},
    data = [],
    selectedRowKeys = [],
    name
  } = tableTypes;
  const config = props.onMergeTableConfig(configOld);
  const sIdGroupStr = data.map(item => item.sId).toString();

  const timer = useRef(null);
  useEffect(
    () => {
      if (!data.length) return;
      // 让第一条选中
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        props.onSaveState({
          [`${tableName}SelectedRowKeys`]: [data[0].sId]
        });
      }, 200);
    },
    [sIdGroupStr]
  );

  const tableProps = {
    ...tableTypes,
    footer: "hidden", // 合计栏
    tableProps: {}
  };

  const viewConfigs = config.gdsconfigformslave
    .filter(item => item.bControl && item.sControlName.indexOf("Btn") === -1)
    // .filter((_, index) => index < 8)
    .map(item => ({
      ...item,
      iColValue: 24
    }));

  const viewRow =
    (selectedRowKeys[0]
      ? data.find(item => item.sId === selectedRowKeys[0])
      : data[0]) || {};

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: name,
    enabled: commonUtils.isNotEmptyObject(viewRow)
  };

  const btnProps = {
    type: "primary",
    size: "large",
    style: { width: 80 }
  };

  const operationBarProps = {
    ...props,
    sName: name,
    bCostom: true,
    onRefresh: props.onRefresh // 刷新页面
  };

  const btnTableList = [
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    "plateInfo",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const { workOrderInfoData = [] } = props;
  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    sFilterConditions: {
      sId: selectedRowKeys[0],
      sSrcSlaveId: workOrderInfoData[0]?.sSrcSlaveId,
      sProductId: workOrderInfoData[0]?.sProductId
    },
    noGetData: !selectedRowKeys.length
  };

  const getBtnProps = btnConfig => {
    const { sFontColor } = btnConfig;

    const style = sFontColor
      ? { backgroundColor: sFontColor, borderColor: sFontColor }
      : {};
    return {
      type: "primary",
      size: "large",
      style: { width: 80, ...style },
      disabled: props.onGetBtnStatus(tableName, btnConfig),
      onClick: async () => {
        if (!props.onGetBtnContinue()) return;
        const { sActiveId, sButtonParam, sInstruct } = btnConfig;
        // 调用指令集
        if (sInstruct) {
          await props.awaitPromiseReturn();
          props.onExecInstructSet({
            ...props,
            btnConfig,
            tableLineParams: {
              name: "wytable0",
              record: viewRow,
              index: data.findIndex(item => item.sId === viewRow.sId)
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }
      }
    };
  };

  const rightFormBtn0List = new Array(10).fill(<div />);
  const btnsLeftList = config.gdsconfigformslave.filter(
    item =>
      item.bVisible &&
      item.sControlName &&
      item.sControlName.includes("BtnLeft1.")
  );

  const leftMap = [0, 5, 1, 6];
  btnsLeftList.forEach((item, index) => {
    rightFormBtn0List[leftMap[index]] = (
      <div>
        <Button {...getBtnProps(item)}>{item.showName}</Button>
      </div>
    );
  });

  const rightMap = [4, 9, 3, 8];
  const btnsRightList = config.gdsconfigformslave.filter(
    item =>
      item.bVisible &&
      item.sControlName &&
      item.sControlName.includes("BtnRight1.")
  );

  btnsRightList.forEach((item, index) => {
    rightFormBtn0List[rightMap[index]] = (
      <div>
        <Button {...getBtnProps(item)}>{item.showName}</Button>
      </div>
    );
  });
  const tabRef = useRef();
  const changeTab = index => {
    if (!tabRef.current) return;
    const oNavList = tabRef.current.querySelector(".ant-tabs-nav-list");
    if (!oNavList) return;
    oNavList.childNodes[index].click();
  };
  const MCR = commonFunc.showLocalMessage(props, 'MCR', '物料消耗登记');
  const PMCR = commonFunc.showLocalMessage(props, 'PMCR', '版材消耗登记');
  return (
    <div className={styles.type1}>
      <div className="topPart">
        <div className="type1Content">
          <div className="leftTable">
            <StaticEditTable {...tableProps} />
          </div>
          <div className="rightForm">
            <CommonViewTable className="rightFormBox" {...viewProps} />
            <div className="rightFormBtn0">
              {rightFormBtn0List.map(item => item)}
            </div>
            <div className="rightFormBtn">
              <div className="rightFormBtnFoot pagesNuxt">
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "up")}
                  icon={<LeftOutlined />}
                  {...btnProps}
                />
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "next")}
                  icon={<RightOutlined />}
                  {...btnProps}
                />
                {[""].map(() => {
                  const sControlName = "BtnRight1.BtnPrint4";
                  const btnConfig = config.gdsconfigformslave.find(
                    item => item.sControlName === sControlName
                  );
                  if (!btnConfig) return "";

                  return (
                    <Button
                      {...btnProps}
                      {...getBtnProps(btnConfig)}
                      className={`${styles.print4} print4`}
                    >
                      {btnConfig.showName}
                    </Button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="btns">
          <CommonOperationBarComponent {...operationBarProps} />
        </div>
      </div>
      <div className="bottomPart">
        <div className="commonModel" ref={tabRef}>
          <CommonModelComponent {...commonModelProps} />
        </div>
        <div className="btnPart">
          <Space>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 0)}
            >
              {MCR}
            </Button>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 2)}
            >
              {PMCR}
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

// 类型2-凹印挑规
const ProductionExecContent2 = props => {
  const tableName = "wytgtable0";
  const tableTypes = commonBusiness.getTableTypes(tableName, props);
  const {
    config: configOld = {},
    data = [],
    selectedRowKeys = [],
    name
  } = tableTypes;
  const config = props.onMergeTableConfig(configOld);
  const sIdGroupStr = data.map(item => item.sId).toString();

  const timer = useRef(null);
  useEffect(
    () => {
      if (!data.length) return;
      // 让第一条选中
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        props.onSaveState({
          [`${tableName}SelectedRowKeys`]: [data[0].sId]
        });
      }, 200);
    },
    [sIdGroupStr]
  );

  const tableProps = {
    ...tableTypes,
    footer: "hidden", // 合计栏
    tableProps: {}
  };

  const viewConfigs = config.gdsconfigformslave
    .filter(item => item.bControl && item.sControlName.indexOf("Btn") === -1)
    // .filter((_, index) => index < 8)
    .map(item => ({
      ...item,
      iColValue: 24
    }));

  const viewRow =
    (selectedRowKeys[0]
      ? data.find(item => item.sId === selectedRowKeys[0])
      : data[0]) || {};

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: name,
    enabled: commonUtils.isNotEmptyObject(viewRow),
    onCostomChange: (name, showConfig) => {
      if (commonUtils.isNotEmptyObject(viewRow)) {
        const { sControlName = "" } = showConfig;
        const sName = sControlName.split(".")[1];
        if (sName === "sPosition") {
          const value = viewRow[sName];
          props.onSaveState({
            positionValue: value,
            positionModalVisible: true
          });
        }
      }
    }
  };

  const btnProps = {
    type: "primary",
    size: "large",
    style: { width: 80 }
  };

  const operationBarProps = {
    ...props,
    sName: name,
    bCostom: true,
    onRefresh: props.onRefresh // 刷新页面
  };

  const btnTableList = [
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    // "plateInfo",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const { workOrderInfoData = [] } = props;
  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    hideTabList: ["plateInfo"],
    sFilterConditions: {
      sId: selectedRowKeys[0],
      sSrcSlaveId: workOrderInfoData[0]?.sWorkOrderId,
      sProductId: workOrderInfoData[0]?.sProductId
    },
    noGetData: !selectedRowKeys.length
  };

  const getBtnProps = btnConfig => {
    const { sFontColor } = btnConfig;

    const style = sFontColor
      ? { backgroundColor: sFontColor, borderColor: sFontColor }
      : {};
    return {
      type: "primary",
      size: "large",
      style: { width: 80, ...style },
      disabled: props.onGetBtnStatus(tableName, btnConfig),
      onClick: () => {
        if (!props.onGetBtnContinue()) return;
        const { sActiveId, sButtonParam, sInstruct } = btnConfig;
        // 调用指令集
        if (sInstruct) {
          props.onExecInstructSet({
            ...props,
            btnConfig,
            tableLineParams: {
              name: "wytgtable0",
              record: viewRow,
              index: data.findIndex(item => item.sId === viewRow.sId)
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }
      }
    };
  };

  const rightFormBtn0List = new Array(10).fill(<div />);
  const btnsLeftList = config.gdsconfigformslave.filter(
    item =>
      item.bVisible &&
      item.sControlName &&
      item.sControlName.includes("BtnLeft1.")
  );

  const leftMap = [0, 5, 1, 6];
  btnsLeftList.forEach((item, index) => {
    rightFormBtn0List[leftMap[index]] = (
      <div>
        <Button {...getBtnProps(item)}>{item.showName}</Button>
      </div>
    );
  });

  const rightMap = [4, 9, 3, 8];
  const btnsRightList = config.gdsconfigformslave.filter(
    item =>
      item.bVisible &&
      item.sControlName &&
      item.sControlName.includes("BtnRight1.")
  );

  btnsRightList.forEach((item, index) => {
    rightFormBtn0List[rightMap[index]] = (
      <div>
        <Button {...getBtnProps(item)}>{item.showName}</Button>
      </div>
    );
  });
  const tabRef = useRef();
  const changeTab = index => {
    if (!tabRef.current) return;
    const oNavList = tabRef.current.querySelector(".ant-tabs-nav-list");
    if (!oNavList) return;
    oNavList.childNodes[index].click();
  };

  return (
    <div className={styles.type1}>
      <div className="topPart">
        <div className="type1Content">
          <div className="leftTable">
            <StaticEditTable {...tableProps} />
          </div>
          <div className="rightForm">
            <CommonViewTable className="rightFormBox" {...viewProps} />
            <div className="rightFormBtn0">
              {rightFormBtn0List.map(item => item)}
            </div>
            <div className="rightFormBtn">
              <div className="rightFormBtnFoot pagesNuxt">
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "up")}
                  icon={<LeftOutlined />}
                  {...btnProps}
                />
                <Button
                  onClick={() => props.onPagesNuxt(tableName, "next")}
                  icon={<RightOutlined />}
                  {...btnProps}
                />
                {[""].map(() => {
                  const sControlName = "BtnRight1.BtnPrint4";
                  const btnConfig = config.gdsconfigformslave.find(
                    item => item.sControlName === sControlName
                  );
                  if (!btnConfig) return "";

                  return (
                    <Button
                      {...btnProps}
                      {...getBtnProps(btnConfig)}
                      className={`${styles.print4} print4`}
                    >
                      {btnConfig.showName}
                    </Button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="btns">
          <CommonOperationBarComponent {...operationBarProps} />
        </div>
      </div>
      <div className="bottomPart">
        <div className="commonModel" ref={tabRef}>
          <CommonModelComponent {...commonModelProps} />
        </div>
        <div className="btnPart">
          <Space>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 0)}
            >
              物料消耗登记
            </Button>
            <Button
              type="primary"
              size="large"
              onClick={changeTab.bind(this, 2)}
            >
              版材消耗登记
            </Button>
          </Space>
        </div>
      </div>
      <PositionComponent {...props} />
    </div>
  );
};

// 类型3-凹印分切
const ProductionExecContent3 = props => {
  const btnTableList = ["slaveWyfq1", "slaveWyfq2", "jpfpbtable0"];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const formDataNew1 = cloneDeep(formDataNew);
  formDataNew1.forEach(item => {
    if (item.sGrd === "slaveWyfq2") {
      new Array(5).fill("").map((_, index) => {
        item.gdsconfigformslave.push({
          sId: commonUtils.createSid(),
          sName: `sWt${index + 1}`,
          sControlName: `sWt${index + 1}`,
          showName: `描述${index + 1}`
        });
      });
    }
  });

  const [currentStep, setCurrentStep] = useState(1);
  const [currentSelectedStep, setCurrentSelectedStep] = useState(1);
  const { slaveWyfq2Data = [], slaveWyfq2SelectedRowkeys = [] } = props;

  // 根据数据判断当前轮数
  useEffect(
    () => {
      if (!slaveWyfq2Data.length) {
        setCurrentStep(1);
        return;
      }

      const iRoundList = slaveWyfq2Data.map(item => item.iRound);
      const iRoundMax = Math.max(...iRoundList);
      setCurrentStep(iRoundMax);
    },
    [JSON.stringify(slaveWyfq2Data)]
  );

  useEffect(
    () => {
      setCurrentSelectedStep(currentStep);
    },
    [currentStep]
  );

  // 根据sWt1-5组成sWasteType
  // useEffect(() => {
  //   if (!slaveWyfq2Data.length) return;

  // }, [JSON.stringify(slaveWyfq2Data)])

  const costomTitle = (
    <div className={styles.stepState}>
      {new Array(8).fill("").map((_, index) => {
        const filterData = slaveWyfq2Data.filter(
          item => item.iRound === index + 1
        );
        const bXialiao = filterData?.[0]?.iJobStatus === 3;
        return (
          <div
            className={`${
              index < currentStep - 1
                ? styles.stepState1
                : index === currentStep - 1
                  ? bXialiao
                    ? styles.stepState1
                    : styles.stepState2
                  : ""
            } ${
              currentSelectedStep === index + 1 ? styles.stepStateUnderline : ""
            } `}
            onClick={() => {
              if (index <= currentStep - 1) {
                setCurrentSelectedStep(index + 1);
              }
            }}
          >
            第{index + 1}轮
          </div>
        );
      })}
    </div>
  );

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew1,
    costomTitle: costomTitle,
    onFilterData: (tableName, tableData) => {
      if (tableName === "slaveWyfq2") {
        return tableData.filter(item => item.iRound === currentSelectedStep);
      } else {
        return tableData;
      }
    },
    currentSelectedStep
    // onTableEnabled: tableName => {
    //   if (tableName === "slaveWyfq2") {
    //     return currentStep === currentSelectedStep;
    //   } else {
    //     return undefined;
    //   }
    // }
  };

  return <CommonModelComponent {...commonModelProps} />;
};

// 类型4-剔废
const ProductionExecContent4 = props => {
  const btnTableList = ["slaveWytf1", "slaveWytf2", "jpfpbtable0"];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const { [`${btnTableList[0]}Data`]: data = [] } = props;
  const sIdGroupStr = data.map(item => item.sId).toString();

  const timer = useRef(null);
  useEffect(
    () => {
      if (!data.length) return;
      // 让第一条选中
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        props.onSaveState({
          [`${btnTableList[0]}SelectedRowKeys`]: [data[0].sId]
        });
      }, 200);
    },
    [sIdGroupStr]
  );

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew
  };

  return <CommonModelComponent {...commonModelProps} />;
};

// 类型5-拼接
const ProductionExecContent5 = props => {
  const btnTableList = [
    "slaveWypj1",
    "slaveWypj2",
    "slaveWypj3",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew
  };

  return <CommonModelComponent {...commonModelProps} />;
};

// 类型6-倒卷
const ProductionExecContent6 = props => {
  const btnTableList = ["slaveWydj", "jpfpbtable0"];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew
  };

  return <CommonModelComponent {...commonModelProps} />;
};

// 类型7-读码
const ProductionExecContent7 = props => {
  const btnTableList = [
    "salveWydm1",
    "salveWydm2",
    "salveWydm3",
    "salveWydm4",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const [bllbVisible, setBllbVisible] = useState(false);

  let bllbModalProps = {
    ...props,
    bllbVisible,
    setBllbVisible,
    record: props.salveWydm2Data?.[0],
    sFieldName: "dLittleReportQty"
  };

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    onBllbClick: () => {
      if (props.salveWydm2Data?.length) {
        props.onGetBllbData(props.salveWydm2Data[0].sId, () => {
          setBllbVisible(true);
        });
      }
    }
  };

  return (
    <div className={styles.wydmContent}>
      <CommonModelComponent {...commonModelProps} />
      <BllbModalComponent {...bllbModalProps} />
    </div>
  );
};

// 类型8-品检
const ProductionExecContent8 = props => {
  const btnTableList = [
    "slaveWyrj1",
    "slaveWyrj2",
    "slaveWyrj3",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const {
    slaveWyrj2SelectedRowKeys = [],
    slaveWyrj2Data = [],
    slaveWyrj2Config: config = {}
  } = props;
  const iIndex = slaveWyrj2Data.findIndex(
    item => item.sId === slaveWyrj2SelectedRowKeys[0]
  );
  const viewRow = iIndex !== -1 ? slaveWyrj2Data[iIndex] : {};

  const getBtnConfigByControlName = sControlName => {
    if (!config.gdsconfigformslave) return {};
    const btnConfig =
      config.gdsconfigformslave.find(
        item => item.sControlName === sControlName
      ) || {};
    return {
      ...btnConfig,
      disabled: props.onGetBtnStatus("slaveWyrj2", btnConfig),
      onClick: async () => {
        if (!props.onGetBtnContinue()) return;
        await props.awaitPromiseReturn();
        const { sButtonParam, sInstruct } = btnConfig;
        // 调用指令集
        if (sInstruct) {
          props.onExecInstructSet({
            ...props,
            btnConfig,
            tableLineParams: {
              name: "slaveWyrj2",
              record: viewRow,
              index: iIndex
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }
      }
    };
  };

  // const getBtnProps = (sName, color) => {
  //   const style = color
  //     ? {
  //         backgroundColor: color,
  //         borderColor: color
  //       }
  //     : {};

  //   const extraProps = sName ? getBtnConfigByControlName(sName) : {};

  //   return {
  //     type: "primary",
  //     size: "large",
  //     style: {
  //       ...style,
  //       width: 75,
  //       paddingLeft: 0,
  //       paddingRight: 0
  //     },
  //     ...extraProps
  //   };
  // };

  const [bllbVisible, setBllbVisible] = useState(false);

  let bllbModalProps = {
    ...props,
    bllbVisible,
    setBllbVisible,
    record: props.slaveWyrj2Data?.[0]
  };

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    // costomFormOperationBar: (
    //   <div className="slaveWyrj btnContent">
    //     <div>
    //       <Button
    //         {...getBtnProps()}
    //         icon={<LeftOutlined />}
    //         style={{
    //           borderColor: "#eee",
    //           background: "#eee",
    //           color: "#999",
    //           borderRadius: 5
    //         }}
    //         onClick={() => {
    //           props.onPagesNuxt("slaveWyrj2", "up");
    //         }}
    //       />
    //     </div>
    //     <div />
    //     <div>
    //       <Button {...getBtnProps("BtnLeft1.BtnEventBlanking")}>下料</Button>
    //     </div>
    //     <div>
    //       <Button {...getBtnProps("BtnRight1.BtnPrint1")}>产量①</Button>
    //     </div>
    //     <div>
    //       <Button {...getBtnProps("BtnRight1.BtnPrint2")}>产品②</Button>
    //     </div>
    //     <div>
    //       <Button
    //         {...getBtnProps()}
    //         icon={<RightOutlined />}
    //         style={{
    //           borderColor: "#eee",
    //           background: "#eee",
    //           color: "#999",
    //           borderRadius: 5
    //         }}
    //         onClick={() => {
    //           props.onPagesNuxt("slaveWyrj2", "next");
    //         }}
    //       />
    //     </div>
    //     <div />
    //     <div>
    //       <Button {...getBtnProps("BtnRight1.BtnPrint3")}>产量+产品</Button>
    //     </div>
    //     <div>
    //       <Button {...getBtnProps("BtnRight1.BtnPrint4")}>OQC标签③</Button>
    //     </div>
    //     <div>
    //       {/* <Button {...getBtnProps("BtnRight1.BtnCancel", "#faad14")}>
    //         撤销
    //       </Button> */}
    //     </div>
    //   </div>
    // )
    onBllbClick: () => {
      if (props.slaveWyrj2Data?.length) {
        props.onGetBllbData(props.slaveWyrj2Data[0].sId, () => {
          setBllbVisible(true);
        });
      }
    }
  };

  return (
    <div className={styles.wyrjConent}>
      <CommonModelComponent {...commonModelProps} />
      <BllbModalComponent {...bllbModalProps} />
    </div>
  );
};

// 类型9-包装
const ProductionExecContent9 = props => {
  const btnTableList = [
    "salveWybz1",
    "salveWybz2",
    "salveWybz3",
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    "jpfpbtable0"
  ];
  const formDataNew = props.formData.filter(
    item => item.sGrd && btnTableList.includes(item.sGrd)
  );

  const [bllbVisible, setBllbVisible] = useState(false);

  let bllbModalProps = {
    ...props,
    bllbVisible,
    setBllbVisible,
    record: props.salveWybz2Data?.[0]
  };

  const commonModelProps = {
    ...props,
    costomModal: true,
    formData: formDataNew,
    onBllbClick: () => {
      if (props.salveWybz2Data?.length) {
        props.onGetBllbData(props.salveWybz2Data[0].sId, () => {
          setBllbVisible(true);
        });
      }
    }
  };

  return (
    <div className={styles.wybzContent}>
      <CommonModelComponent {...commonModelProps} />
      <BllbModalComponent {...bllbModalProps} />
    </div>
  );
};

// 成品不良类比弹窗
const BllbModalComponent = props => {
  const { bllbVisible, setBllbVisible } = props;
  if (!bllbVisible) return "";

  const {
    bllbtable0Config = {},
    bllbtable0Data = [],
    record,
    refreshTime,
    sFieldName = "dReportQty"
  } = props;
  const { [sFieldName]: dReportQtyOld = 0, sId: sParentId } = record;
  const dReportQty = dReportQtyOld; // Number((dReportQtyOld).toFixed(4));
  const [restQty, setRestQty] = useState(dReportQty);
  const [bllbConfig, setBllbConfig] = useState([]);
  const [options, setOptions] = useState([]);
  const [optionsList, setOptionsList] = useState([]);
  const [data, setData] = useState(bllbtable0Data);
  const [delData, setDelData] = useState([]);
  useEffect(() => {
    if (!data.length) {
      setData([
        {
          sId: commonUtils.createSid(),
          sParentId,
          handleType: "add",
          bMesNew: true
        }
      ]);
    }
  }, []);
  useEffect(
    async () => {
      const { gdsconfigformslave = [] } = bllbtable0Config;
      if (gdsconfigformslave.length) {
        const bllbConfigTemp = gdsconfigformslave.filter(item => item.bVisible);
        setBllbConfig(bllbConfigTemp);
        const bldlOptions = await props.getSqlDropDownData(
          "",
          "bldl",
          bllbConfigTemp.find(item => item.sName === "sType"),
          {},
          ""
        );
        setOptions(bldlOptions.dropDownData);
      }
    },
    [JSON.stringify(bllbtable0Config)]
  );
  useEffect(
    () => {
      if (!data.length) return;
      const MaxDecimal = [dReportQty, ...data.map(item => item.dQty)].reduce(
        (pre, cur) => {
          const str = (cur || 0).toString();
          const num = str.split(".")[1] || "";
          return Math.max(num.length, pre);
        },
        0
      );

      const totalQty = data.reduce((pre, cur) => {
        return pre + (Number(cur.dQty) || 0);
      }, 0);

      let restQtyNew = (dReportQty - totalQty).toFixed(MaxDecimal);

      const dataTemp = [...data];
      if (totalQty >= dReportQty) {
        const iIndex = data.findIndex(item => item.bLastChanged);
        if (iIndex !== -1) {
          const dataNew = data.filter((_, index) => index !== iIndex);
          const totalQtyNew = dataNew.reduce((pre, cur) => {
            return pre + (Number(cur.dQty) || 0);
          }, 0);

          const MaxDecimalNew = [
            dReportQty,
            ...dataNew.map(item => item.dQty)
          ].reduce((pre, cur) => {
            const str = (cur || 0).toString();
            const num = str.split(".")[1] || "";
            return Math.max(num.length, pre);
          }, 0);

          dataTemp[iIndex].dQty = (dReportQty - totalQtyNew).toFixed(
            MaxDecimalNew
          );
          restQtyNew = 0;
        }
      }
      dataTemp.forEach(item => {
        delete item.bLastChanged;
      });

      setData(dataTemp);
      setRestQty(restQtyNew);
    },
    [refreshTime]
  );
  const defectcategory = commonFunc.showLocalMessage(props, 'defectcategory', '成品不良类别');

  const majorCategory = commonFunc.showLocalMessage(props, 'majorCategory', '不良大类');
  const defectiveSubcategory = commonFunc.showLocalMessage(props, 'defectiveSubcategory', '不良小类');

  const btnCancel = commonFunc.showLocalMessage(props, 'BtnCancel', '取消');
  const btnSure = commonFunc.showLocalMessage(props, 'BtnSure', '确定');
  const qualified = commonFunc.showLocalMessage(props, 'qualified', '确定');
  const OKQualified = commonFunc.showLocalMessage(props, 'OKQualified', '确定');
  const piece = commonFunc.showLocalMessage(props, 'piece', 'Piece') || 'Piece';



  const onOk = () => {
    props.onExecInstructSet({
      btnConfig: {
        sInstruct: JSON.stringify([
          {
            opr: "save",
            doNotRefresh: true,
            data: [
              {
                tablename: "mftpitBadEntry",
                srcDataset: "bblb"
              }
            ]
          }
        ]),
        showName: btnSure
      },
      nextProps: {
        bblbData: data.map(item => ({ ...item, dQty: Number(item.dQty) })),
        bblbDelData: delData,
        bblbConfig: bllbtable0Config
      },
      callback: () => {
        setBllbVisible(false);
      }
    });
  };

  return (
    <Modal
      title={defectcategory}
      className="mesCommonModal"
      width={600}
      height={480}
      visible={bllbVisible}
      onCancel={() => setBllbVisible(false)}
      footer={
        <Space>
          <Button size="large" onClick={() => setBllbVisible(false)}>
            {btnCancel}
          </Button>
          <Button type="primary" size="large" onClick={onOk}>
            {btnSure}
          </Button>
        </Space>
      }
    >
      <div className={styles.bllb}>
        <Row className="bllbRow">
          <Col flex={"40px"}>
            <div className="redDot" />
          </Col>
          <Col flex={"160px"}>{OKQualified}</Col>
          <Col flex={"160px"}>{qualified}</Col>
          <Col flex={1}>
            <Input size="large" value={restQty} disabled />
          </Col>
          <Col flex={"50px"}>Piece</Col>
        </Row>
        {data.map((rowData, index) => {
          const { sId: lineId } = rowData;
          const oBtnPlus = (
            <Button
              className={styles.mesAdd}
              type="link"
              size="large"
              icon={<PlusOutlined />}
              onClick={() => {
                setData(pre => [
                  ...pre,
                  {
                    sId: commonUtils.createSid(),
                    bMesNew: true,
                    handleType: "add",
                    sParentId
                  }
                ]);
              }}
            />
          );

          const oBtnMinus = (
            <Button
              className={styles.mesDel}
              type="link"
              size="large"
              icon={<MinusOutlined />}
              onClick={() => {
                const delDataTemp = data
                  .filter(item => item.sId === lineId && !item.bMesNew)
                  .map(item => ({ ...item, handleType: "del" }));
                setData(pre => pre.filter(item => item.sId !== lineId));
                setDelData(pre => [...pre, ...delDataTemp]);
              }}
            />
          );

          return (
            <Row className="bllbRow" key={`bllbRow_${lineId}`}>
              <Col flex={"40px"}>{index === 0 ? oBtnPlus : oBtnMinus}</Col>
              <Col flex={"160px"} style={{ maxWidth: "160px" }}>
                <Select
                  showSearch
                  placeholder={majorCategory}
                  border={false}
                  size="large"
                  style={{ width: "100%" }}
                  fieldNames={{
                    label: "sBadproductName",
                    value: "sBadproductName"
                  }}
                  options={options}
                  value={rowData.sType}
                  onChange={async value => {
                    const blxlOptions = await props.getSqlDropDownData(
                      "",
                      "blxl",
                      bllbConfig.find(item => item.sName === "sSubclass"),
                      {
                        conditonValues: {
                          sClassId: options.find(
                            i => i.sBadproductName === value
                          )?.sId
                        }
                      },
                      ""
                    );
                    setData(pre => {
                      pre[index].sType = value;
                      pre[index].sSubclass = undefined;
                      pre[index].handleType = pre[index].handleType || "update";
                      return pre;
                    });
                    setOptionsList(pre => {
                      const iIndex = pre.findIndex(item => item.sId === lineId);
                      if (iIndex !== -1) {
                        pre[iIndex].options = blxlOptions.dropDownData;
                        pre[iIndex].sType = value;
                      } else {
                        pre.push({
                          sId: lineId,
                          sType: value,
                          options: blxlOptions.dropDownData
                        });
                      }
                      return pre;
                    });
                    props.onSaveState({ refreshTime: new Date().getTime() });
                  }}
                />
              </Col>
              <Col flex={"160px"} style={{ maxWidth: "160px" }}>
                <Select
                  showSearch
                  placeholder={defectiveSubcategory}
                  border={false}
                  size="large"
                  style={{ width: "100%" }}
                  fieldNames={{
                    label: "sClassifyName",
                    value: "sClassifyName"
                  }}
                  options={(() => {
                    const temp = optionsList.find(item => item.sId === lineId);
                    if (!temp || !temp.options) return [];

                    const { sType } = temp;
                    const selectedList = data
                      .filter(
                        item => item.sType === sType && item.sId !== rowData.sId
                      )
                      .map(item => item.sSubclass);

                    const result = temp.options.filter(
                      item => !selectedList.includes(item.sClassifyName)
                    );
                    return result;
                  })()}
                  value={rowData.sSubclass}
                  onChange={value => {
                    setData(pre => {
                      pre[index].sSubclass = value;
                      pre[index].handleType = pre[index].handleType || "update";
                      return pre;
                    });
                    props.onSaveState({ refreshTime: new Date().getTime() });
                  }}
                  onFocus={async () => {
                    const temp = optionsList.find(item => item.sId === lineId);
                    if (temp) return;
                    const blxlOptions = await props.getSqlDropDownData(
                      "",
                      "blxl",
                      bllbConfig.find(item => item.sName === "sSubclass"),
                      {
                        conditonValues: {
                          sClassId: options.find(
                            i => i.sBadproductName === rowData.sType
                          )?.sId
                        }
                      },
                      ""
                    );
                    setOptionsList(pre => {
                      pre.push({
                        sId: lineId,
                        sType: rowData.sType,
                        options: blxlOptions.dropDownData
                      });
                      return pre;
                    });
                    props.onSaveState({ refreshTime: new Date().getTime() });
                  }}
                />
              </Col>
              <Col flex={1}>
                <Input
                  size="large"
                  value={rowData.dQty}
                  onChange={event => {
                    const { value } = event.target;
                    const regex = /^-?\d*\.?\d*$/;
                    if (!regex.test(value) && value !== "") return;

                    setData(pre => {
                      pre[index].dQty = value;
                      pre[index].bLastChanged = true;
                      pre[index].handleType = pre[index].handleType || "update";
                      return pre;
                    });
                    props.onSaveState({ refreshTime: new Date().getTime() });
                  }}
                />
              </Col>
              <Col flex={"50px"}>Piece</Col>
            </Row>
          );
        })}
      </div>
    </Modal>
  );
};

// 凹印挑规针位弹窗选择
const PositionComponent = props => {
  const { positionValue, positionModalVisible } = props;
  if (!positionModalVisible) return "";

  const [data, setData] = useState([]);

  useEffect(() => {
    const arr = positionValue.replace("，", /,/g).split(",");
    const tempData = [];
    arr.forEach(item => {
      const numbers = item.match(/\d+/g); // 提取所有数字
      const result = numbers?.map(Number); // 转换为数值
      if (result?.length === 3) {
        tempData.push(result);
      }
    });

    const dataLength = tempData.length;
    if (dataLength < 10) {
      for (let i = 0; i < 10 - dataLength; i++) {
        tempData.push([undefined, undefined, undefined]);
      }
    }
    setData(tempData);
  }, []);

  const onCancel = () => {
    props.onSaveState({
      positionValue: undefined,
      positionModalVisible: false
    });
  };

  const onOk = () => {
    const tableName = "wytgtable0";
    const {
      [`${tableName}Data`]: tableData = [],
      [`${tableName}SelectedRowKeys`]: selectedRowKeys = []
    } = props;
    const iIndex = tableData.findIndex(item => item.sId === selectedRowKeys[0]);
    const result = data
      .filter(
        item =>
          item[0] !== undefined &&
          item[1] !== undefined &&
          item[2] !== undefined &&
          item[0] !== "" &&
          item[1] !== "" &&
          item[2] !== ""
      )
      .map(item => `前${item[0]}-${item[1]}侧${item[2]}`)
      .toString();

    tableData[iIndex].sPosition = result;
    tableData[iIndex].handleType = "update";

    props.onExecInstructSet({
      nextProps: { ...props, [`${tableName}Data`]: tableData },
      btnConfig: {
        showName: "保存",
        sInstruct: JSON.stringify([
          {
            opr: "save",
            data: [
              {
                tablename: "plc_machinedate_tray",
                srcDataset: tableName
              }
            ]
          }
        ])
      },
      callback: () => {
        onCancel();
      }
    });
  };

  const options = new Array(10).fill("").map((_, index) => {
    return {
      label: index + 1,
      value: index + 1
    };
  });

  const getSelectComponent = (index, iIndex) => {
    const value = data[index]?.[iIndex];

    return (
      <Select
        showSearch
        allowClear
        border={false}
        size="large"
        style={{ width: "100%" }}
        options={options}
        value={value}
        onChange={value => {
          const dataNew = cloneDeep(data);
          dataNew[index][iIndex] = value;
          setData(dataNew);
        }}
      />
    );
  };

  const getNumber = number => {
    const json = {
      1: "①",
      2: "②",
      3: "③",
      4: "④",
      5: "⑤",
      6: "⑥",
      7: "⑦",
      8: "⑧",
      9: "⑨",
      10: "⑩"
    };
    if (number) {
      return json[number];
    }
  };

  return (
    <Modal
      title="针位选择"
      className="mesCommonModal"
      width={600}
      visible={positionModalVisible}
      onCancel={onCancel}
      footer={
        <Space>
          <Button size="large" onClick={() => onCancel()}>
            取消
          </Button>
          <Button type="primary" size="large" onClick={onOk}>
            确定
          </Button>
        </Space>
      }
    >
      <div className={styles.wyzwSelect}>
        {["", "", "", "", "", "", "", "", "", ""].map((_, index) => {
          return (
            <div key={index} className="wyzwSelectItem">
              <div className="rowNum">{getNumber(index + 1)}</div>
              <div className="numberSplit">前</div>
              <div className="numberSelect">{getSelectComponent(index, 0)}</div>
              <div className="numberSplit">-</div>
              <div className="numberSelect">{getSelectComponent(index, 1)}</div>
              <div className="numberSplit">侧</div>
              <div className="numberSelect">{getSelectComponent(index, 2)}</div>
              <div className="numberSplit">
                <Button
                  className={styles.mesDel}
                  type="primary"
                  size="large"
                  icon={<MinusOutlined />}
                  onClick={() => {
                    const dataNew = cloneDeep(data);
                    dataNew[index] = [undefined, undefined, undefined];
                    setData(dataNew);
                  }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </Modal>
  );
};

export default ProductionExecMain;