/* eslint-disable */
import React, { useRef, useState, useEffect } from "react";
import { Select, Button, message, Input, Spin } from "antd";
import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonServices from "@/services/services";
import CommonBase from "@/components/Common/CommonBase";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import commonConfig from "@/utils/config";
import SvgBox from "./svg";
import styles from "./index.less";
const BoxDesignEvent = props => {
  const addState = {};
  const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
  const [tableData, setTableData] = useState({});
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false); // 加载状态

  addState.getSqlOptions = async type => {
    setLoading(true);
    if (!type) {
      setLoading(false);
      if (!tableData?.length) return
      const shape = tableData?.find(x => x.iTag === 70)?.showDropDown
      const JsonShape = JSON.parse(shape)
      const arr = Array.from(Object.values(JsonShape));
      setOptions([
        {
          sId: "0",
          sCode: "0",
          sName: arr[0],
          sMakeUpPath: "",
          sTypes: "0",
        },
        {
          sId: "1",
          sCode: "1",
          sName: arr[1],
          sMakeUpPath: "",
          sTypes: "1",
        },
      ]);
      return;
    }
    const { app, token, makeConfig } = props;
    // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {};
    const { sId } = makeConfig;
    if (!sId) return;
    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`;
    const body = {
      pageNum: 1,
      pageSize: 20,
      sKeyUpFilterName: "",
      sSqlCondition: {
        sType: type,
      },
    };
    const data = await commonServices.postValueService(token, body, url);
    if (data) {
      const option = data.data.dataset.rows;
      option.sort((a, b) => {
        if (a.sCode === "") {
          return -1; // 将 id 为 1 的元素排在前面
        }
        if (b.sCode === "") {
          return 1;
        }
        return 0; // 其他元素保持原顺序
      });

      setOptions(data.data.dataset.rows);
    }
    setLoading(false);
  };

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

    const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible);
    setTableData(data);
    props.onSaveState(pre => ({ ...pre, data }));
  }, [formData.length]);

  return {
    ...props,
    tableData,
    ...addState,
    options,
    loading,
  };
};
const BoxDesignCompontent = baseProps => {
  const props = BoxDesignEvent(baseProps);
  const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData = [], options = [] } = props;
  const { slaveData = {}, masterData = {} } = props.state;
  const { boxVisible } = baseProps;
  const [boxList, setBoxList] = useState([]);
  const [tableColum, setTableColum] = useState([]); // 盒身类型
  const [tableDataList, setTableDataList] = useState([]); // 盒长
  const [tableDataLists, setTableDataLists] = useState([]); // 盒长
  const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
  const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
  const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
  const [topDoubleBoxList, setTopDoubleBoxList] = useState([]); // 盒身信息
  const [leftBoxList, setLeftBoxList] = useState([]); // 左边
  const [leftDoubleBoxList, setLeftDoubleBoxList] = useState([]); // 左边
  const [rightBoxList, setRightBoxList] = useState([]);
  const [rightDoubleBoxList, setRightDoubleBoxList] = useState([]);
  const [boxKey, setBoxKey] = useState(new Date().getTime());
  const [doubleLayerList, setDoubleLayerList] = useState([]);
  const [shapeList, setShapeList] = useState([])
  const [doublePrompt, setDoublePrompt] = useState([])

  // if (!boxVisible) return "";
  // 1️⃣ 只负责 tableColum 盒型名称
  useEffect(() => {
    if (!tableData?.length) return;
    const newTableColum = tableData
      .filter(item => item.bVisible).filter(item => item.iTag === 10) // 先过滤可见
      .map(item => ({
        ...item,
        isEditable: true,
        isSelect: false,
        selectImage: null,
        value: "",
      }))
    setTableColum(newTableColum);
  }, [tableData]);

  // 2️⃣ 只负责 boxBodyList 盒身
  useEffect(() => {
    if (!tableData?.length) return;
    const bodyList = tableData
      .filter(item => item.bVisible).filter(item => item.iTag === 20)
      .map(item => ({
        ...item,
        isEditable: true,
        isSelect: false,
        selectImage: null,
        value: '',
      }))
    setBoxBodyList(bodyList);
  }, [tableData]);

  // 3️⃣ 只负责 tableDataList 和 tableDataLists

  useEffect(() => {
    if (!tableData?.length) return;
   
    const keywordMap = ['L','W', 'D']
    const newList = tableData
      .filter(item => item.bVisible).filter(item => item.iTag === 30)
      .map(item => ({
        ...item,
        isEditable: true,
        isSelect: false,
        selectImage: null,
        value: "",
      })).map((item,i) => {
        // 拼出新名字：原始关键字 + (后缀)
        const sName = `${item.showName} (${keywordMap[i]})`
        return { ...item, sName };
      });
    setTableDataList(newList);
    setTableDataLists(newList);
    const shape = tableData.find(x => x.iTag === 70)?.showDropDown
    const JsonShape = JSON.parse(shape)
    const shapeLists = Array.from(Object.values(JsonShape))
    setShapeList(shapeLists)
    const prompt = tableData.filter(x => x.iTag === 80)
    setDoublePrompt(prompt)
  }, [tableData]);

  // 获取itag为40的数据
  const upViewPropsAll = Array.isArray(tableData)
    ? tableData
      .filter(item => item.bVisible)
      .filter(item => [40, 50, 60].includes(item.iTag))
    : [];
  let titleListConfiguration = upViewPropsAll?.map(item => {
    return item.showName
  })
  const btnName = Array.isArray(tableData)
    ? tableData
      .filter(item => item.bVisible) // 过滤出可见的项目
      .find(item => [11].includes(item.iTag))?.showName || '' 
    : ''; 

  const titleList = [
    "上方盒舌",
    "盒底组件",
    "下方盒舌",
    "左(上)插位组件",
    "左贴边位",
    "左(下)插位组件",
    "右(上)插位组件",
    "右贴边位",
    "右(下)插位组件",
  ]
  const titleList1 = [
    { name: "上方盒舌", value: "dSFHS" },
    { name: "盒底组件", value: "dHDC" },
    { name: "下方盒舌", value: "dXFHS" },
    { name: "左(上)插位组件", value: "dZSCW" },
    { name: "左贴边位", value: "dZTBW" },
    { name: "左(下)插位组件", value: "dZXCW" },
    { name: "右(上)插位组件", value: "dYSCW" },
    { name: "右贴边位", value: "dYTBW" },
    { name: "右(下)插位组件", value: "dYXCW" },
  ];
  // const titleList1 = upViewPropsAll?.map(item=>{
  //   return {
  //     name:item.showName,
  //     value:item.sName
  //   }
  // })
  const doubleTitlieList = [
    "左上插位组件",
    "上插位组件",
    "右上插位组件",
    "左偏移",
    "左插位组件",
    "左下插位组件",
    "右偏移",
    "右插位组件",
    "右下插位组件",
  ];
  const doubleTitlieList1 = [
    { name: "左上插位组件", value: "dZSCW" },
    { name: "上插位组件", value: "dSCW" },
    { name: "右上插位组件", value: "dYSCW" },
    { name: "左偏移", value: "dZPY" },
    { name: "左插位组件", value: "dZCW" },
    { name: "左下插位组件", value: "dZXCW" },
    { name: "右偏移", value: "dYPY" },
    { name: "右插位组件", value: "dYCW" },
    { name: "右下插位组件", value: "dYXCW" },
    { name: "首盒长", value: "dSHC" },
    { name: "首盒宽", value: "dSHK" },
    { name: "次盒长", value: "dCHC" },
    { name: "次盒宽", value: "dCHK" },
  ];
  const newBoxList = [];

  // const boxs = titleList.length + tableData.length;
  tableColum.forEach(item => {
    titleList.push(item.showName);
  });
  boxBodyList.forEach(item => {
    titleList.push(item.showName);
  });
  tableDataList.forEach(item => {
    titleList.push(item.showName);
  });
  // 这里处理双盒的初始数据
  titleList.push(...["首盒长", "首盒宽", "次盒长", "次盒宽"], ...doubleTitlieList);
  // 盒身信息
  titleList.forEach((item, index) => {
    newBoxList.push({
      value: "",
      sName: item,
      isEditable: true,
      isSelect: false,
      selectValue: null,
      selectLabel: "",
      selectImage: null,
      type: null,
      show: true,
      showName: upViewPropsAll?.find(x => x.sName === titleList1.find(x => x.name === item)?.value)?.showName, // 参数名称
      sAssignFormula: null,
      sLength: null,
      sWidth: null,
      sType: null, // 盒型类别
      sTypeName: null, // 盒型名称
      sOffset: null, // 偏移
      sQuantity: null, // 数量
      cLength: null,
      cWidth: null,
      cType: null, // 盒型类别
      cTypeName: null, // 盒型名称
      cOffset: null, // 偏移
      cQuantity: null, // 数量
      sCode: titleList1.find(x => x.name === item)?.value,
      showNames: upViewPropsAll?.find(x => x.sName === titleList1.find(x => x.name === item)?.value)?.showName
    });
  });
  // 部件信息
  const boxTypes = masterData.sTypes;
  if (slaveData && slaveData.length) {
    if (boxTypes !== "8") {
      slaveData.forEach((item, index) => {
        const i = titleList1.findIndex(i => {
          return i.value === item.sCode;
        });
        if (i !== -1) {
          const x = newBoxList.findIndex(z => z.sName === titleList1[i].name);
          if (x !== -1) {
            Object.assign(newBoxList[x], {
              value: item.iValue,
              type: item.sTypes,
              showName: item.sName,
              selectImage: item.sMakeUpPath,
              sName: titleList1[i].name,
              sAssignFormula: item.sAssignFormula,
              bVisible: item.bVisible,
              sLength: item.iSLength,
              sWidth: item.iSWidth,
              sType: item.iSType,
              sTypeName: item.iSType !== null ? shapeList[item.iSType] : null,
              sOffset: item.sSOffset,
              sQuantity: item.iSQuantity,
              cLength: item.iCLength,
              cWidth: item.iCWidth,
              cType: item.iCType,
              cTypeName: item.iCType !== null ? shapeList[item.iCType] : null,
              cOffset: item.sCOffset,
              cQuantity: item.iCQuantity,
              showNames: upViewPropsAll?.find(x => x.sName === item.sCode)?.showName
            });
          }

        }
      });
    } else {
      slaveData.forEach((item, index) => {
        const i = doubleTitlieList1.findIndex(i => {
          return i.value === item.sCode;
        });
        if (i !== -1) {
          const x = newBoxList.findIndex(z => z.sName === doubleTitlieList1[i].name);
          newBoxList[x].value = item.iValue;
          newBoxList[x].type = item.sTypes;
          newBoxList[x].showName = item.sName;
          newBoxList[x].selectImage = item.sMakeUpPath;
          newBoxList[x].sName = doubleTitlieList1[i].name;
          newBoxList[x].sAssignFormula = item.sAssignFormula;
          newBoxList[x].bVisible = item.bVisible;
        }
      });
      // 双盒盒型单独处理
    }
  }
  // 盒身信息
  if (masterData && boxBodyList.length && tableDataList.length && tableColum.length) {
    const headLength = slaveData.find(item => item.sCode === "dSHC")?.iValue;
    const headWidth = slaveData.find(item => item.sCode === "dSHK")?.iValue;
    const orderLength = slaveData.find(item => item.sCode === "dCHC")?.iValue;
    const orderWidth = slaveData.find(item => item.sCode === "dCHK")?.iValue;
    newBoxList.forEach((item, index) => {
      if (item.sName?.trim() === boxBodyList[0].showName) {
        newBoxList[index].value = masterData.sBoxBody;
        newBoxList[index].selectImage = masterData.sMakeUpPath;
        newBoxList[index].type = masterData.sTypes;
      } else if (item.sName?.trim() === tableDataList[0].showName) {
        newBoxList[index].value = masterData.dBoxLength;
      } else if (item.sName?.trim() === tableDataList[1].showName) {
        newBoxList[index].value = masterData.dBoxWidth;
      } else if (item.sName?.trim() === tableDataList[2].showName) {
        newBoxList[index].value = masterData.dBoxHeight;
      } else if (item.sName === tableColum[0].showName) {
        newBoxList[index].value = masterData.sName;
      } else if (item.sName === "首盒长") {
        newBoxList[index].value = headLength;
      } else if (item.sName === "首盒宽") {
        newBoxList[index].value = headWidth;
      } else if (item.sName === "次盒长") {
        newBoxList[index].value = orderLength;
      } else if (item.sName === "次盒宽") {
        newBoxList[index].value = orderWidth;
      }
    });
  }
  // 有数据的时候 盒型设计需要赋值
  useEffect(() => {
    if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {
      setBoxList(newBoxList);
    }
  }, [newBoxList]);

  const arraysAreEqual = (arr1, arr2) => {
    if (arr1.length !== arr2.length) return false;
    return arr1.every((item, index) => item.sName === arr2[index].sName);
  };
  useEffect(() => {
    const type =  boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type;
    const updateLists = () => {
      const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌";

      const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件";

      const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件";

      if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3" || type === 5 || type === "5") {
        const box = [...boxList];
        box.forEach(x => {
          x.show = true;
        });
        if (type === "2" || type === 2) {
          box.forEach(x => x.sName === "盒底组件" && (x.show = false));
        } else if (type === "4" || type === 4) {
          const title = ["盒底组件", "左贴边位", "右贴边位"];
          box.forEach(x => title.includes(x.sName) && (x.show = false));
        } else if (type === "3" || type === 3) {
          const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"];
          box.forEach(x => title.includes(x.sName) && (x.show = false));
        } else if (type === "5" || type === 5) {
          const title = ["盒底组件"];
          box.forEach(x => title.includes(x.sName) && (x.show = false));
        }
        setTopBoxList(box.filter(topBoxFilter));
        setLeftBoxList(box.filter(leftBoxFilter));
        if (type === 3 || type === "3") {
          setRightBoxList(box.filter(rightBoxFilter).reverse());
        } else {
          setRightBoxList(box.filter(rightBoxFilter));
        }
      } else if (type === "7" || type === 7) {
        const box = [...boxList];
        box.forEach(x => {
          x.show = true;
        });
        const title = ["盒底组件", "左贴边位", "右贴边位", "上方盒舌", "下方盒舌"];
        box.forEach(x => title.includes(x.sName) && (x.show = false));
        setTopBoxList(box.filter(topBoxFilter));
        setLeftBoxList(box.filter(leftBoxFilter));
        setRightBoxList(box.filter(rightBoxFilter));
      } else if (type === "8" || type === 8) {
        const box = [...boxList];
        box.forEach(x => {
          x.show = true;
        });
        const topBoxFilter = item => item.sName === "左上插位组件" || item.sName === "上插位组件" || item.sName === "右上插位组件";
        const leftBoxFilter = item => item.sName === "左偏移" || item.sName === "左插位组件" || item.sName === "左下插位组件";
        const rightBoxFilter = item => item.sName === "右偏移" || item.sName === "右插位组件" || item.sName === "右下插位组件";
        setTopDoubleBoxList(box.filter(topBoxFilter));
        setLeftDoubleBoxList(box.filter(leftBoxFilter));
        setRightDoubleBoxList(box.filter(rightBoxFilter));
      } else if (Number(type) === 9) {
        setTopBoxList([])
        setLeftBoxList([])
        setRightBoxList([])
      } else {
        const box = [...boxList];
        box.forEach(x => {
          x.show = true;
        });
        setTopBoxList(box.filter(topBoxFilter));
        setLeftBoxList(box.filter(leftBoxFilter));
        setRightBoxList(box.filter(rightBoxFilter));
      }
    };

    updateLists();
  }, [boxList]);
  const boxType = boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type;
  // 监听盒身类型
  useEffect(() => {
    if (!boxType) return;
    if (boxType === "8") {
      const createBox = names =>
        names.map(sName => ({
          value: "",
          sName,
          isEditable: true,
          isSelect: false,
          selectValue: null,
          selectLabel: "",
          selectImage: null,
          type: null,
          show: true,
          showName: sName,
          sAssignFormula: null,
        }));
      setDoubleLayerList(createBox(["首盒长", "首盒宽", "次盒长", "次盒宽"]));
      // setTopDoubleBoxList(createBox(["左上插位组件", "上插位组件", "右上插位组件"]));
      // setLeftDoubleBoxList(createBox(["左偏移", "左插位组件", "左下插位组件"]));
      // setRightDoubleBoxList(createBox(["右偏移", "右插位组件", "右下插位组件"]));
    } else {
    }
  }, [boxType]);

  const handleFocus = (e, index) => {
    if (boxList && boxList.length) {
      const updatedBoxList = [...boxList];
      updatedBoxList[index].isEditable = true;
      setBoxList(updatedBoxList);
    }
  };

  const handleBlur = (e, index) => {
    if (boxList && boxList.length) {
      const updatedBoxList = [...boxList];
      updatedBoxList[index].isEditable = false;
      setBoxList(updatedBoxList);
    }
  };

  const handleChange = (e, index, field) => {
    const updatedBoxList = [...boxList];
    if (field) {
      updatedBoxList[index][field] = e.target.value;
    } else {
      updatedBoxList[index].value = e.target.value;
    }
    setBoxList(updatedBoxList);
  };

  const handleChangeName = (e, index) => {
    const updatedBoxList = [...boxList];
    updatedBoxList[index].showName = e.target.value;
    setBoxList(updatedBoxList);
  };

  const handleSelect = (name, selectConfig, index, type, doubleType) => {
    let updatedBoxList = [...boxList];
    updatedBoxList[index].type = name;
    updatedBoxList[index].selectImage = selectConfig.image;
    // 选择盒身数据全部清空

    const typeList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    if (typeList.includes(type)) {
      const table1 = tableColum.map(x => x.showName);
      const table2 = boxBodyList.map(x => x.showName);
      const table3 = tableDataList.map(x => x.showName);
      const tableTitle = table1.concat(table2, table3);
      updatedBoxList.forEach((x, i) => {
        if (i !== index && !tableTitle.includes(x.sName)) {
          x.value = "";
          x.type = null;
          x.selectValue = null;
          x.selectImage = null;
          x.sLength = null;
          x.sWidth = null;
          x.sType = null;
          x.sTypeName = null;
          x.sOffset = null;
          x.sQuantity = null;
          x.cLength = null;
          x.cWidth = null;
          x.cType = null;
          x.cTypeName = null;
          x.cOffset = null;
          x.cQuantity = null;
          // x.showName =
        }
      });
      setIsDefaultValue(false);
      updatedBoxList[index].value = selectConfig.label;
    }
    setBoxList(updatedBoxList);
  };
  const handleSelects = (name, selectConfig, index, type, doubleType) => {
    let updatedBoxList = [...boxList];
    if (doubleType === 0) {
      updatedBoxList[index].sTypeName = shapeList[Number(name)];
      updatedBoxList[index].sType = Number(name)
    } else {
      updatedBoxList[index].cTypeName = shapeList[Number(name)];
      updatedBoxList[index].cType = Number(name)
    }
    setBoxList(updatedBoxList);
  };

  const removeExtension = (filename) => {
    const lastDotIndex = filename.lastIndexOf('.');
    if (lastDotIndex === -1) {
      // 如果字符串中没有点，则返回原字符串
      return filename;
    }
    return filename.substring(0, lastDotIndex);
  }
  const getImage = (sName) => {
    const fileName = removeExtension(sName);
    const imageUrlNew = `${commonConfig.server_host}file/downloadPrice?sLogoName=${fileName}&date=${new Date().getTime()}`;
    return imageUrlNew
  }
  // 下来框
  const renderOptionWithImage = option => {
    return (
      <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={option.sMakeUpPath}>
        <div style={{ display: "flex", alignItems: "center" }}>
          {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
          <span>{option.sName}</span>
        </div>
      </Select.Option>
    );
  };
  const renderOptionWithText = option => {
    return (
      <Select.Option key={option.sId} value={option.sCode} label={option.sName}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <span>{option.sName}</span>
        </div>
      </Select.Option>
    );
  };
  // const [svgBoxProps, setSvgBoxProps] = useState({ ...props, boxList, showNew: 0, dSvgBoxWidth: 500, dSvgBoxHeight: 250 });
  let svgBoxProps = {
    ...props,
    boxList,
    showNew: 0,
    tableColum,
    boxBodyList,
    tableDataList
    // dSvgBoxWidth: 500,
    // dSvgBoxHeight: 250,
  };
  const dobuleProps = {
    ...props,
    renderOptionWithImage,
  };
  // 计算展长展宽
  // 创建盒型
  const submit = () => {
    const newSlaveData = [];
    // 判断是新增还是修改

    // 存储子表数据
    const boxTypes =  boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type;
    const findList = boxTypes === "8" ? doubleTitlieList1 : titleList1;
    boxList.forEach((item, index) => {
      const i = findList.findIndex(i => i.name === item.sName);
      const slave = slaveData.find(z => z.sCode === findList[i]?.value);
      if (i !== -1) {
        const data = {
          ...slaveData[0],
          handleType: slave ? "update" : "add",
          sName: item.showName,
          sCode: findList[i].value,
          iValue: item.value,
          iOrder: index + 1,
          iRowNum: index + 1,
          sId: slave ? slave.sId : commonUtils.createSid(),
          sMakeUpPath: item.selectImage,
          sTypes: item.type,
          bVisible: item.value ? true : false,
          sParentId: masterData.sId,
          sAssignFormula: item.sAssignFormula,
          iSLength: !item.sLength ? 0 : item.sLength,
          iSWidth: !item.sWidth ? 0 : item.sWidth,
          iSType: !item.sType ? 0 : item.sType,
          iSTypeName: item.sType !== null ? shapeList[item.iSType] : null,
          sSOffset: !item.sOffset ? 0 : item.sOffset,
          iSQuantity: !item.sQuantity ? 0 : item.sQuantity,
          iCLength: !item.cLength ? 0 : item.cLength,
          iCWidth: !item.cWidth ? 0 : item.cWidth,
          iCType: !item.cType ? 0 : item.cType,
          iCTypeName: item.cType !== null ? shapeList[item.iCType] : null,
          sCOffset: !item.cOffset ? 0 : item.cOffset,
          iCQuantity: !item.cQuantity ? 0 : item.cQuantity,
        };
        // if (item.value !== "") {
        newSlaveData.push(data);
        // }
      }
    });
    const submitSlaveData = [];
    slaveData.forEach(item => {
      const i = newSlaveData.findIndex(x => x.scode === item.code);
      if (i === -1) {
        submitSlaveData.push({ ...item, handleType: "del" });
      }
    });
    submitSlaveData.concat(newSlaveData);

    // 处理计算公式
    // 计算展长公式 sLengthFormula
    let sLengthFormula = "";
    let sWidthFormula = "";
    const boxType =  boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type;
    if (boxType === "8") {
    } else {
      const boxHeight = Number(boxList.find(item => item.sName === tableDataList[2].showName)?.value);
      const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
      const zscw = boxList.find(x => x.sName === "左(上)插位组件");
      const yscw = boxList.find(x => x.sName === "右(上)插位组件");
      const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
      const hdzj = boxList.find(x => x.sName === "盒底组件");
      const zxcwType = zxcw?.type;
      const zxcwValue = zxcw?.value;
      const zscwType = zscw?.type;
      const zscwValue = zscw?.value;
      const yscwType = yscw?.type;
      const yscwValue = yscw?.value;
      const yxcwType = yxcw?.type;
      const yxcwValue = yxcw?.value;
      let leftTopValue = 0;
      let leftTop = "";
      let rightTopValue = 0;
      let rightTop = "";
      let leftBottomValue = 0;
      let leftBottom = "";
      let rightBottomValue = 0;
      let rightBottom = "";
      if (boxType && boxType === "1") {
        // 四面盒
        const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
        const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
        sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : "");

        if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
          leftBottomValue = Number(zxcwValue) + boxHeight;
          leftBottom = " + dZXCW + W";
        } else if (zxcwType === "4002" || zxcwType === "4003") {
          leftBottomValue = Number(zxcwValue);
          leftBottom = " + dZXCW";
        } else if (zxcwType === "4004") {
          leftBottomValue = Number(zxcwValue) + boxHeight * 2;
          leftBottom = " + dZXCW + W * 2";
        } else if (zxcwType === "4005") {
          leftBottomValue = boxHeight * 2;
          leftBottom = "+ W * 2";
        }
        if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
          rightTopValue = Number(yscwValue) + boxHeight;
          rightTop = "dYSCW + W + ";
        } else if (yscwType === "6002" || yscwType === "6003") {
          rightTopValue = Number(yscwValue);
          rightTop = "dYSCW +  ";
        } else if (yscwType === "6004") {
          rightTopValue = Number(yscwValue) + boxHeight * 2;
          rightTop = "dYSCW + W * 2+ ";
        } else if (yscwType === "6005") {
          rightTopValue = boxHeight * 2;
          rightTop = "W * 2+ ";
        }
        if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
          leftTopValue = Number(zscwValue) + boxHeight;
          leftTop = "dZSCW + W +";
        } else if (zscwType === "3002" || zscwType === "3003") {
          leftTopValue = Number(zscwValue);
          leftTop = "dZSCW +";
        } else if (zscwType === "3004") {
          leftTopValue = Number(zscwValue) + boxHeight * 2;
          leftTop = "dZSCW + W * 2 +";
        } else if (zscwType === "3005") {
          leftTopValue = boxHeight * 2;
          leftTop = "W * 2 +";
        }
        if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
          rightBottomValue = Number(yxcwValue) + boxHeight;
          rightBottom = "+ dYXCW + W";
        } else if (yxcwType === "7002" || yxcwType === "7003") {
          rightBottomValue = Number(yxcwValue);
          rightBottom = "+ dYXCW ";
        } else if (yxcwType === "7004") {
          rightBottomValue = Number(yxcwValue) + boxHeight * 2;
          rightBottom = "+ dYXCW + W * 2";
        } else if (yxcwType === "7005") {
          rightBottomValue = boxHeight * 2;
          rightBottom = "+ W * 2";
        }
        sWidthFormula =
          (leftTopValue > rightTopValue ? leftTop : rightTop) +
          "D" +
          (hdzj ? " + dHDC" : leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
      } else if (boxType && boxType === "2") {
        // 单折
        const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
        const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
        sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : "");
        if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
          leftBottomValue = Number(zxcwValue) + boxHeight;
          leftBottom = " + dZXCW + W";
        } else if (zxcwType === "4002" || zxcwType === "4003") {
          leftBottomValue = Number(zxcwValue);
          leftBottom = " + dZXCW";
        } else if (zxcwType === "4004") {
          leftBottomValue = Number(zxcwValue) + boxHeight * 2;
          leftBottom = " + dZXCW + W * 2";
        } else if (zxcwType === "4005") {
          leftBottomValue = boxHeight * 2;
          leftBottom = "+ W * 2";
        }
        if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
          rightTopValue = Number(yscwValue) + boxHeight;
          rightTop = "dYSCW + W + ";
        } else if (yscwType === "6002" || yscwType === "6003") {
          rightTopValue = Number(yscwValue);
          rightTop = "dYSCW +  ";
        } else if (yscwType === "6004") {
          rightTopValue = Number(yscwValue) + boxHeight * 2;
          rightTop = "dYSCW + W * 2+ ";
        } else if (yscwType === "6005") {
          rightTopValue = boxHeight * 2;
          rightTop = "W * 2+ ";
        }
        if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
          leftTopValue = Number(zscwValue) + boxHeight;
          leftTop = "dZSCW + W +";
        } else if (zscwType === "3002" || zscwType === "3003") {
          leftTopValue = Number(zscwValue);
          leftTop = "dZSCW +";
        } else if (zscwType === "3004") {
          leftTopValue = Number(zscwValue) + boxHeight * 2;
          leftTop = "dZSCW + W * 2 +";
        } else if (zscwType === "3005") {
          leftTopValue = boxHeight * 2;
          leftTop = "W * 2 +";
        }
        if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
          rightBottomValue = Number(yxcwValue) + boxHeight;
          rightBottom = "+ dYXCW + W";
        } else if (yxcwType === "7002" || yxcwType === "7003") {
          rightBottomValue = Number(yxcwValue);
          rightBottom = "+ dYXCW ";
        } else if (yxcwType === "7004") {
          rightBottomValue = Number(yxcwValue) + boxHeight * 2;
          rightBottom = "+ dYXCW + W * 2";
        } else if (yxcwType === "7005") {
          rightBottomValue = boxHeight * 2;
          rightBottom = "+ W * 2";
        }
        sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
      } else if (boxType && boxType === "3") {
        const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
        const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
        sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : "");
        if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
          leftBottomValue = Number(zxcwValue) + boxHeight;
          leftBottom = " + dZXCW + W";
        } else if (zxcwType === "4002" || zxcwType === "4003") {
          leftBottomValue = Number(zxcwValue);
          leftBottom = " + dZXCW";
        } else if (zxcwType === "4004") {
          leftBottomValue = Number(zxcwValue) + boxHeight * 2;
          leftBottom = " + dZXCW + W * 2";
        } else if (zxcwType === "4005") {
          leftBottomValue = boxHeight * 2;
          leftBottom = "+ W * 2";
        }
        if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
          rightTopValue = Number(yscwValue) + boxHeight;
          rightTop = "dYSCW + W + ";
        } else if (yscwType === "6002" || yscwType === "6003") {
          rightTopValue = Number(yscwValue);
          rightTop = "dYSCW +  ";
        } else if (yscwType === "6004") {
          rightTopValue = Number(yscwValue) + boxHeight * 2;
          rightTop = "dYSCW + W * 2+ ";
        } else if (yscwType === "6005") {
          rightTopValue = boxHeight * 2;
          rightTop = "W * 2+ ";
        }
        if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
          leftTopValue = Number(zscwValue) + boxHeight;
          leftTop = "dZSCW + W +";
        } else if (zscwType === "3002" || zscwType === "3003") {
          leftTopValue = Number(zscwValue);
          leftTop = "dZSCW +";
        } else if (zscwType === "3004") {
          leftTopValue = Number(zscwValue) + boxHeight * 2;
          leftTop = "dZSCW + W * 2 +";
        } else if (zscwType === "3005") {
          leftTopValue = boxHeight * 2;
          leftTop = "W * 2 +";
        }
        if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
          rightBottomValue = Number(yxcwValue) + boxHeight;
          rightBottom = "+ dYXCW + W";
        } else if (yxcwType === "7002" || yxcwType === "7003") {
          rightBottomValue = Number(yxcwValue);
          rightBottom = "+ dYXCW ";
        } else if (yxcwType === "7004") {
          rightBottomValue = Number(yxcwValue) + boxHeight * 2;
          rightBottom = "+ dYXCW + W * 2";
        } else if (yxcwType === "7005") {
          rightBottomValue = boxHeight * 2;
          rightBottom = "+ W * 2";
        }
        sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
      } else if (boxType && boxType === "4") {
        // 天地盒
        const zxcw = boxList.find(x => x.sName === "左(下)插位组件");
        const zscw = boxList.find(x => x.sName === "左(上)插位组件");
        const yscw = boxList.find(x => x.sName === "右(上)插位组件");
        const yxcw = boxList.find(x => x.sName === "右(下)插位组件");
        const zxcwType = zxcw?.type;
        const zxcwValue = zxcw?.value;
        const zscwType = zscw?.type;
        const zscwValue = zscw?.value;
        const yscwType = yscw?.type;
        const yscwValue = yscw?.value;
        const yxcwType = yxcw?.type;
        const yxcwValue = yxcw?.value;
        let leftValue = "";
        let rightValue = "";
        let topValue = "";
        let bottomValue = "";
        if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
          // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2;
          leftValue = "dZXCW + D * 2 +";
        } else if (zxcwType === "4002" || zxcwType === "4003") {
          leftValue = "dZXCW + D +";
        } else if (zxcwType === "4004") {
          leftValue = "dZXCW + D * 3 +";
        } else if (zxcwType === "4005") {
          leftValue = "D * 3 +";
        }
        if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
          rightValue = "+ dYSCW + D * 2";
        } else if (yscwType === "6002" || yscwType === "6003") {
          rightValue = "+ dYSCW + D";
        } else if (yscwType === "6004") {
          rightValue = "+ dYSCW + D * 3";
        } else if (yscwType === "6005") {
          rightValue = " + D * 3";
        }
        if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
          topValue = "dZSCW + D * 2 +";
        } else if (zscwType === "3002" || zscwType === "3003") {
          topValue = "dZSCW + D +";
        } else if (zscwType === "3004") {
          topValue = "dZSCW + D * 3 +";
        } else if (zscwType === "3005") {
          topValue = "D * 3+";
        }
        if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
          bottomValue = "+ dYXCW + D * 2";
        } else if (yxcwType === "7002" || yxcwType === "7003") {
          bottomValue = "+ dYXCW + D ";
        } else if (yxcwType === "7004") {
          bottomValue = "+ dYXCW + D * 3";
        } else if (yxcwType === "7005") {
          bottomValue = "+ D * 3";
        }
        // viewBoxWidth = Number(boxLength) + leftValue + rightValue;
        // viewBoxHeight = Number(boxWidth) + topValue + bottomValue;
        sLengthFormula = leftValue + "L" + rightValue;
        sWidthFormula = topValue + "W" + bottomValue;
      } else if (boxType && boxType === "5") {
        // 飞机盒
        const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value;
        const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value;
        sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : "");
        if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") {
          leftBottomValue = Number(zxcwValue) + boxHeight;
          leftBottom = " + dZXCW + D";
        } else if (zxcwType === "4002" || zxcwType === "4003") {
          leftBottomValue = Number(zxcwValue);
          leftBottom = " + dZXCW";
        } else if (zxcwType === "4004") {
          leftBottomValue = Number(zxcwValue) + boxHeight * 2;
          leftBottom = " + dZXCW + D * 2";
        } else if (zxcwType === "4005") {
          leftBottomValue = boxHeight * 2;
          leftBottom = "+ D * 2";
        }
        if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") {
          rightTopValue = Number(yscwValue) + boxHeight;
          rightTop = "dYSCW + D + ";
        } else if (yscwType === "6002" || yscwType === "6003") {
          rightTopValue = Number(yscwValue);
          rightTop = "dYSCW +  ";
        } else if (yscwType === "6004") {
          rightTopValue = Number(yscwValue) + boxHeight * 2;
          rightTop = "dYSCW + D * 2+ ";
        } else if (yscwType === "6005") {
          rightTopValue = boxHeight * 2;
          rightTop = "D * 2+ ";
        }
        if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") {
          leftTopValue = Number(zscwValue) + boxHeight;
          leftTop = "dZSCW + D +";
        } else if (zscwType === "3002" || zscwType === "3003") {
          leftTopValue = Number(zscwValue);
          leftTop = "dZSCW +";
        } else if (zscwType === "3004") {
          leftTopValue = Number(zscwValue) + boxHeight * 2;
          leftTop = "dZSCW + D * 2 +";
        } else if (zscwType === "3005") {
          leftTopValue = boxHeight * 2;
          leftTop = "D * 2 +";
        }
        if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") {
          rightBottomValue = Number(yxcwValue) + boxHeight;
          rightBottom = "+ dYXCW + D";
        } else if (yxcwType === "7002" || yxcwType === "7003") {
          rightBottomValue = Number(yxcwValue);
          rightBottom = "+ dYXCW ";
        } else if (yxcwType === "7004") {
          rightBottomValue = Number(yxcwValue) + boxHeight * 2;
          rightBottom = "+ dYXCW + D * 2";
        } else if (yxcwType === "7005") {
          rightBottomValue = boxHeight * 2;
          rightBottom = "+ D * 2";
        }
        sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "L" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom);
      }
    }

    // const sDoubleSize = JSON.stringify([headLength,headWidth,orderLength,orderWidth])
    // 存储盒身数据 主表
    //  boxList.find(item => item.sName === boxBodyList[0]?.showName)?.type;
    const newMasterData = {
      ...masterData,
      sBoxBody: boxList.find(item => item.sName.trim() === boxBodyList[0]?.showName)?.value || "",
      dBoxLength: boxList.find(item => item.sName?.trim() === tableDataList[0].showName)?.value || "",
      dBoxWidth: boxList.find(item => item.sName?.trim() === tableDataList[1].showName)?.value || "",
      dBoxHeight: boxList.find(item => item.sName?.trim() === tableDataList[2].showName)?.value || "",
      sName: boxList.find(item => item.sName?.trim() === tableColum[0].showName)?.value || "",
      sMakeUpPath: boxList.find(item => item.sName === boxBodyList[0]?.showName)?.selectImage || "",
      sTypes: boxList.find(item => item.sName.trim() === boxBodyList[0]?.showName)?.type || "",
      sLengthFormula: masterData.sLengthFormula || sLengthFormula,
      sWidthFormula: masterData.sWidthFormula || sWidthFormula,
    };

    onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据
  };
  const findIndexBySname = name => {
    const i = boxList.findIndex(x => x.sName === name);
    return i || 0;
  };
  const types = (leftBoxList || []).find(item => {
    if (!item.type) return false;
    return item.type.includes("09");
  });
  const typesRight = (rightBoxList || []).find(item => {
    if (!item.type) return false;
    return item.type.includes("09");
  });
  const typesTop = (topBoxList || []).find(item => {
    if (!item.type) return false;
    return item.type.includes("09");
  });
  if (types || typesRight) {
    svgBoxProps = {
      ...props,
      boxList,
      showNew: 0,
      // dSvgBoxWidth: 500,
      // dSvgBoxHeight: 400,
    };
  }
  return (
    <AntdDraggableModal
      width="1000px"
      height="calc(100vh - 50px)"
      title={title}
      visible={boxVisible}
      onCancel={onCancel}
      okText={btnName}
      onOk={submit}
      bodyStyle={{
        height: "calc(95vh - 105px)",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column",
      }}
      style={{
        top: 50,
      }}
    >
      {/* 盒身信息 */}

      <div className={styles.boxBody} key={boxKey}>
        <div className={styles.boxTop} style={{ height: `${typesTop ? "200px" : "100px"}` }}>
          {boxType !== "8" &&
            topBoxList.map((topItem, index) => (
              <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{topItem.showNames}</div>
                {topItem?.selectImage ? (
                  <img
                    // src={topItem?.selectImage}
                    src={topItem?.selectImage ? getImage(topItem?.selectImage) : ''}
                    alt={topItem.value}
                    style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
                  />
                ) : (
                  ""
                )}

                <Select
                  optionLabelProp="label"
                  className="mySelects"
                  style={{ width: 180 }}
                  defaultValue={options.length ? options[0].value : ""}
                  onSelect={(value, option) => handleSelect(value, option, index, 0)}
                  onDropdownVisibleChange={async open => {
                    if (open) {
                      props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
                    }
                  }}
                >
                  {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                </Select>
                {topItem.type && topItem.type.includes("09") ? (
                  <div>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: 61 }}>
                        {doublePrompt[0].showName}
                      </div>
                      <Input
                        value={topItem?.sLength}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sLength")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[2].showName}
                      />
                      <Input
                        value={topItem?.sWidth}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sWidth")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[3].showName}
                      />
                    </div>
                    <div className={styles.boxInput}>
                      <Select
                        optionLabelProp="label"
                        className="mySelectsDouble"
                        style={{ width: 60.8, color: "#000" }}
                        defaultValue={options.length ? options[0].value : ""}
                        value={topItem?.sTypeName || ""}
                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(topItem.sName), 0, 0)}
                        onDropdownVisibleChange={async open => {
                          if (open) {
                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                          }
                        }}
                      >
                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                      </Select>
                      <Input
                        value={topItem?.sQuantity}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sQuantity")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[4].showName}
                      />
                      <Input
                        value={topItem?.sOffset}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "sOffset")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[5].showName}
                      />
                    </div>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: 61 }}>
                        {doublePrompt[1].showName}
                      </div>
                      <Input
                        value={topItem?.cLength}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cLength")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[2].showName}
                      />
                      <Input
                        value={topItem?.cWidth}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cWidth")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[3].showName}
                      />
                    </div>
                    <div className={styles.boxInput}>
                      <Select
                        optionLabelProp="label"
                        className="mySelectsDouble"
                        style={{ width: 60.8, color: "#000" }}
                        defaultValue={options.length ? options[0].value : ""}
                        value={topItem?.cTypeName || ""}
                        onSelect={(value, option) => handleSelects(value, option, findIndexBySname(topItem.sName), 0, 1)}
                        onDropdownVisibleChange={async open => {
                          if (open) {
                            props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                          }
                        }}
                      >
                        {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                      </Select>
                      <Input
                        value={topItem?.cQuantity}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cQuantity")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[4].showName}
                      />
                      <Input
                        value={topItem?.cOffset}
                        onChange={e => handleChange(e, findIndexBySname(topItem.sName), "cOffset")}
                        onFocus={e => handleFocus(e, findIndexBySname(topItem.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(topItem.sName))}
                        readOnly={!topItem?.isEditable}
                        style={{ width: 60 }}
                        placeholder={doublePrompt[5].showName}
                      />
                    </div>
                  </div>
                ) : (
                  <div className={styles.boxInput}>
                    {/* <div className={styles.text}>参数：</div> */}
                    <Input
                      value={topItem?.showName}
                      onChange={e => handleChangeName(e, index)}
                      onFocus={e => handleFocus(e, index)}
                      onBlur={e => handleBlur(e, index)}
                      readOnly={!topItem?.isEditable}
                      className={styles.text}
                    />
                    <Input
                      value={topItem?.value}
                      onChange={e => handleChange(e, index)}
                      onFocus={e => handleFocus(e, index)}
                      onBlur={e => handleBlur(e, index)}
                      readOnly={!topItem?.isEditable}
                      style={{ width: " 80%" }}
                    />
                  </div>
                )}
              </div>
            ))}
          {boxType === "8" &&
            topDoubleBoxList.map((item, index) => (
              <div key={index} className={styles.boxFlex} style={{ display: item.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{doubleTitlieList[index]}</div>
                {item?.selectImage ? (
                  <img
                    // src={item?.selectImage}
                    src={item?.selectImage ? getImage(item?.selectImage) : ''}
                    alt={item.value}
                    style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
                  />
                ) : (
                  ""
                )}

                <Select
                  optionLabelProp="label"
                  className="mySelects"
                  style={{ width: 180 }}
                  defaultValue={options.length ? options[0].value : ""}
                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
                  onDropdownVisibleChange={async open => {
                    if (open) {
                      props.getSqlOptions(index + 11); // 在下拉菜单打开时调用 getSqlOptions
                    }
                  }}
                >
                  {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                </Select>
                <div className={styles.boxInput}>
                  <Input
                    value={item?.showName}
                    onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    className={styles.text}
                  />
                  <Input
                    value={item?.value}
                    onChange={e => handleChange(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    style={{ width: " 80%" }}
                  />
                </div>
              </div>
            ))}
        </div>
        <div className={styles.boxLeft} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
          {boxType !== "8" &&
            leftBoxList.map((item, index) => (
              <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{item.showNames}</div>

                <Select
                  optionLabelProp="label"
                  className="mySelects"
                  style={{ width: 180 }}
                  defaultValue={options.length ? options[0].value : ""}
                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
                  onDropdownVisibleChange={async open => {
                    if (open) {
                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
                    }
                  }}
                >
                  {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                </Select>
                <div className={styles.boxInput}>
                  {item?.selectImage ? (
                    <img
                      // src={item?.selectImage}
                      src={item?.selectImage ? getImage(item?.selectImage) : ''}
                      alt={item.value}
                      style={{
                        width: 40,
                        height: 30,
                        marginRight: 8,
                        position: "absolute",
                        left: 20,
                        top: -35,
                        zIndex: 10,
                      }}
                    />
                  ) : (
                    ""
                  )}
                  {item.type && item.type.includes("09") ? (
                    <div>
                      <div className={styles.boxInput}>
                        <div className={styles.text} style={{ width: 61 }}>
                           {doublePrompt[0].showName}
                        </div>
                        <Input
                          value={item?.sLength}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sLength")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[2].showName}
                        />
                        <Input
                          value={item?.sWidth}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sWidth")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[3].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <Select
                          optionLabelProp="label"
                          className="mySelectsDouble"
                          style={{ width: 60.8, color: "#000" }}
                          defaultValue={options.length ? options[0].value : ""}
                          value={item?.sTypeName || ""}
                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 0)}
                          onDropdownVisibleChange={async open => {
                            if (open) {
                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                            }
                          }}
                        >
                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                        </Select>
                        <Input
                          value={item?.sQuantity}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sQuantity")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[4].showName}
                        />
                        <Input
                          value={item?.sOffset}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sOffset")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[5].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <div className={styles.text} style={{ width: 61 }}>
                          {doublePrompt[1].showName}
                        </div>
                        <Input
                          value={item?.cLength}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cLength")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[2].showName}
                        />
                        <Input
                          value={item?.cWidth}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cWidth")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[3].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <Select
                          optionLabelProp="label"
                          className="mySelectsDouble"
                          style={{ width: 60.8, color: "#000" }}
                          defaultValue={options.length ? options[0].value : ""}
                          value={item?.cTypeName || ""}
                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 1)}
                          onDropdownVisibleChange={async open => {
                            if (open) {
                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                            }
                          }}
                        >
                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                        </Select>
                        <Input
                          value={item?.cQuantity}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cQuantity")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[4].showName}
                        />
                        <Input
                          value={item?.cOffset}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cOffset")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[5].showName}
                        />
                      </div>
                    </div>
                  ) : (
                    <div className={styles.boxInput}>
                      <Input
                        value={item?.showName}
                        onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                        readOnly={!item?.isEditable}
                        className={styles.text}
                      />
                      <Input
                        value={item?.value}
                        onChange={e => handleChange(e, findIndexBySname(item.sName))}
                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                        readOnly={!item?.isEditable}
                        style={{ width: " 80%" }}
                      />
                    </div>
                  )}
                </div>
              </div>
            ))}
          {boxType === "8" &&
            leftDoubleBoxList.map((item, index) => (
              <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{doubleTitlieList[index + 3]}</div>

                {index !== 0 ? (
                  <Select
                    optionLabelProp="label"
                    className="mySelects"
                    style={{ width: 180 }}
                    defaultValue={options.length ? options[0].value : ""}
                    onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
                    onDropdownVisibleChange={async open => {
                      if (open) {
                        props.getSqlOptions(index + 13); // 在下拉菜单打开时调用 getSqlOptions
                      }
                    }}
                  >
                    {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                  </Select>
                ) : (
                  ""
                )}
                <div className={styles.boxInput}>
                  {item?.selectImage ? (
                    <img
                      // src={item?.selectImage}
                      src={item?.selectImage ? getImage(item?.selectImage) : ''}
                      alt={item.value}
                      style={{
                        width: 40,
                        height: 30,
                        marginRight: 8,
                        position: "absolute",
                        left: 20,
                        top: -35,
                        zIndex: 10,
                      }}
                    />
                  ) : (
                    ""
                  )}
                  <Input
                    value={item?.showName}
                    onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    className={styles.text}
                  />
                  <Input
                    value={item?.value}
                    onChange={e => handleChange(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    style={{ width: " 80%" }}
                  />
                </div>
              </div>
            ))}
        </div>
        <div className={styles.boxRight} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
          {boxType !== "8" &&
            rightBoxList.map((item, index) => (
              <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{item.showNames}</div>

                <Select
                  optionLabelProp="label"
                  className="mySelects"
                  style={{ width: 180 }}
                  defaultValue={options.length ? options[0].value : ""}
                  onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
                  onDropdownVisibleChange={async open => {
                    if (open) {
                      props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
                    }
                  }}
                >
                  {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                </Select>
                <div className={styles.boxInput}>
                  {item?.selectImage ? (
                    <img
                      // src={item?.selectImage}
                      src={item?.selectImage ? getImage(item?.selectImage) : ''}
                      alt={item.value}
                      style={{
                        width: 40,
                        height: 30,
                        marginRight: 8,
                        position: "absolute",
                        left: 20,
                        top: -35,
                        zIndex: 10,
                      }}
                    />
                  ) : (
                    ""
                  )}
                  {item.type && item.type.includes("09") ? (
                    <div>
                      <div className={styles.boxInput}>
                        <div className={styles.text} style={{ width: 61 }}>
                           {doublePrompt[0].showName}
                        </div>
                        <Input
                          value={item?.sLength}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sLength")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[2].showName}
                        />
                        <Input
                          value={item?.sWidth}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sWidth")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[3].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <Select
                          optionLabelProp="label"
                          className="mySelectsDouble"
                          style={{ width: 60.8, color: "#000" }}
                          defaultValue={options.length ? options[0].value : ""}
                          value={item?.sTypeName || ""}
                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 0)}
                          onDropdownVisibleChange={async open => {
                            if (open) {
                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                            }
                          }}
                        >
                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                        </Select>
                        <Input
                          value={item?.sQuantity}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sQuantity")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[4].showName}
                        />
                        <Input
                          value={item?.sOffset}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "sOffset")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[5].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <div className={styles.text} style={{ width: 61 }}>
                          {doublePrompt[1].showName}
                        </div>
                        <Input
                          value={item?.cLength}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cLength")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[2].showName}
                        />
                        <Input
                          value={item?.cWidth}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cWidth")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[3].showName}
                        />
                      </div>
                      <div className={styles.boxInput}>
                        <Select
                          optionLabelProp="label"
                          className="mySelectsDouble"
                          style={{ width: 60.8, color: "#000" }}
                          defaultValue={options.length ? options[0].value : ""}
                          value={item?.cTypeName || ""}
                          onSelect={(value, option) => handleSelects(value, option, findIndexBySname(item.sName), 0, 1)}
                          onDropdownVisibleChange={async open => {
                            if (open) {
                              props.getSqlOptions(null); // 在下拉菜单打开时调用 getSqlOptions
                            }
                          }}
                        >
                          {!loading ? options.map(option => renderOptionWithText(option)) : ""}
                        </Select>
                        <Input
                          value={item?.cQuantity}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cQuantity")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[4].showName}
                        />
                        <Input
                          value={item?.cOffset}
                          onChange={e => handleChange(e, findIndexBySname(item.sName), "cOffset")}
                          onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                          onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                          readOnly={!item?.isEditable}
                          style={{ width: 60 }}
                          placeholder={doublePrompt[5].showName}
                        />
                      </div>
                    </div>
                  ) : (
                    <div className={styles.boxInput}>
                      <Input
                        value={item?.showName}
                        onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                        readOnly={!item?.isEditable}
                        className={styles.text}
                      />
                      <Input
                        value={item?.value}
                        onChange={e => handleChange(e, findIndexBySname(item.sName))}
                        onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                        onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                        readOnly={!item?.isEditable}
                        style={{ width: " 80%" }}
                      />
                    </div>
                  )}
                </div>
              </div>
            ))}
          {boxType === "8" &&
            rightDoubleBoxList.map((item, index) => (
              <div key={index + 6} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
                <div className={styles.boxTitle}>{doubleTitlieList[index + 6]}</div>

                {index !== 0 ? (
                  <Select
                    optionLabelProp="label"
                    className="mySelects"
                    style={{ width: 180 }}
                    defaultValue={options.length ? options[0].value : ""}
                    onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
                    onDropdownVisibleChange={async open => {
                      if (open) {
                        props.getSqlOptions(index + 15); // 在下拉菜单打开时调用 getSqlOptions
                      }
                    }}
                  >
                    {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                  </Select>
                ) : (
                  ""
                )}
                <div className={styles.boxInput}>
                  {item?.selectImage ? (
                    <img
                      // src={item?.selectImage}
                      src={item?.selectImage ? getImage(item?.selectImage) : ''}
                      alt={item.value}
                      style={{
                        width: 40,
                        height: 30,
                        marginRight: 8,
                        position: "absolute",
                        left: 20,
                        top: -35,
                        zIndex: 10,
                      }}
                    />
                  ) : (
                    ""
                  )}

                  <Input
                    value={item?.showName}
                    onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    className={styles.text}
                  />
                  <Input
                    value={item?.value}
                    onChange={e => handleChange(e, findIndexBySname(item.sName))}
                    onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                    onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                    readOnly={!item?.isEditable}
                    style={{ width: " 80%" }}
                  />
                </div>
              </div>
            ))}
        </div>
        <div className={styles.boxBottom} style={{ top: `${typesTop ? "240px" : "130px"}` }}>
          <div className={styles.svgBox}>
            <SvgBox {...svgBoxProps} />
          </div>
          <div className={styles.content}>
            {tableColum && tableColum.length
              ? tableColum.map((item, index) => {
                const uniqueIndex = index + 9;
                return (
                  <div key={uniqueIndex} className={styles.boxFlex}>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: "120px" }}>
                        {item.showName}
                      </div>
                      <Input
                        value={boxList[uniqueIndex]?.value}
                        onChange={e => handleChange(e, uniqueIndex)}
                        onFocus={e => handleFocus(e, uniqueIndex)}
                        onBlur={e => handleBlur(e, uniqueIndex)}
                        readOnly={!boxList[uniqueIndex]?.isEditable}
                        style={{ width: " 80%" }}
                      />
                    </div>
                  </div>
                );
              })
              : ""}
            {boxBodyList && boxBodyList.length
              ? boxBodyList.map((item, index) => {
                const uniqueIndex = index + 9 + tableColum.length;

                return (
                  <div key={uniqueIndex} className={styles.boxFlex}>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: "120px" }}>
                        {item.showName}
                      </div>
                      {boxList[uniqueIndex]?.selectImage ? (
                        <img
                          // src={boxList[uniqueIndex]?.selectImage}
                          src={boxList[uniqueIndex]?.selectImage ? getImage(boxList[uniqueIndex]?.selectImage) : ''}
                          alt={boxList[uniqueIndex].value}
                          style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
                        />
                      ) : (
                        ""
                      )}
                      {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
                      <Select
                        optionLabelProp="label"
                        className="mySelects"
                        style={{ width: "80%" }}
                        defaultValue={boxList[uniqueIndex]?.value}
                        onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
                        onDropdownVisibleChange={async open => {
                          if (open) {
                            props.getSqlOptions(10); // 盒身
                          }
                        }}
                      >
                        {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                      </Select>
                    </div>
                  </div>
                );
              })
              : ""}
            <div className={styles.boxFlexs}>
              {tableDataList && tableDataList.length && boxType !== "8"
                ? tableDataList.map((item, index) => {
                  const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;

                  return (
                    <div key={uniqueIndex} className={styles.boxInputs}>
                      <div className={styles.text}>{item.sName}</div>
                      <Input
                        value={boxList[uniqueIndex]?.value}
                        onChange={e => handleChange(e, uniqueIndex)}
                        onFocus={e => handleFocus(e, uniqueIndex)}
                        onBlur={e => handleBlur(e, uniqueIndex)}
                        readOnly={!boxList[uniqueIndex]?.isEditable}
                        style={{ width: " 60%" }}
                      />
                    </div>
                  );
                })
                : ""}
            </div>

            <div className={styles.boxFlexs}>
              {doubleLayerList && doubleLayerList.length && boxType === "8"
                ? doubleLayerList.map((item, index) => {
                  const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length + tableDataList.length;

                  return (
                    <div key={uniqueIndex} className={styles.boxInputs}>
                      <div className={styles.text}>{item.sName}</div>
                      <Input
                        value={boxList[uniqueIndex]?.value}
                        onChange={e => handleChange(e, uniqueIndex)}
                        onFocus={e => handleFocus(e, uniqueIndex)}
                        onBlur={e => handleBlur(e, uniqueIndex)}
                        readOnly={!boxList[uniqueIndex]?.isEditable}
                        style={{ width: " 60%" }}
                      />
                    </div>
                  );
                })
                : ""}
            </div>
          </div>
        </div>
      </div>
    </AntdDraggableModal>
  );
};

export default CommonBase(BoxDesignCompontent);