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" }, // 凹印挑规生产执行
  { sName: "zztable0", sGrd: "zztable0" }
];

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 = 1;
  // 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);

      listFilter.push({ sName: "zztable0", sGrd: "zztable0" });

      // 页面表明和配置表名对应关系
      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);
  const [sStatusNew, setStatusNew] = useState(undefined);

  useEffect(() => {
    const getValue = () => {
      const changeExecInfo = commonUtils.getAppData("changeExecInfo");
      setStatusNew(changeExecInfo.sStatus);

      const refreshExecInfo = commonUtils.getAppData("refreshExecInfo");
      if (refreshExecInfo.dReplyPalletERp === 1) {
        commonUtils.setAppData("refreshExecInfo", {
          ...refreshExecInfo,
          dReplyPalletERp: 0
        });
        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}
            sStatusNew={sStatusNew}
          />
        )}
      </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,
    sStatusNew
  } = props;

  /**
   * 设备状态值
   */
  const sStatusNameProcess = useMemo(
    () => {
      // if (
      //   !Array.isArray(deviceTargetInfoData) ||
      //   !deviceTargetInfoData[0] ||
      //   !deviceTargetInfoData[0]?.sStatus
      // )
      //   return;
      const viewRow = deviceTargetInfoData[0] || {};
      if (sStatusNew) {
        viewRow.sStatus = sStatusNew;
      }
      const sStatusNameValue = viewRow.sStatus?.includes("adjustment") ? 0 : 1;

      const showValue = {
        stop: {
          showName: "调机结束",
          onClick: config =>
            operationFetch(props, config, undefined, () => {
              setPagesLoading(false);
              props.onChangeRouter({
                type: "name",
                path: ["生产执行", "质量检验"]
              });
            })
        },
        again: {
          showName: "调机开始",
          onClick: config =>
            operationFetch(props, config, "again", () => {
              setPagesLoading(false);
            })
        }
      };

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

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

  props = { ...props, sStatusNameProcess };

  const { iInterface } = props;
  if (iInterface === undefined) {
    message.warning("未获取到iInterface字段！");
    return "";
  }
  const type0 = 
    props.workOrderInfoData?.[0]?.bZZ
      ? "type10"
      : "type0";
  // const type0 =
  //   window.execTest && productionExecType
  //     ? productionExecType
  //     : `type${iInterface === 0 ? "" : iInterface - 1}`;

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

  const content = {
    type0: <ProductionExecContent0 {...props} key={type} />,
    type10: <ProductionExecContent10 {...props} key={type} />
  };

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

// 胶印
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 => {
      const addState = {};
      if (item.sName === "dReportQty") {
        if (
          props.workOrderInfoData?.[0]?.sProcessName?.includes("切纸") ||
          props.workOrderInfoData?.[0]?.sProcessName?.includes("胶印") ||
          props.workOrderInfoData?.[0]?.sProcessName === "大切张F"
        ) {
          addState.showName = `${item.showName}(张)`;
        } else if (
          ["大模压F", "UV模压F", "蒸镀F", "大分条F", "贴合F"].includes(
            props.workOrderInfoData?.[0]?.sProcessName
          )
        ) {
          addState.showName = `${item.showName}(米)`;
        } else {
          addState.showName = `${item.showName}(个)`;
        }
      }

      return {
        ...item,
        ...addState,
        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: "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;
        }

        props.onTableBtnClick({
          name: tableName,
          record: viewRow,
          config: btnConfig
        });
      }
    };
  };

  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 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")}
                  >
                    下料
                  </Button>
                </Space>
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnScrapDesc")}
                    style={{ width: 112 }}
                  >
                    废品登记
                  </Button>

                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint2")}
                    style={{ display: "none" }}
                  >
                    下料
                  </Button>
                  {/* <Button {...btnProps}>产品②</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFloor">
                <Space className="leftPart">
                  <Button
                    className="abnormalBtn"
                    style={{ "border-color": "#faad14", background: "#faad14" }}
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnCancel")}
                  >
                    撤销
                  </Button>
                </Space>
                <Space className="rightPart">
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint3")}
                    style={{ display: "none" }}
                  >
                    异常③
                  </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`}
                      // style={{display: 'none'}}
                    >
                      打印标条
                      {/* {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>
    </div>
  );
};

// 成品组装
const ProductionExecContent10 = props => {
  const tableName = "zztable0";
  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)
    .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: tableName,
              record: viewRow,
              index: data.findIndex(item => item.sId === viewRow.sId)
            }
          });
          return;
        }
        // 调用存储过程
        if (sButtonParam) {
          props.onProcedureCall({
            btnConfig,
            onSuccess: () => {
              props.onRefresh && props.onRefresh();
            },
            onConfirm: () => {},
            onError: () => {}
          });
          return;
        }

        props.onTableBtnClick({
          name: tableName,
          record: viewRow,
          config: btnConfig
        });
      }
    };
  };

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

  const btnTableList = [
    "palletBatchMaterial",
    "workerOrderBatchMaterial",
    "assembletray"
  ];
  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
  };

  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")}
                  >
                    下料
                  </Button>
                </Space>
                <Space>
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnScrapDesc")}
                    style={{ width: 112, display: "block" }}
                  >
                    废品登记
                  </Button>

                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint2")}
                    style={{ display: "none" }}
                  >
                    下料
                  </Button>
                  {/* <Button {...btnProps}>产品②</Button> */}
                </Space>
              </div>
              <div className="rightFormBtnFloor">
                <Space className="leftPart">
                  <Button
                    className="abnormalBtn"
                    style={{ "border-color": "#faad14", background: "#faad14" }}
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnCancel")}
                  >
                    撤销
                  </Button>
                </Space>
                <Space className="rightPart">
                  <Button
                    {...btnProps}
                    {...getBtnConfigByControlName("BtnPrint3")}
                    style={{ display: "none" }}
                  >
                    异常③
                  </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`}
                      // style={{display: 'none'}}
                    >
                      打印标条
                      {/* {btnConfig.showName} */}
                    </Button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        <div className="btns">
          <CommonOperationBarComponent {...operationBarProps} />
        </div>
      </div>
      <div className="bottomPart">
        <div className="commonModel commonModel1">
          <CommonModelComponent {...commonModelProps} />
        </div>
      </div>
    </div>
  );
};

export default ProductionExecMain;