/* eslint-disable */
import * as commonFunc from "@/components/Common/commonFunc";
import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined, VerticalLeftOutlined, VerticalRightOutlined } from "@ant-design/icons";
import { message, Modal } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { ArrowRightOutlined } from "@ant-design/icons";
import DynamicSVG from "../../Common/BoxDesignCompontent/svg";
import styles from "./index.less";

const Typesetting = props => {
  const {
    radioValue, //
    app,
    onSaveStates,
    boxModel,
    slaveRowData,
    state,
    onSaveDPartsLength,
    boxWidth,
    boxHeight,
    textSize,
    isMobile,
  } = props;
  const hasExecutedRef = useRef(true);
  if (!slaveRowData) return;
  let {
    dSBLB = 0, // 上边留白
    dXBLB = 0, // 下边留白
    dZBLB = 0, // 左边留白
    dYBLB = 0, // 右边留白
    // dXBJJ, // 上边距
    dXBJJ = 0, // 下边距
    // dYBJJ, // 左边距
    dYBJJ = 0, // 右边距
    sLengthFormula, // 盒长公式
    sWidthFormula, // 盒宽公式
    sPackDetailPath,
    sColumnNameConfig,
    bAdvancedSetting, // 高级设置
    sSvgPath,
    dL = 0,
    dW = 0,
    dD = 0,
  } = slaveRowData;
  const { masterData, selectedNode, slaveData } = state;
  const { sBillNo } = props.masterData

  useEffect(() => {
    if (sBillNo) {
      if (hasExecutedRef.current) {
        hasExecutedRef.current = false
      } else {
        // 第一次跳过
        hasExecutedRef.current = true;
      }
    } else {
      hasExecutedRef.current = false
    }
  }, [sBillNo]);
  if (!masterData) return;
  // 如果是卷筒类 那么上下左右留白等于左留白
  if (selectedNode && selectedNode.sTypeKey === "juantong") {
    dXBLB = dSBLB;
    dZBLB = 0;
    dYBLB = 0;
  }
  // 生成盒子图片
  const [boxKey, setBoxKey] = useState(new Date().getTime());
  const [boxKeys, setBoxKeys] = useState(new Date().getTime());
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalWidth, setModalWidth] = useState(1000);
  const [modalHeight, setModalHeight] = useState(800);
  const [modalBoxWidth, setModalBoxWidth] = useState(1200);
  const [scale, setScale] = useState(1);
  const [materialLength, setMaterialLength] = useState(0);
  const [materialWidth, setMaterialWidth] = useState(0);
  const [dProductQty, setDProductQty] = useState(0);
  const [materialName, setMaterialName] = useState("");
  // const [dMaterialsKQty, setDMaterialsKQty] = useState(0);
  const [dPartsLength, setDPartsLength] = useState(0);
  const [newDHorizontalType, setNewDHorizontalType] = useState(0);
  const [newDPortraitType, setNewDPortraitType] = useState(0);
  const [oldVariables, setOldVariables] = useState("");
  const [innerWidth, setInnerWidth] = useState(0);
  const [innerHeight, setInnerHeight] = useState(0);
  // 横板
  let { dHorizontal, dPortrait, dHorizontalType, dPortraitType } = slaveRowData;
  // 使用 useRef 获取 DOM 元素
  const boxRef = useRef(null);
  const boxsRef = useRef(null);
  const typesettingBox = useRef(null);
  const typesettingBoxs = useRef(null);
  const svgBox = useRef(null);
  const svgBoxs = useRef(null);
  // 获取外层盒子尺寸
  const clientWidth = boxWidth || 370;
  const clientHeight = boxHeight || 300;
  // 动态计算边距的总和
  const totalLeftMargin = dZBLB + dYBLB;
  const totalTopMargin = dSBLB + dXBLB;
  // sMachineStyle
  const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
  const maxWidth = Number(slaveDataDetail?.dMaxLength);
  const maxHeight = Number(slaveDataDetail?.dMaxWidth);

  let outerWidth = Number(slaveDataDetail?.dMaxLength); // 默认取最大上机尺寸
  let outerHeight = Number(slaveDataDetail?.dMaxWidth); // 默认取最大上机尺寸
  // dHorizontal = 1;
  // 如果需要自定义排版数
  // 确认是竖向排列还是横向排列
  const L = slaveRowData.dL ? Number(dL) : Number(masterData?.dLength) || 0;
  const W = slaveRowData.dW ? Number(dW) : masterData?.dWidth || 0;
  const H = slaveRowData.dD ? Number(dD) : masterData?.dWidth || 0;
  const D = slaveRowData.dD ? Number(dD) : masterData?.dHeight || 0;
  // 动态计算公式值
  const evaluateFormula = (formula, variables) => {
    if (!formula) return 0; // 如果公式为空，返回0
    try {
      // 提取公式中的变量名
      const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || [];
      // 构建函数参数
      const params = variableNames.join(",") + ",Math";
      // 替换公式中的变量为实际值
      const func = new Function(params, `return ${formula}`);
      // 提取变量值
      const args = variableNames.map(name => Number(variables[name]) || 0);
      // 执行函数并返回结果
      return func(...args, Math);
    } catch (error) {
      return 0;
    }
  };

  // 计算公式值
  const variables = {
    L,
    W,
    H,
    D,
    ...props.slaveRowData,
  };
  const { sStripType = 0 } = props.state.selectedNode;
  let boxList = [];
  if (sColumnNameConfig) {
    const slaveNewData = slaveRowData.upAbleConfigsExtra || JSON.parse(slaveRowData.sColumnNameConfig);
    // 处理为双盒的部件
    const tables = [
      { name: "盒型类别", value: slaveRowData.sBoxType, type: null },
      { name: "盒身", value: slaveRowData.sBoxBody, type: slaveRowData.sTypes },
      { name: "盒长", value: L, type: null },
      { name: "盒宽", value: W, type: null },
      { name: "盒高", value: D, type: null },
    ];
    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" },
    ];
    slaveNewData.forEach(x => {
      let key = 0;
      if (x.sAssignFormula) {
        key = slaveRowData[x.sName];
      } else {
        key = slaveRowData[x.sName];
      }
      boxList.push({
        value: key,
        sName: titleList1.find(item => item.value === x.sName)?.name || "",
        isEditable: true,
        isSelect: false,
        selectValue: null,
        selectLabel: "",
        selectImage: null,
        type: x.sTypes || null,
        show: true,
        sCode: titleList1.find(item => item.value === x.sName)?.value || "",
        showName: x.showName, // 参数名称
        sLength: x.iSLength,
        sWidth: x.iSWidth,
        sType: x.iSType,
        sTypeName: Number(x.iSType) === 0 ? "矩形" : "梯形",
        sOffset: x.sSOffset,
        sQuantity: x.iSQuantity,
        cLength: x.iCLength,
        cWidth: x.iCWidth,
        cType: x.iCType,
        cTypeName: Number(x.iCType) === 0 ? "矩形" : "梯形",
        cOffset: x.sCOffset,
        cQuantity: x.iCQuantity,
      });
    });
    tables.forEach(x => {
      boxList.push({
        value: x.value,
        sName: x.name,
        isEditable: true,
        isSelect: false,
        selectValue: null,
        selectLabel: "",
        selectImage: null,
        type: x.type || null,
        show: true,
        showName: x.name, // 参数名称
      });
    });
  }

  const result = boxList?.reduce((acc, { sCode, value }) => ({ ...acc, [sCode]: Number(value) }), {});

  // 计算表达式结果
  const variabless = {
    ...variables,
    ...result,
  };
  Object.keys(variabless).forEach(key => {
    if (variabless[key] === null || variabless[key] === undefined || variabless[key] === "") {
      variabless[key] = 0;
    }
  });
  let DisableMateriallIcon = L ? sPackDetailPath : null;
  function calculateCupUnfoldDimensions(D, d, h) {

    const R1 = D / 2;  // 上口半径
    const R2 = d / 2;  // 底部半径
    if (D === d) {
      const paperCup = commonFunc.showLocalMessage(props, "paperCup", "L不能小于等于W!");
      message.error(paperCup);
      return {
        width: 0,
        height: 0
      }
    }
    // 1. 计算母线长 l
    const deltaR = R1 - R2;
    const l = Math.sqrt(deltaR * deltaR + h * h);

    // 2. 计算外半径 R 和内半径 r
    const R = (R1 * l) / deltaR;  // 外半径
    const r = R - l;              // 内半径

    // 3. 计算圆心角 θ（弧度）
    const theta_rad = (2 * Math.PI * R1) / R;
    const halfTheta = theta_rad / 2;

    // 4. 计算弦长（水平宽度）
    const chord = 2 * R * Math.sin(halfTheta);

    // 5. 展开图垂直高度
    const y_top = -R;  // 外弧中点（最高点）
    const y_inner_end = -r * Math.cos(halfTheta);
    const verticalHeight = y_inner_end - y_top;

    // ✅ 新增：计算关键点坐标（以圆心为原点，y 向上为正）
    // 注意：数学坐标系中，角度从 x 轴开始逆时针，但我们希望顶部在 y 轴负方向
    // 所以我们把角度偏移 -90°（即 -π/2），让 0° 指向正上方

    const angleOffset = -Math.PI / 2; // 使 0° 指向顶部

    const points = {
      outerCenter: {
        x: R * Math.cos(halfTheta + angleOffset),
        y: R * Math.sin(halfTheta + angleOffset)
      },
      outerLeft: {
        x: R * Math.cos(-halfTheta + angleOffset),
        y: R * Math.sin(-halfTheta + angleOffset)
      },
      outerRight: {
        x: R * Math.cos(halfTheta + angleOffset),
        y: R * Math.sin(halfTheta + angleOffset)
      },
      innerLeft: {
        x: r * Math.cos(-halfTheta + angleOffset),
        y: r * Math.sin(-halfTheta + angleOffset)
      },
      innerRight: {
        x: r * Math.cos(halfTheta + angleOffset),
        y: r * Math.sin(halfTheta + angleOffset)
      },
      // 也可以计算顶部中点（0° 方向）
      topCenter: {
        x: 0,
        y: -R  // 正上方
      },
      bottomLeft: {
        x: -chord / 2,
        y: -r * Math.cos(halfTheta)
      },
      bottomRight: {
        x: chord / 2,
        y: -r * Math.cos(halfTheta)
      }
    };

    // 如果你需要用于 SVG（y 向下为正），可以转换
    const pointsForSVG = Object.keys(points).reduce((acc, key) => {
      acc[key] = {
        x: points[key].x,
        y: -points[key].y  // 反转 y 轴
      };
      return acc;
    }, {});

    return {
      width: chord,
      height: verticalHeight,
      R, r, l,
      theta_deg: (theta_rad * 180) / Math.PI,
      points,           // 数学坐标系（y 向上）
      pointsForSVG,     // SVG 坐标系（y 向下）
      chord,
      verticalHeight
    };
  }
  // 盒子展长展开公式计算
  // 在 useEffect 内部
  useEffect(() => {
    if (Number(slaveRowData.sTypes) === 9) {
      if (L > 0 && W > 0 && H > 0) {
        const lengths = evaluateFormula(sLengthFormula, variabless)
        const widths = evaluateFormula(sWidthFormula, variabless)
        const { width, height } = calculateCupUnfoldDimensions(lengths, widths, D);
        // 确保新值与旧值不同时才更新
        if (width && height) {
          setInnerWidth(Number(width.toFixed(2)));
          setInnerHeight(Number(height.toFixed(2)));
        }
      }
    } else {
      // 计算其他类型的盒子尺寸
      let newWidth = slaveRowData.sTypes === "6" ? evaluateFormula(sWidthFormula, variabless) : evaluateFormula(sLengthFormula, variabless);
      let newHeight = slaveRowData.sTypes === "6" ? evaluateFormula(sLengthFormula, variabless) : evaluateFormula(sWidthFormula, variabless);
      setInnerWidth(newWidth);
      setInnerHeight(newHeight);
    }
  }, [slaveRowData.sTypes, L, W, H, D, sLengthFormula, sWidthFormula, variabless]);

  const { sSettingMethod, sSGroupOffset, iFAngle, iSAngle, sSecondorizontalOffset, sSecondLongitudinalOffset } = radioValue ? radioValue : {};
  const dFWidthOffset = evaluateFormula(radioValue?.sFWidthOffset, variabless); // 首盒纵向偏移
  const dFLengthOffset = evaluateFormula(radioValue?.sFLengthOffset, variabless); // 首盒横向偏移
  const dSWidthOffset = evaluateFormula(radioValue?.sSWidthOffset, variabless); // 次盒纵向偏移
  const dSLengthOffset = evaluateFormula(radioValue?.sSLengthOffset, variabless); // 次盒横向偏移
  const boxLengthOffset = evaluateFormula(sSecondorizontalOffset, variabless); // 第二列横向偏移
  const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移
  const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下'
  const reference = sSGroupOffset === "首盒"; // 第三列参考
  // 计算内层盒子尺寸 加上间距
  let jInnerHeight = innerHeight;
  let jInnerWidth = innerWidth;
  let dSvgBoxWidth = innerWidth;
  let dSvgBoxHeight = innerHeight;
  const isRrotate = iFAngle === 90 || iFAngle === 270 || iSAngle === 90 || iSAngle === 270;
  if (iFAngle === 90 || iFAngle === 270 || iSAngle === 90 || iSAngle === 270) {
    jInnerHeight = innerWidth;
    jInnerWidth = innerHeight;
  }
  if (state.selectedNode.sTypeKey === "kapai" || state.selectedNode.sTypeKey === "juantong") {
    jInnerHeight = innerHeight;
    jInnerWidth = innerWidth;
  }

  const innerHeightCombined =
    (isVertical ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset)) + dXBJJ; // 计算内层盒子高度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值  从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
  // 计算内层盒子宽度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值  从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
  const innerWidthCombined =
    (isVertical ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset) : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset);
  
  const style = {
    width: `${outerWidth}px`,
    height: `${outerHeight}px`,
    backgroundColor: "#f3f3f3",
    position: "relative", // 设置外层 div 为相对定位
  };
  // 加上间距后的最大盒子长宽 计算每列可以放多少个组合 需要计算间距
  // 每个盒子加上边距 和第二组偏移量 如果根据次盒再加上次盒偏移量
  const dSWidthOffsetCombined = innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset);
  let cols = dSWidthOffsetCombined === 0 ? 0 : Math.floor(outerWidth / dSWidthOffsetCombined);
  const rowsCombined = innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset);
  let rows = rowsCombined === 0 ? 0 : Math.floor(outerHeight / rowsCombined);
  let colsMaxLength =
    cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ) + dZBLB + dYBLB - (reference ? 0 : dSLengthOffset);

  let rowsMaxLength =
    rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ) + dSBLB + dXBLB - (reference ? 0 : dSWidthOffset);
  while (colsMaxLength > outerWidth && cols > 0) {
    cols = cols - 1;
    colsMaxLength = cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset) + dYBJJ);
  }

  while (rowsMaxLength > outerHeight && rows > 0) {
    rows = rows - 1;
    rowsMaxLength = rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset) + dXBJJ);
  }
  // 最大上机长 上机宽 开料尺寸
  // 计算剩余空间 每组都算上偏移量 那么剩余需要加上后面偏移的总量
  const remainingWidth = outerWidth - colsMaxLength + (boxLengthOffset + (reference ? 0 : dSLengthOffset));
  const remainingHeight = outerHeight - rowsMaxLength + (boxWidthOffset + (reference ? 0 : dSWidthOffset));
  //剩余量能不能放一下单独一个
  const commonHeightCheck = remainingHeight > jInnerHeight + dXBJJ;
  const commonWidthCheck = remainingWidth > jInnerWidth + dYBJJ;
  const isCustomized = bAdvancedSetting;
  let remaining = isVertical ? commonHeightCheck : commonWidthCheck;
  // 判断
  // const remaining = false;
  const isOdd = num => {
    return num % 2 !== 0;
  };

  // 是否定制
  if (isCustomized) {
    if (isVertical) {
      cols = dHorizontal || 0;
      rows = dPortrait ? Math.trunc(dPortrait / 2) : 0;
      if (isOdd(dPortrait)) {
        remaining = true;
      } else {
        remaining = false;
      }
    } else {
      cols = dHorizontal ? Math.trunc(dHorizontal / 2) : 0;
      rows = dPortrait || 0;
      if (isOdd(dHorizontal)) {
        remaining = true;
      } else {
        remaining = false;
      }
    }
  }
  const handleSaveState = (data) => {
    setInnerWidth(Number(data.width.toFixed(2)))
    setInnerHeight(Number(data.height.toFixed(2)))

  }
  const svgProps = {
    ...props,
    boxList,
    dSvgBoxWidth,
    dSvgBoxHeight,
    showNew: 2,
  };
  const { dZTBW } = variabless;
  const createDiv = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
    <div
      key={`${col}-${row}-${index}`}
      style={{
        width: `${jInnerWidth}px`,
        height: `${jInnerHeight}px`,
        // backgroundColor: "#fff",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        left: `${leftPosition}px`,
        top: `${topPosition}px`,

        zIndex: 10,
      }}
      onDoubleClick={() => {
        onClick();
      }}
    >
      <div style={{ transform: `rotateZ(${offsetZ}deg)` }}>
        {!sSvgPath ? <DynamicSVG {...svgProps} onSaveStates={handleSaveState} /> : <img src={sSvgPath} width={jInnerWidth} height={jInnerHeight} />}
        {/* <DynamicSVG {...svgProps} /> */}
      </div>
    </div>
  );

  const createBox = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
    <div
      key={`${col}-${row}-${index}`}
      style={{
        width: `${innerWidthCombined}px`,
        height: `${innerHeightCombined}px`,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        overflow: "hidden",
        left: `${calculateLeftPosition(col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset)}px`,
        top: `${calculateTopPosition(row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ)}px`,
        zIndex: 10,
      }}
      onDoubleClick={() => {
        onClick();
      }}
    >
      <div
        key={`${col}-${row}-${index}`}
        style={{
          width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
          height: `${iFAngle === 90 || iFAngle === 270 ? jInnerHeight : innerHeight}px`,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          position: "absolute",
          left: `${dFLengthOffset}px`,
          top: `${iFAngle === 90 || iFAngle === 270 ? dFLengthOffset : dFWidthOffset}px`,
        }}
      >
        <div style={{ transform: `rotateZ(${iFAngle}deg)` }}>
          {!sSvgPath ? (
            <DynamicSVG {...svgProps} onSaveStates={handleSaveState} />
          ) : (
            <img
              src={sSvgPath}
              width={`${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`}
              height={`${iFAngle === 90 || iFAngle === 270 ? jInnerHeight : innerHeight}px`}
            />
          )}
        </div>
      </div>
      {/* 次盒 */}
      <div
        key={`${col}-${row}-${index}-1`}
        style={{
          width: `${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`,
          height: `${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          position: "absolute",
          left: `${isVertical
            ? dSLengthOffset
            : iSAngle === 90 || iSAngle === 270
              ? innerHeight + dFLengthOffset + dSLengthOffset + dYBJJ
              : innerWidth + dFLengthOffset + dSLengthOffset + dYBJJ
            }px`,
          top: `${isVertical ? jInnerHeight + dFWidthOffset + dSWidthOffset + dXBJJ : iSAngle === 90 || iSAngle === 270 ? dSWidthOffset : dSWidthOffset
            }px`,
        }}
      >
        <div style={{ transform: `rotateZ(${iSAngle}deg)` }}>
          {!sSvgPath ? (
            <DynamicSVG {...svgProps} onSaveStates={handleSaveState} />
          ) : (
            <img
              src={sSvgPath}
              width={`${iSAngle === 90 || iSAngle === 270 ? jInnerWidth : innerWidth}px`}
              height={`${iSAngle === 90 || iSAngle === 270 ? jInnerHeight : innerHeight}px`}
            />
          )}
        </div>
      </div>
    </div>
  );
  const createBoxOne = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
    <div
      key={`${col}-${row}-${index}`}
      style={{
        width: `${jInnerWidth}px`,
        height: `${jInnerHeight}px`,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        overflow: "hidden",
        left: `${calculateLeftPosition(col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset)}px`,
        top: `${calculateTopPosition(row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ)}px`,
        zIndex: 10,
      }}
      onDoubleClick={() => {
        onClick();
      }}
    >
      <div
        key={`${col}-${row}-${index}`}
        style={{
          width: `${jInnerWidth}px`,
          height: `${jInnerHeight}px`,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          position: "absolute",
          left: `${dFLengthOffset}px`,
          top: `${dFWidthOffset}px`,
        }}
      >
        {/* <img src={icon} width="100%" height="100%" /> */}
        {/* {isSvg ? <DynamicSVG {...props} /> : <img src={icon} width="100%" height="100%" />} */}
        <div style={{ transform: `rotateZ(${iFAngle}deg)` }}>
          {!sSvgPath ? <DynamicSVG {...svgProps} onSaveStates={handleSaveState} /> : <img src={sSvgPath} width={`${innerWidth}px`} height={`${innerHeight}px`} />}
        </div>
      </div>
    </div>
  );
  // 计算左偏移
  const calculateLeftPosition = (col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset) => {
    if (isVertical) {
      if (reference) {
        return col === 0 ? leftPosition : leftPosition + (dYBJJ * col);
      }
      return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col;
    } else {
      if (reference) {
        return col === 0 ? leftPosition : leftPosition + (dYBJJ * col);
      }
      return col === 0 ? leftPosition : leftPosition + (boxLengthOffset + dYBJJ) * col + dSLengthOffset * col;
    }
  };
  // 计算上偏移
  const calculateTopPosition = (row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ) => {
    if (isVertical) {
      if (reference) {
        return row === 0 ? topPosition : topPosition + boxWidthOffset * row;
      } else {
        return row === 0 ? topPosition : topPosition + (dSWidthOffset + boxWidthOffset) * row;
      }
    } else {
      if (reference) {
        return row === 0 ? 0 : topPosition + boxWidthOffset * row;
      } else {
        return row === 0 ? topPosition : topPosition + (dSWidthOffset + boxWidthOffset) * row;
      }
    }
  };
  const scaleXD = (clientWidth - 50) / (outerWidth + 110);
  const scaleYD = (clientHeight - 5) / (outerHeight + 90);
  useEffect(() => {
    // 计算缩放比例
    // setBoxKey(new Date().getTime());
    setTimeout(() => {
      const scaleX = (clientWidth - 50) / (outerWidth + 110);
      const scaleY = (clientHeight - 5) / (outerHeight + 90);
      const newScale = Math.min(scaleX, scaleY);
      setScale(newScale);
      if (boxRef.current) {
        boxRef.current.style.transform = `scale(${newScale}, ${newScale})`;
        boxRef.current.style.transformOrigin = "top left";
      }
    }, 0);
  }, [radioValue, slaveRowData, masterData, selectedNode, slaveData]);
  // 生成里层 div 的数组
  const innerDivs = [];
  // 生成盒子
  if (cols === 0 || rows === 0) {
    if (cols > 0) {
      for (let col = 0; col < cols; col++) {
        const leftPosition = col * (innerWidthCombined + boxLengthOffset);
        const topPosition = 0 * (innerHeightCombined + boxWidthOffset);
        innerDivs.push(createBoxOne(col, 0, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
      }
    }
    if (rows > 0) {
      for (let row = 0; row < rows; row++) {
        const leftPosition = 0 * (innerWidthCombined + boxLengthOffset);
        const topPosition = row * (innerHeightCombined + boxWidthOffset);
        innerDivs.push(createBoxOne(0, row, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
      }
    }
  } else {
    let hasPushed = false; // 标志变量
    for (let col = 0; col < cols; col++) {
      for (let row = 0; row < rows; row++) {
        const leftPosition = col * (innerWidthCombined + boxLengthOffset);
        const topPosition = row * (innerHeightCombined + boxWidthOffset + dXBJJ);
        innerDivs.push(createBox(col, row, 1, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
      }
      // 如果可以放下首盒\
      if (remaining && isVertical) {
        let leftPosition = 0;
        let topPosition = 0;
        if (reference) {
          // 是否首盒
          // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
          leftPosition = col * (innerWidthCombined + boxLengthOffset) + dFLengthOffset;
          topPosition = rows * (innerHeightCombined + boxWidthOffset) + dFWidthOffset;
        } else {
          leftPosition = col * (innerWidthCombined + boxLengthOffset);
          topPosition = rows * (innerHeightCombined + boxWidthOffset);
        }
        innerDivs.push(createBoxOne(col, rows, 3, leftPosition, topPosition + dXBJJ, iFAngle, DisableMateriallIcon));
      }
    }
    if (remaining && !isVertical) {
      for (let index = 0; index < rows; index++) {
        // 先默认为首盒参考
        let topPosition = 0;
        let leftPosition = 0;
        if (reference) {
          topPosition = index * (innerHeightCombined + boxWidthOffset) + dFWidthOffset;
          leftPosition = cols * (innerWidthCombined + boxLengthOffset);
        } else {
          topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset) + dFWidthOffset;
          leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset + dYBJJ);
        }
        innerDivs.push(createDiv(cols - 1, index, 3, leftPosition, topPosition, iFAngle, DisableMateriallIcon));
      }
    }
  }
  // 判断展开长展开宽是否变化
  if (dPartsLength !== innerWidth && !innerDivs.length) {
    setDPartsLength(innerWidth);
    onSaveDPartsLength(innerWidth, innerHeight, slaveData);
  }
  const propsData = innerDivs[innerDivs.length - 1];
  const propsDataFirst = innerDivs[0];
  let openEdition = 0;
  if (propsData && L) {
    const { dWlcd, sBillNo } = slaveRowData;

    const sMaterialsName = slaveData.find(x => x.sTreeNodeName === selectedNode.showName && x.sBoxModel === props.boxModel).sMaterialsName;
    const propsDataLeft = Number(propsData.props.style.left.slice(0, -2));
    // 长需要找出最大的
    const propsDataWidth = Number(propsData.props.style.width.slice(0, -2));
    const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
    const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
    // 判断列是否是单独的

    let newMaterialLength = parseFloat(propsDataLeft + (remaining ? jInnerWidth : innerWidthCombined) + dZBLB + dYBLB).toFixed(2); // 原纸长
    const newMaterialWidth = parseFloat(propsDataTop + propsDataHeight + dSBLB + dXBLB - (isVertical ? 0 : rows >= 1 ? (remaining ? 0 : dXBJJ) : 0)).toFixed(2);
    // 如果只有一列的时候去除右边刀位
    if (cols === 1) {
      newMaterialLength = newMaterialLength - dYBJJ
    }
    // 计算开数
    let dSinglePQty = isVertical
      ? remaining
        ? cols + cols * (rows * 2)
        : cols * (rows * 2)
      : remaining
        ? rows + rows * (cols * 2)
        : rows * (cols * 2);

    let dHorizontalType = isVertical ? cols : remaining ? cols * 2 + 1 : cols * 2;
    let dPortraitType = isVertical ? (remaining ? rows * 2 + 1 : rows * 2) : remaining ? rows : rows;
    if (cols === 0 || rows === 0) {
      if (innerDivs.length > 0) {
        if (cols === 0 && rows > 0) {
          dSinglePQty = rows;
          dPortraitType = rows;
          dHorizontalType = 1;
        } else if (rows === 0 && cols > 0) {
          dSinglePQty = cols;
          dHorizontalType = cols;
          dPortraitType = 1;
        }
      }
    }
    const newDProductQty = masterData.dProductQty;
    const dMaterialsKQty = slaveDataDetail.dMaterialsKQty || 1;
    // if (Number(materialLength) < 100) return ''
    if (
      dPartsLength !== innerWidth ||
      newMaterialLength !== materialLength ||
      newMaterialWidth !== materialWidth ||
      materialName !== sMaterialsName ||
      newDHorizontalType !== dHorizontalType ||
      newDPortraitType !== dPortraitType
    ) {
      setMaterialLength(newMaterialLength);
      setMaterialWidth(newMaterialWidth);
      setMaterialName(sMaterialsName);
      setDProductQty(newDProductQty);
      setDPartsLength(innerWidth);
      setNewDHorizontalType(dHorizontalType);
      setNewDPortraitType(dPortraitType);
      setOldVariables(selectedNode.sTypeKey);
      const scaleX = (clientWidth - 50) / (outerWidth + 110);
      const scaleY = (clientHeight - 5) / (outerHeight + 90);
      const newScale = Math.min(scaleX, scaleY);
      onSaveStates(
        newMaterialLength,
        newMaterialWidth,
        slaveData,
        masterData,
        dSinglePQty,
        dMaterialsKQty,
        newDProductQty,
        newScale,
        newMaterialLength,
        newMaterialWidth,
        innerWidth,
        innerHeight,
        dHorizontal,
        dPortrait,
        dHorizontalType,
        dPortraitType
      );
    } else if (dProductQty !== newDProductQty) {
      setDProductQty(newDProductQty);
      // 修改数量时不去动别的数据
      onSaveStates(
        newMaterialLength,
        newMaterialWidth,
        slaveData,
        masterData,
        dSinglePQty,
        dMaterialsKQty,
        newDProductQty,
        1,
        slaveDataDetail.dWlcd,
        slaveDataDetail.dWlkd,
        innerWidth,
        innerHeight,
        dHorizontal,
        dPortrait,
        dHorizontalType,
        dPortraitType
      );
    }
    openEdition = (((newMaterialLength * newMaterialWidth) / (maxWidth * maxHeight)) * 100).toFixed(2);

    setTimeout(() => {
      if (typesettingBox.current) {
        typesettingBox.current.style.backgroundColor = "#b7e0ff";
        // typesettingBox.current.style.margin = [dSBLB, dYBLB, dXBLB, dZBLB].map(item => item + "px").join(" ");
        typesettingBox.current.style.width = newMaterialLength + dYBLB + "px";
        typesettingBox.current.style.height = newMaterialWidth + dXBLB + "px";
        // typesettingBox.current.style.top = dSBLB + "px";
        // typesettingBox.current.style.left = dZBLB + "px";
      }
      if (svgBox.current) {
        svgBox.current.style.width = newMaterialLength + dYBLB + "px";
        svgBox.current.style.height = newMaterialWidth + dXBLB + "px";
      }
      if (svgBoxs.current) {
        svgBoxs.current.style.width = newMaterialLength + dYBLB + "px";
        svgBoxs.current.style.height = newMaterialWidth + dXBLB + "px";
      }
      if (typesettingBoxs.current) {
        typesettingBoxs.current.style.backgroundColor = "#b7e0ff";
        // typesettingBox.current.style.margin = [dSBLB, dYBLB, dXBLB, dZBLB].map(item => item + "px").join(" ");
        typesettingBoxs.current.style.width = newMaterialLength + dYBLB + "px";
        typesettingBoxs.current.style.height = newMaterialWidth + dXBLB + "px";
      }
    }, 100); // 使用 0 延迟，将任务放入事件队列
  }
  const isMax =
    slaveDataDetail?.dMaxLength &&
    Number(slaveDataDetail?.dMaxLength) >= Number(slaveRowData?.dMachineLength) &&
    Number(slaveDataDetail?.dMaxWidth) >= Number(slaveRowData?.dMachineWidth);

  const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length > 0;

  const confirmParam = commonFunc.showLocalMessage(props, "confirmParam", "排版尺寸大于上机尺寸，请确认参数!");
  const isJuantong = selectedNode.sTypeKey === "juantong";
  const OpenVersion = commonFunc.showLocalMessage(props, "OpenVersion", "开版利用率");
  const DoorWidthDirection = commonFunc.showLocalMessage(props, "DoorWidthDirections", "门幅方向");
  if (isCustomized && !isShow) {
    if (isMobile) return;
    message.error(confirmParam);
  }
  const onClick = () => {
    if (isMobile) return;
    setIsModalOpen(true);
    // setBoxKeys(new Date().getTime());
    setTimeout(() => {
      const scaleX = 900 / outerWidth;
      const scaleY = 600 / outerHeight;
      const scales = Math.min(scaleX, scaleY);
      if (boxsRef.current) {
        boxsRef.current.style.transform = `scale(${scales}) translateX(-50%)`;
        boxsRef.current.style.transformOrigin = "top left";
        setModalBoxWidth((outerWidth + totalLeftMargin * 2) * scales);
        setModalHeight(scales > 1 ? scales * modalHeight : (1 + scales) * modalHeight);
      }
      // if(typesettingBox.current) {
      //   typesettingBox.current.style.transform = `scale(${scales})`;
      //   typesettingBox.current.style.transformOrigin = "top left";
      // }
    }, 0);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const getNum =(num)=>{
    return Number(num).toFixed(0);
  }
  return (
    <>
      {isShow ? (
        <div
          key={boxKey}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            zIndex: 10,
            maxHeight: `${clientHeight}`,
            // padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
          }}
        >
          <div style={style} ref={boxRef}>
            <div
              ref={svgBox}
              style={{
                position: "absolute",
                // width: `${isRrotate ?materialWidth: materialLength}px`,
                // height: `${isRrotate ?materialLength : materialWidth}px`,
                marginLeft: `${dZBLB}px`,
                marginTop: `${dSBLB}px`,
                marginRight: `${dYBLB}px`,
                marginBottom: `${dXBLB}px`,
              }}
            >
              {boxList.length ? innerDivs : []}
            </div>
            <div
              ref={typesettingBox}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
              }}
            >
              {materialLength ? (
                <div
                  style={{
                    width: `${materialLength * scaleXD}px`,
                    height: "30px",
                    lineHeight: "30px",
                    position: "absolute",
                    bottom: "-32px",
                    left: 0,
                    fontSize: `${textSize || 11}px`,
                    textAlign: "center",
                    color: "#333",
                    transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
                    transformOrigin: "top left",
                  }}
                >
                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{getNum(materialLength)}</span>
                  <div className={styles.maxWidthLeft}>
                    <VerticalRightOutlined />
                    <div
                      className={styles.maxWidthLeftLine}
                      style={{
                        width: `${materialLength * scaleXD * 0.2}px`,
                        height: "1px",
                        top: "14px",
                        left: "5px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                  <div className={styles.maxWidthRight}>
                    <VerticalLeftOutlined />
                    <div
                      className={styles.maxWidthRightLine}
                      style={{
                        width: `${materialLength * scaleXD * 0.2}px`,
                        height: "1px",
                        top: "14px",
                        right: "5px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                </div>
              ) : null}
              {materialWidth ? (
                <div
                  style={{
                    width: `${30}px`,
                    height: `${materialWidth * scaleYD}px`,
                    position: "absolute",
                    top: 0,
                    right: "-15px",
                    fontSize: `${textSize || 11}px`,
                    lineHeight: `${materialWidth * scaleYD}px`,
                    color: "#333",
                    transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
                    transformOrigin: "top left",
                  }}
                >
                  <span style={{ color: "red", display: "inline-block", width: "30px", textAlign: "center" }}>{getNum(materialWidth)}</span>
                  {isJuantong ? (
                    <span
                      style={{
                        position: "absolute",
                        top: `${(materialWidth * scaleYD) / 2 + 10}px`,
                        textAlign: "center",
                        width: "30px",
                        writingMode: "vertical-rl",
                        color: "red",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        textOrientation: "upright",
                      }}
                    >
                      {DoorWidthDirection}
                    </span>
                  ) : (
                    ""
                  )}
                  {isJuantong ? (
                    <ArrowRightOutlined
                      style={{ position: "absolute", fontSize: "30px", top: `${(materialWidth * scaleYD) / 2}px`, left: "-30px" }}
                    />
                  ) : (
                    ""
                  )}
                  <div
                    style={{
                      position: "absolute",
                      top: `0px`,
                      left: "0",
                      width: "30px",
                    }}
                  >
                    <VerticalRightOutlined
                      style={{
                        position: "absolute",
                        top: "0",
                        left: "11.5px",
                        transform: `rotateZ(${90}deg)`,
                      }}
                    />
                    <div
                      style={{
                        height: `${materialWidth * scaleYD * 0.3}px`,
                        position: "absolute",
                        left: "16px",
                        top: `5px`,
                        width: "1px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                  <div
                    style={{
                      position: "absolute",
                      bottom: `0px`,
                      left: "0",
                      width: "30px",
                    }}
                  >
                    <VerticalLeftOutlined
                      style={{
                        position: "absolute",
                        bottom: "0",
                        left: "11.5px",
                        transform: `rotateZ(${90}deg)`,
                      }}
                    />
                    <div
                      style={{
                        height: `${materialWidth * scaleYD * 0.3}px`,
                        position: "absolute",
                        left: "16px",
                        bottom: `5px`,
                        width: "1px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                </div>
              ) : null}
            </div>
            {maxWidth ? (
              <div
                className={styles.maxWidth}
                style={{
                  position: "absolute",
                  left: 0,
                  bottom: "-30px",
                  textAlign: "center",
                  width: `${maxWidth * scaleXD}px`,
                  height: "30px",
                  lineHeight: "30px",
                  fontSize: `${textSize || 11}px`,
                  transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
                  transformOrigin: "top left",
                }}
              >
                <div
                  style={{
                    overflow: "hide",
                  }}
                >
                  <span style={{ color: "red" }}>{maxWidth}</span>
                  {openEdition ? (
                    <span>
                      <span>{OpenVersion}：</span>
                      <span style={{ color: "red" }}>{openEdition} %</span>
                    </span>
                  ) : null}
                </div>
                <div className={styles.maxWidthLeft}>
                  <VerticalRightOutlined />
                  <div
                    className={styles.maxWidthLeftLine}
                    style={{
                      width: `${maxWidth * scaleXD * 0.2}px`,
                      height: "1px",
                      top: "14px",
                      left: "5px",
                    }}
                  />
                </div>
                <div className={styles.maxWidthRight}>
                  <VerticalLeftOutlined />
                  <div
                    className={styles.maxWidthRightLine}
                    style={{
                      width: `${maxWidth * scaleXD * 0.2}px`,
                      height: "1px",
                      top: "14px",
                      right: "5px",
                    }}
                  />
                </div>
              </div>
            ) : null}
            {maxHeight ? (
              <div
                style={{
                  position: "absolute",
                  right: "-50px",
                  top: 0,
                  textAlign: "center",
                  width: `${30}px`,
                  height: `${maxHeight * scaleYD}px`,
                  lineHeight: `${maxHeight * scaleYD}px`,
                  fontSize: `${textSize || 11}px`,
                  transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
                  transformOrigin: "top left",
                }}
              >
                <span
                  style={{
                    color: "red",
                  }}
                >
                  {getNum(maxHeight)}
                </span>
                <div
                  style={{
                    position: "absolute",
                    top: `0px`,
                    left: 0,
                    width: "20px",
                  }}
                >
                  <VerticalRightOutlined
                    style={{
                      position: "absolute",
                      top: "0",
                      left: "10px",
                      transform: `rotateZ(${90}deg)`,
                    }}
                  />
                  <div
                    style={{
                      height: `${maxHeight * scaleYD * 0.3}px`,
                      position: "absolute",
                      right: "4px",
                      top: "5px",
                      width: "1px",
                      backgroundColor: "#333",
                    }}
                  />
                </div>
                <div
                  style={{
                    position: "absolute",
                    bottom: `0px`,
                    left: 0,
                    width: "20px",
                  }}
                >
                  <VerticalLeftOutlined
                    style={{
                      position: "absolute",
                      bottom: "0",
                      left: "10px",
                      transform: `rotateZ(${90}deg)`,
                    }}
                  />
                  <div
                    style={{
                      height: `${maxHeight * scaleYD * 0.3}px`,
                      position: "absolute",
                      right: "4px",
                      bottom: "5px",
                      width: "1px",
                      backgroundColor: "#333",
                    }}
                  />
                </div>
              </div>
            ) : null}
          </div>
        </div>
      ) : (
        <div
          style={{
            display: "flex",
            height: `${isMobile ? "15rem" : "300px"}`,
            justifyContent: "center",
            alignItems: "center", // 垂直居中
            width: "100%",
            fontSize: `${isMobile ? "1rem" : "20px"}`,
            fontWeight: "700",
            color: "#B9B9B9",
            wordWrap: "break-word",
            whiteSpace: "normal",
            overflow: "hidden",
            textAlign: "center",
          }}
        >
          <span
            style={{
              wordBreak: "break-all", // 确保长单词换行
            }}
          >
            {confirmParam}
          </span>
        </div>
      )}

      <Modal
        width={modalWidth}
        title="详情"
        open={isModalOpen}
        footer={null}
        bodyStyle={{
          overflowY: "hide",
          minHeight: `${700}px`,
          width: `${modalWidth}`,
          padding: "1px",
        }}
        style={{ top: 0 }}
        onCancel={handleCancel}
      >
        <div
          key={boxKeys}
          style={{
            width: "100%",
            height: "100%",
            position: "relative",
            top: 0,
            left: 0,
            right: 0,
            zIndex: 10,
            maxHeight: `${clientHeight}`,
            // padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
          }}
        >
          <div style={{ ...style, position: "absolute", left: "50%" }} ref={boxsRef}>
            <div
              ref={svgBoxs}
              style={{
                position: "absolute",
                // width: `${isRrotate ?materialWidth: materialLength}px`,
                //   height: `${isRrotate ?materialLength : materialWidth}px`,
                marginLeft: `${dZBLB}px`,
                marginTop: `${dSBLB}px`,
                marginRight: `${dYBLB}px`,
                marginBottom: `${dXBLB}px`,
              }}
            >
              {boxList.length ? innerDivs : []}
            </div>
            <div
              ref={typesettingBoxs}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
              }}
            >
              {materialLength ? (
                <div
                  style={{
                    width: `${materialLength}px`,
                    height: "30px",
                    lineHeight: "30px",
                    position: "absolute",
                    bottom: "-32px",
                    left: 0,
                    fontSize: "30px",
                    textAlign: "center",
                    color: "#333",
                  }}
                >
                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{getNum(materialLength)}</span>
                  <div className={styles.maxWidthLeft}>
                    <LeftOutlined style={{ fontSize: "20px" }} />
                    <div
                      className={styles.maxWidthLeftLine}
                      style={{
                        width: `${materialLength * 0.1}px`,
                        top: "19px",
                        left: "9px",
                        backgroundColor: "#333",
                      }}
                    />
                    <div
                      style={{
                        position: "absolute",
                        width: "2px",
                        height: "30px",
                        top: "5px",
                        left: "0px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                  <div className={styles.maxWidthRight}>
                    <RightOutlined style={{ fontSize: "20px" }} />
                    <div
                      className={styles.maxWidthRightLine}
                      style={{
                        width: `${materialLength * 0.1}px`,
                        top: "19px",
                        right: "5px",
                        backgroundColor: "#333",
                      }}
                    />
                    <div
                      style={{
                        position: "absolute",
                        width: "2px",
                        height: "30px",
                        top: "5px",
                        right: "0px",
                        backgroundColor: "#333",
                      }}
                    />
                  </div>
                </div>
              ) : null}
              {materialWidth ? (
                <div
                  style={{
                    width: `${10}px`,
                    height: `${materialWidth}px`,
                    position: "absolute",
                    top: 0,
                    right: "-19px",
                    fontSize: "30px",
                    lineHeight: `${materialWidth}px`,
                    color: "#333",
                  }}
                >
                  <span style={{ color: "red", display: "inline-block", width: "100px" }}>{materialWidth}</span>
                  {isJuantong ? (
                    <span
                      style={{
                        position: "absolute",
                        top: "50%",
                        textAlign: "center",
                        width: "30px",
                        writingMode: "vertical-rl",
                        color: "red",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        textOrientation: "upright",
                      }}
                    >
                      {DoorWidthDirection}
                    </span>
                  ) : (
                    ""
                  )}
                  {isJuantong ? (
                    <ArrowRightOutlined
                      style={{ position: "absolute", fontSize: "30px", top: `${(materialWidth * scaleYD) / 2}px`, left: "-30px" }}
                    />
                  ) : (
                    ""
                  )}
                  <div
                    style={{
                      position: "absolute",
                      top: `-${materialWidth / 2}px`,
                      left: "14px",
                      width: "20px",
                    }}
                  >
                    <UpOutlined style={{ fontSize: "20px" }} />
                    <div
                      style={{
                        height: `${materialWidth * 0.3}px`,
                        position: "absolute",
                        right: "10px",
                        top: `${materialWidth / 2 + 8}px`,
                        width: "2px",
                        backgroundColor: "#333",
                      }}
                    />
                    <div
                      style={{
                        height: "2px",
                        width: "30px",
                        backgroundColor: "#333",
                        position: "absolute",
                        top: `${materialWidth / 2}px`,
                        right: "-4.5px",
                      }}
                    />
                  </div>
                  <div
                    style={{
                      position: "absolute",
                      bottom: `-${materialWidth / 2 - dXBLB - 10}px`,
                      left: "14px",
                      width: "20px",
                    }}
                  >
                    <DownOutlined style={{ fontSize: "20px" }} />
                    <div
                      style={{
                        height: `${materialWidth * 0.3}px`,
                        position: "absolute",
                        right: "9px",
                        bottom: `${materialWidth / 2 - dXBLB}px`,
                        width: "2px",
                        backgroundColor: "#333",
                      }}
                    />
                    <div
                      style={{
                        height: "2px",
                        width: "30px",
                        backgroundColor: "#333",
                        position: "absolute",
                        bottom: `${materialWidth / 2 - dXBLB - 10}px`,
                        right: "-4.5px",
                      }}
                    />
                  </div>
                </div>
              ) : null}
            </div>
            {maxWidth ? (
              <div
                className={styles.maxWidth}
                style={{
                  position: "absolute",
                  left: 0,
                  bottom: "-30px",
                  textAlign: "center",
                  width: `${maxWidth}px`,
                  height: "30px",
                  lineHeight: "30px",
                  fontSize: "38px",
                }}
              >
                <div
                  style={{
                    overflow: "hide",
                  }}
                >
                  <span style={{ color: "red" }}>{getNum(maxWidth)}</span>
                  {openEdition ? (
                    <span>
                      <span>{OpenVersion}：</span>
                      <span style={{ color: "red" }}>{openEdition} %</span>
                    </span>
                  ) : null}
                </div>
                <div className={styles.maxWidthLeft}>
                  <LeftOutlined style={{ fontSize: "20px" }} />
                  <div
                    className={styles.maxWidthLeftLine}
                    style={{
                      width: `${maxWidth * 0.1}px`,
                      height: "2px",
                    }}
                  />
                  <div
                    style={{
                      width: "2px",
                      height: "30px",
                      backgroundColor: "#333",
                      position: "absolute",
                      top: `10px`,
                      left: "0px",
                    }}
                  />
                </div>
                <div className={styles.maxWidthRight}>
                  <RightOutlined style={{ fontSize: "20px" }} />
                  <div
                    className={styles.maxWidthRightLine}
                    style={{
                      width: `${maxWidth * 0.1}px`,
                    }}
                  />
                  <div
                    style={{
                      width: "2px",
                      height: "30px",
                      backgroundColor: "#333",
                      position: "absolute",
                      top: `10px`,
                      right: "0px",
                    }}
                  />
                </div>
              </div>
            ) : null}
            {maxHeight ? (
              <div
                style={{
                  position: "absolute",
                  right: "-40px",
                  top: 0,
                  textAlign: "center",
                  width: `${30}px`,
                  height: `${maxHeight}px`,
                  fontSize: "38px",
                }}
              >
                <div
                  style={{
                    width: `${120}px`,
                    height: `${maxHeight}px`,
                    lineHeight: `${maxHeight}px`,
                    textAlign: "left",
                    color: "red",
                  }}
                >
                  {getNum(maxHeight)}
                </div>
                <div
                  style={{
                    position: "absolute",
                    top: `0px`,
                    left: 0,
                    width: "20px",
                  }}
                >
                  <UpOutlined style={{ fontSize: "20px", position: "absolute", top: "0px", right: "0px" }} />
                  <div
                    style={{
                      height: `${maxHeight * 0.3}px`,
                      position: "absolute",
                      right: "9px",
                      top: "10px",
                      width: "2px",
                      backgroundColor: "#333",
                    }}
                  />
                  <div
                    style={{
                      width: "30px",
                      height: "2px",
                      backgroundColor: "#333",
                      position: "absolute",
                      top: `0px`,
                      right: "-5px",
                    }}
                  />
                </div>
                <div
                  style={{
                    position: "absolute",
                    bottom: `0px`,
                    left: 0,
                    width: "20px",
                  }}
                >
                  <DownOutlined style={{ fontSize: "20px", position: "absolute", bottom: "0px", right: "0px" }} />
                  <div
                    style={{
                      height: `${maxHeight * 0.3}px`,
                      position: "absolute",
                      right: "9px",
                      bottom: "10px",
                      width: "2px",
                      backgroundColor: "#333",
                    }}
                  />
                  <div
                    style={{
                      width: "30px",
                      height: "2px",
                      backgroundColor: "#333",
                      position: "absolute",
                      bottom: `0px`,
                      right: "-5px",
                    }}
                  />
                </div>
              </div>
            ) : null}
          </div>
        </div>
      </Modal>


    </>
  );
};

export default Typesetting;
