/* eslint-disable */
import React, { useRef, useState, useEffect } from "react";
import styles from "./index.less";
import {
  createPathElement,
  createTopTongue,
  createTopTongueType1,
  createTrapezoid,
  createDynamicTop,
  createNoneProject,
  createLineWeltTop,
  createIsoscelesTrapezoidWeltTop,
  createTrapezoidWeltTop,
  createFoldWeltTop,
  createFoldWeltTopLine,
  createRoundedCornersWeltTop,
  createRightAngleBoxBottomComponent,
  createBoxBottomComponent1,
  createBoxBottomComponent2,
  createBoxBottomComponent3,
  createBoxBottomComponent4,
  createBoxBottomComponent5,
  createBoxBottomComponent6,
  createBoxComponentNew,
  createBoxComponentNew1,
  createBoxComponentNew2,
  createBoxComponentNew3,
  createBoxComponentNew4,
  createBoxComponentNew5,
  createBoxComponentNew4_1,
  createWelt,
  createWelt1,
  createWelt2,
  createWelt2Right,
  createWelt3,
  createWelt3Right,
  createText,
  createDoubleArrow,
  createHorizontalDoubleArrow,
} from "../BoxDesign/createAirplaneBox";
const SvgBox = props => {
  const svgContainerRef = useRef(null);
  const svgRef = useRef(null);
  const [boxKey, setBoxKey] = useState(new Date().getTime());
  const { boxList, dSvgBoxWidth, dSvgBoxHeight } = props;
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [deep, setDeep] = useState(0);
  const [svgType, setSvgType] = useState(1);
  // 盒身
  useEffect(
    () => {
      setTimeout(() => {
        const svg = svgRef.current;
        if (svg) {
          initSVG();
        }
      }, 0);
    },
    [boxList, svgType]
  );

  // 初始化svg
  const initSVG = () => {
    setBoxKey(new Date().getTime());
    const svg = svgRef.current;
    svg.innerHTML = "";

    // 获取盒型类型
    const svgTypes = boxList.find(x => x.sName === "盒身")?.type || 1;
    setSvgType(svgTypes);

    // 获取盒长、盒宽、盒高
    const boxLength = Number(boxList.find(x => x.sName === "盒长")?.value) || 0;
    const boxWidth = Number(boxList.find(x => x.sName === "盒宽")?.value) || 0;
    const boxHeight = Number(boxList.find(x => x.sName === "盒高")?.value) || 0;

    setWidth(boxLength);
    setHeight(boxWidth);
    setDeep(boxHeight);

    // 计算视口宽度和高度
    const zbtb = boxList.find(x => x.sName === "左贴边位");
    const ybtb = boxList.find(x => x.sName === "右贴边位");
    const dZTBW = Number(zbtb?.value) || 0;
    const dYTBW = Number(ybtb?.value) || 0;
    const sfhs = boxList.find(x => x.sName === "上方盒舌");
    const dSFHS = Number(sfhs?.value) || 0;
    const hdzj = boxList.find(x => x.sName === "盒底组件");
    const xfhs = boxList.find(x => x.sName === "下方盒舌");
    const dXFHS = Number(xfhs?.value) || 0;
    const zsbj = boxList.find(x => x.sName === "左(上)插位组件");
    const dZSCW = Number(zsbj?.value) || 0;
    const ysbj = boxList.find(x => x.sName === "右(上)插位组件");
    const dYSCW = Number(ysbj?.value) || 0;
    const zxbj = boxList.find(x => x.sName === "左(下)插位组件");
    const dZXCW = Number(zxbj?.value) || 0;
    const yxbj = boxList.find(x => x.sName === "右(下)插位组件");
    const dYXCW = Number(yxbj?.value) || 0;
    // 根据选择不同的部件 计算尺寸

    // const viewBoxWidth = (boxLength * 2 + boxHeight * 2 + dYTBW + dZTBW);
    let viewBoxWidth = 0;
    let max = 0;
    // 展宽
    if (boxList && boxList.length) {
      // 如果存在部件和盒舌  取最大的
      const top = topOffect(boxList, boxLength, boxWidth, boxHeight);
      const bottom = bottomOffect(boxList, boxLength, boxWidth, boxHeight);
      max = top + bottom + 4;
    }

    let viewBoxHeight = Number(boxWidth) + max;
    if (Number(svgType) === 1) {
      // 四面盒身
      viewBoxWidth = dZTBW + Number(boxLength) * 2 + Number(boxWidth) * 2;
    } else if (Number(svgType) === 2) {
      viewBoxWidth = boxLength * 2 + boxWidth + dYTBW + dZTBW;
    } else if (Number(svgType) === 3) {
      viewBoxWidth = boxLength + boxWidth * 2 + dYTBW + dZTBW;
    } else {
      viewBoxWidth = boxLength + boxHeight + dYTBW + dZTBW;
      viewBoxHeight = Number(boxWidth) + Number(boxHeight) * 2 + max;
    }
    if (!dSvgBoxWidth) {
      viewBoxWidth = Number(viewBoxWidth) + 200;
      viewBoxHeight = Number(viewBoxHeight) + 200;
    }
    // 计算缩放比例
    let scale = 1;
    const ySvg = topOffect(boxList, boxLength, boxWidth, boxHeight) * scale;
    svg.setAttribute("viewBox", `${-(zbtb?.value * scale)} ${-ySvg} ${dSvgBoxWidth} ${dSvgBoxHeight}`);
    svg.setAttribute("width", `${dSvgBoxWidth}px`);
    svg.setAttribute("height", `${dSvgBoxHeight}px`);
    svgContainerRef.current.style.width = `${dSvgBoxWidth}px`;
    svgContainerRef.current.style.height = `${dSvgBoxHeight}px`;

    const scaledWidth = boxLength * scale;
    const scaledHeight = boxWidth * scale;
    const scaledDeep = boxHeight * scale;
    const scales = dSvgBoxWidth ? scale : 1;
    // 根据盒型类型生成不同的盒身 四面盒身
    if (Number(svgType) === 1) {
      const rectangles = [
        { x: 0, y: 0, width: scaledWidth, height: scaledDeep },
        { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep },
        { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
        { x: 0 + scaledWidth * 2 + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep },
      ];
      rectangles.forEach(rect => {
        svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
      });

      let pathList = [];
      // 上方盒舌
      pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0));
      pathList.push(createUpperBoxTongueLeft(sfhs?.type, -scaledHeight, -dSFHS * scale, scaledWidth * 2 + scaledHeight * 2, 0));
      if (sfhs?.type && dSFHS) {
        pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
        pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
      }
      // if (sfhs?.type === "1004") {
      //   pathList.push(createFoldWeltTopLine(scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth, 0));
      //   pathList.push(createFoldWeltTopLine(-scaledHeight * 0.5, -dSFHS * scale * 0.5, scaledWidth * 2 + scaledHeight * 2, 0));
      // }
      // if (sfhs?.type === "1005") {
      //   pathList.push(createFoldWeltTopLine(scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth, 0));
      //   pathList.push(createFoldWeltTopLine(-scaledHeight * 0.85, -dSFHS * scale * 0.9, scaledWidth * 2 + scaledHeight * 2, 0));
      // }
      // 盒底组件
      if (hdzj && hdzj.type) {
        // 盒底组件
        pathList.push(createBoxBottomComponent(hdzj?.type, scaledWidth, scaledHeight, Number(hdzj?.value) * scale, 0, scaledDeep));
        pathList.push(createText(scaledWidth / 2, scaledDeep + (Number(hdzj?.value) / 2) * scales, 10 * scales, Number(hdzj?.value)));
      } else {
        // 下方盒舌

        pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep));
        pathList.push(createUpperBoxTongueLeft(xfhs?.type, -scaledHeight, dXFHS * scale, scaledWidth * 2 + scaledHeight * 2, scaledDeep));
        if (xfhs?.type && dXFHS) {
          pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS));
          pathList.push(createText(scaledWidth * 2 + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 10) * scales, 10 * scales, dXFHS));
        }
      }

      // 左边贴边
      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
      if (zbtb?.type && dZTBW) {
        pathList.push(createText(-dZTBW * 0.4, scaledDeep / 2, 10 * scales, dZTBW));
      }
      // 右边贴边
      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight * 2, 0));
      if (ybtb?.type && dYTBW) {
        pathList.push(createText(scaledWidth * 2 + scaledHeight * 2 + dYTBW * 0.4, scaledDeep / 2, 10 * scales, dYTBW));
      }
      // 左上部件
      pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0));
      if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        // 插位值
        pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3002" && dZSCW) {
        pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3003" && dZSCW) {
        pathList.push(createText(scaledWidth / 2, -dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3004" && zsbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3005" && zsbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      }
      // 右上部件
      pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0));
      if (ysbj?.type === "6001" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6002" && dYSCW) {
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6003" && dYSCW) {
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6004" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(
          createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")
        );
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6005" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      }
      // 左下部件-
      if (!(hdzj && hdzj.type)) {
        pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep));
        if (zxbj?.type === "4001" && zxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
        } else if (zxbj?.type === "4002" && dZXCW) {
          pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
        } else if (zxbj?.type === "4003" && dZXCW) {
          pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
        } else if (zxbj?.type === "4004" && zxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
          pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
          pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
        } else if (zxbj?.type === "4005" && zxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
          pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        }
      }
      if (!(hdzj && hdzj.type)) {
        pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW * scale, scaledWidth + scaledHeight, scaledDeep));
        if (yxbj?.type === "7001" && yxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW));
        } else if (yxbj?.type === "7004" && yxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(
            createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
          );
          pathList.push(
            createText(
              scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales,
              scaledDeep + (scaledHeight + scaledHeight / 2),
              10 * scales,
              "W"
            )
          );
          pathList.push(
            createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW)
          );
        } else if (yxbj?.type === "7005" && yxbj?.value) {
          pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
          pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
          pathList.push(
            createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
          );
          pathList.push(
            createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")
          );
        } else if (dYXCW && yxbj?.type) {
          pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW));
        }
      }
      // 右下部件

      // 纵向 D
      if (scaledDeep && scaledWidth && scaledHeight) {
        pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10 * scales, scaledDeep / 2, 10 * scales, "D"));

        // 横向 L
        pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10 * scales, 10 * scales, "L"));
        //  W
        pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scale));
        pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10 * scales, 10 * scales, "W"));
      }
      pathList.forEach(x => {
        svg.appendChild(x);
      });
    } else if (Number(svgType) === 2) {
      // 单折盒身
      const rectangles = [
        { x: 0, y: 0, width: scaledWidth, height: scaledDeep },
        { x: 0 + scaledWidth, y: 0, width: scaledHeight, height: scaledDeep },
        { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
      ];
      rectangles.forEach(rect => {
        svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
      });
      let pathList = [];
      // 上方盒舌
      pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth, 0));
      if (sfhs?.type && dSFHS) {
        pathList.push(createText(scaledWidth + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
      }
      // 下方盒舌
      pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth, scaledDeep));
      if (xfhs?.type && dXFHS) {
        pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dSFHS));
      }
      // 左边贴边
      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
      if (zbtb?.type && dZTBW) {
        pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
      }
      // 右边贴边
      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth * 2 + scaledHeight, 0));
      if (zbtb?.type && dYTBW) {
        pathList.push(createText(scaledWidth * 2 + scaledHeight + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
      }
      // 左上部件
      pathList.push(createDynamicTopLeft(zsbj?.type, scaledWidth, -scaledHeight, -dZSCW * scale, 0, 0));
      if ((zsbj?.type === "3001" && zsbj?.value )|| (zsbj?.type === "3006" && zsbj?.value)) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledWidth / 2, -scaledHeight - dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3004" && zsbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledWidth * 0.3, -(scaledHeight * 2) - dZSCW / 2 + 4, 10 * scales, dZSCW));
      } else if (zsbj?.type === "3005" && zsbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      } else if (zsbj?.type && dZSCW) {
        pathList.push(createText(scaledWidth / 2, -(dZSCW / 2 - 5), 10 * scales, dZSCW));
      }
      // 右上部件
      pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledWidth + scaledHeight, 0));
      if (ysbj?.type === "6001" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6004" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(
          createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W")
        );
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6005" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      } else if (ysbj?.type && dYSCW) {
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
      }
      // 左下部件-
      pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, 0, scaledDeep));
      if (zxbj?.type === "4001" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
      } else if (zxbj?.type === "4004" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
      } else if (zxbj?.type === "4005" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      } else if (zxbj?.type && dZXCW) {
        pathList.push(createText(scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
      }
      // 右下部件
      pathList.push(createDynamicTopLeft(yxbj?.type, scaledWidth, scaledHeight, dYXCW, scaledWidth + scaledHeight, scaledDeep));
      if (yxbj?.type === "7001" && yxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + scaledHeight + dYXCW / 2 - 4, 10 * scales, dYXCW));
      } else if (yxbj?.type === "7004" && yxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.2 - 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(
          createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
        );
        pathList.push(
          createText(scaledWidth + scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W")
        );
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dYXCW / 2 - 4, 10 * scales, dYXCW));
      } else if (yxbj?.type === "7005" && yxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(
          createDoubleArrow(scaledHeight, scaledWidth + scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales)
        );
        pathList.push(
          createText(scaledWidth + scaledHeight + scaledWidth * 0.8 + 10 * scale, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scale, "W")
        );
      } else if (dYXCW && yxbj?.type) {
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth * 0.5, scaledDeep + dYXCW / 2 - 4, 10 * scales, dYXCW));
      }
      if (scaledDeep && scaledWidth && scaledHeight) {
        // 纵向 D
        pathList.push(createDoubleArrow(scaledDeep, scaledWidth + scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledWidth + scaledHeight + scaledWidth / 2 + 10, scaledDeep / 2, 10 * scales, "D"));

        // 横向 L
        pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L"));
        //  W
        pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledWidth + scaledHeight / 2, scaledDeep * 0.3, scales));
        pathList.push(createText(scaledWidth + scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W"));
      }

      pathList.forEach(x => {
        svg.appendChild(x);
      });
    } else if (Number(svgType) === 3) {
      // 双折盒
      const rectangles = [
        { x: 0, y: 0, width: scaledHeight, height: scaledDeep },
        { x: 0 + scaledHeight, y: 0, width: scaledWidth, height: scaledDeep },
        { x: 0 + scaledWidth + scaledHeight, y: 0, width: scaledHeight, height: scaledDeep },
      ];
      rectangles.forEach(rect => {
        svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height));
      });
      let pathList = [];
      // 上方盒舌
      pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, 0, 0));
      pathList.push(createUpperBoxTongueLeft(sfhs?.type, scaledHeight, -dSFHS * scale, scaledWidth + scaledHeight, 0));
      if (sfhs?.type && dSFHS) {
        pathList.push(createText(scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
        pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, -(dSFHS / 2 - 5) * scales, 10 * scales, dSFHS));
      }
      // 下方盒舌
      pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, 0, scaledDeep));
      pathList.push(createUpperBoxTongueLeft(xfhs?.type, scaledHeight, dXFHS * scale, scaledWidth + scaledHeight, scaledDeep));
      if (xfhs?.type && dXFHS) {
        pathList.push(createText(scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS));
        pathList.push(createText(scaledWidth + scaledHeight + scaledHeight / 2, scaledDeep + (dXFHS / 2 - 5) * scales, 10 * scales, dXFHS));
      }
      // 左边贴边
      pathList.push(createTrapezoidLeft(zbtb?.type, scaledDeep, -dZTBW * scale, 0, 0));
      if (zbtb?.type && dZTBW) {
        pathList.push(createText(-dZTBW / 2, scaledDeep / 2, 10 * scales, dZTBW));
      }
      // 右边贴边
      pathList.push(createTrapezoidRight(ybtb?.type, scaledDeep, dYTBW * scale, scaledWidth + scaledHeight * 2, 0));
      if (zbtb?.type && dYTBW) {
        pathList.push(createText(scaledWidth + scaledHeight * 2 + dYTBW / 2, scaledDeep / 2, 10 * scales, dYTBW));
      }
      // 左下部件-
      pathList.push(createDynamicTopLeft(zxbj?.type, scaledWidth, scaledHeight, dZXCW * scale, scaledHeight, scaledDeep));
      if (zxbj?.type === "4001" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + scaledHeight + dZXCW / 2 - 4, 10 * scales, dZXCW));
      } else if (zxbj?.type === "4004" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledHeight + scaledWidth * 0.3, scaledDeep + scaledHeight * 2 + dZXCW / 2 - 4, 10 * scales, dZXCW));
      } else if (zxbj?.type === "4005" && zxbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, scaledDeep + scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, scaledDeep + scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, scaledDeep + (scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, scaledDeep + (scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      } else if (zxbj?.type && dZXCW) {
        pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep + dZXCW / 2 - 4, 10 * scales, dZXCW));
      }
      // 右上部件
      pathList.push(createDynamicTopLeft(ysbj?.type, scaledWidth, -scaledHeight, -dYSCW * scale, scaledHeight, 0));
      if (ysbj?.type === "6001" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createText(scaledHeight + scaledWidth * 0.5, -scaledHeight - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6004" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.2, -scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.2 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.85, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.85 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
        pathList.push(createText(scaledHeight + scaledWidth * 0.3, -(scaledHeight * 2) - dYSCW / 2 + 4, 10 * scales, dYSCW));
      } else if (ysbj?.type === "6005" && ysbj?.value) {
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.1, -scaledHeight / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.1 + 10 * scales, -scaledHeight / 2, 10 * scales, "W"));
        pathList.push(createDoubleArrow(scaledHeight, scaledHeight + scaledWidth * 0.8, -(scaledHeight + scaledHeight / 2), scales));
        pathList.push(createText(scaledHeight + scaledWidth * 0.8 + 10 * scales, -(scaledHeight + scaledHeight / 2), 10 * scales, "W"));
      } else if (ysbj?.type && dYSCW) {
        pathList.push(createText(scaledHeight + scaledWidth * 0.5, -dYSCW / 2 + 4, 10 * scales, dYSCW));
      }

      if (scaledDeep && scaledWidth && scaledHeight) {
        // 纵向 D
        pathList.push(createDoubleArrow(scaledDeep, scaledHeight + scaledWidth + scaledHeight / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth + scaledHeight / 2 + 10, scaledDeep / 2, 10 * scales, "D"));

        // 横向 L
        pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledHeight + scaledWidth / 2, scaledDeep / 2, scales));
        pathList.push(createText(scaledHeight + scaledWidth / 2, scaledDeep / 2 + 10, 10 * scales, "L"));
        //  W
        pathList.push(createHorizontalDoubleArrow(scaledHeight, scaledHeight / 2, scaledDeep * 0.3, scales));
        pathList.push(createText(scaledHeight / 2, scaledDeep * 0.3 + 10, 10 * scales, "W"));
      }

      pathList.forEach(x => {
        svg.appendChild(x);
      });
    } else {
      svg.appendChild(createFullTelescope(scaledWidth, scaledHeight, scaledDeep, 0, 0));
      // createFullTelescope
      let pathList = [];
      if (scaledDeep && scaledWidth && scaledHeight) {
        // 纵向 D
        pathList.push(createDoubleArrow(scaledHeight, scaledWidth * 0.2, scaledHeight / 2, scales));
        pathList.push(createText(scaledWidth * 0.2 + 10, scaledHeight / 2, 10 * scales, "W"));

        // 横向 L
        pathList.push(createHorizontalDoubleArrow(scaledWidth, scaledWidth / 2, scaledHeight * 0.8, scales));
        pathList.push(createText(scaledWidth / 2, scaledHeight * 0.8 + 10, 10 * scales, "L"));
        //  W
        pathList.push(createHorizontalDoubleArrow(scaledDeep, -scaledDeep / 2, scaledHeight * 0.3, scales));
        pathList.push(createText(-scaledDeep / 2, scaledHeight * 0.3 + 10, 10 * scales, "D"));
      }
      pathList.forEach(x => {
        svg.appendChild(x);
      });
    }
  };
  // 计算头部偏移
  const topOffect = (list, length, width, height) => {
    // 判断code
    const valueList = list.filter(x => x.type !== ("" || null));
    // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件']
    const sfhs = valueList.find(x => x.sName === "上方盒舌");
    const zscw = valueList.find(x => x.sName === "左(上)插位组件");
    const yscw = valueList.find(x => x.sName === "右(上)插位组件");
    let top = 0;
   const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"];
    const four = ["6004", "3004", "4004", "7004"];
    const five = ["6005", "3005", "4005", "7005"];
    const dYSCW = Number(yscw?.value) || 0;
    const dZSCW = Number(zscw?.value) || 0;
    // 如果存在插位就不计算盒舌
    if (zscw?.type && yscw?.type) {
      const max = Math.max(dZSCW, dYSCW);
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else if (yscw?.type) {
      const max = dYSCW;
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else if (zscw?.type) {
      const max = dZSCW;
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else {
      top = sfhs?.value;
    }
    return isNaN(top) ? 0 : top;
  };
  const bottomOffect = (list, length, width, height) => {
    // 判断code
    const valueList = list.filter(x => x.type !== ("" || null));
    // const titleList = ['上方盒舌','左(上)插位组件','右(上)插位组件']
    const sfhs = valueList.find(x => x.sName === "下方盒舌");
    const zscw = valueList.find(x => x.sName === "左(下)插位组件");
    const yscw = valueList.find(x => x.sName === "右(下)插位组件");
    const hdzj = valueList.find(x => x.sName === "盒底组件");
    // 将找到的对象放入数组中，并过滤掉 undefined 值
    // 使用 reduce 方法比较 value 属性，找出最大的对象
    let top = 0;
   const one = ["6001", "3001", "4001", "7001", "3006", "4006", "6006", "7006"];
    const four = ["6004", "3004", "4004", "7004"];
    const five = ["6005", "3005", "4005", "7005"];
    const dYSCW = Number(yscw?.value) || 0;
    const dZSCW = Number(zscw?.value) || 0;
    if (hdzj?.type) {
      return Number(hdzj?.value);
    }
    if (zscw?.type && yscw?.type) {
      const max = Math.max(dZSCW, dYSCW);
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else if (yscw?.type) {
      const max = dYSCW;
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else if (zscw?.type) {
      const max = dZSCW;
      if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
        top = width * 2;
      } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
        top = width * 2 + max;
      } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
        top = width + max;
      } else {
        top = max;
      }
    } else {
      top = sfhs?.value;
    }
    // if (five.includes(zscw?.type) || five.includes(yscw?.type)) {
    //   top = width * 2;
    // } else if (four.includes(zscw?.type) || four.includes(yscw?.type)) {
    //   if (dZSCW && dYSCW) {
    //     const max = Math.max(dZSCW, dYSCW);
    //     top = width * 2 + max;
    //   } else if (dZSCW && !dYSCW) {
    //     top = width * 2 + dZSCW;
    //   } else if (!dZSCW && dYSCW) {
    //     top = width * 2 + dYSCW;
    //   }
    // } else if (one.includes(zscw?.type) || one.includes(yscw?.type)) {
    //   if (dZSCW && dYSCW) {
    //     const max = Math.max(dZSCW, dYSCW);
    //     top = width + max;
    //   } else if (dZSCW && !dYSCW) {
    //     top = width + dZSCW;
    //   } else if (!dZSCW && dYSCW) {
    //     top = width + dYSCW;
    //   }
    // } else {
    //   if (dZSCW && !dYSCW) {
    //     top = Number(dZSCW);
    //   } else if (!dZSCW && dYSCW) {
    //     top = Number(dYSCW);
    //   } else {
    //     top = Number(sfhs?.value);
    //   }
    // }

    return isNaN(top) ? 0 : top;
  };
  // 上方盒舌左边
  const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, offsetX, offsetY) => {
    if (!height) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case "1001":
        data = createLineWeltTop(width, height, offsetX, offsetY);
        break;
      case "1002":
        data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY);
        break;
      case "1003":
        data = createTrapezoidWeltTop(width, height, offsetX, offsetY);
        break;
      case "1004":
        data = createFoldWeltTop(width, height, offsetX, offsetY);
        break;
      case "1005":
        data = createRoundedCornersWeltTop(width, height, offsetX, offsetY);
        break;
      case "2001":
        data = createLineWeltTop(width, height, offsetX, offsetY);
        break;
      case "2002":
        data = createIsoscelesTrapezoidWeltTop(width, height, offsetX, offsetY);
        break;
      case "2003":
        data = createTrapezoidWeltTop(width, height, offsetX, offsetY);
        break;
      case "2004":
        data = createFoldWeltTop(width, height, offsetX, offsetY);
        break;
      case "2005":
        data = createRoundedCornersWeltTop(width, height, offsetX, offsetY);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上方盒舌
  const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case "1001":
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      case 1:
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上方盒舌
  const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true);
        break;
      case 1:
        data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回
    let data = {};
    switch (upperBoxTongueType) {
      case 0:
        data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false);
        break;
      case 1:
        data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };

  // 左边贴位
  const createTrapezoidLeft = (trapezoidLeftType, height, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case "8001":
        data = createWelt(height, size, offsetX, offsetY);
        break;
      case "8002":
        data = createWelt1(height, size, offsetX, offsetY);
        break;
      case "8003":
        data = createWelt2(height, size, offsetX, offsetY);
        break;
      case "8004":
        data = createWelt3(height, size, offsetX, offsetY);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右边贴位
  const createTrapezoidRight = (trapezoidLeftType, height, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case "9001":
        data = createWelt(height, size, offsetX, offsetY);
        break;
      case "9002":
        data = createWelt1(height, size, offsetX, offsetY);
        break;
      case "9003":
        data = createWelt2Right(height, size, offsetX, offsetY);
        break;
      case "9004":
        data = createWelt3Right(height, size, offsetX, offsetY);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 左上部件
  const createDynamicTopLeft = (trapezoidLeftType, width, height, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case "3001":
        data = createBoxComponentNew(width, height, size, offsetX, offsetY);
        break;
      case "3002":
        data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
        break;
      case "3003":
        data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
        break;
      case "3004":
        data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
        break;
      case "3005":
        data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
        break;
      case "3006":
        data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
        break;
      case "4001":
        data = createBoxComponentNew(width, height, size, offsetX, offsetY);
        break;
      case "4002":
        data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
        break;
      case "4003":
        data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
        break;
      case "4004":
        data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
        break;
      case "4005":
        data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
        break;
      case "4006":
        data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
        break;
      case "6001":
        data = createBoxComponentNew(width, height, size, offsetX, offsetY);
        break;
      case "6002":
        data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
        break;
      case "6003":
        data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
        break;
      case "6004":
        data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
        break;
      case "6005":
        data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
        break;
      case "6006":
        data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
        break;
      case "7001":
        data = createBoxComponentNew(width, height, size, offsetX, offsetY);
        break;
      case "7002":
        data = createBoxComponentNew1(width, height, size, offsetX, offsetY);
        break;
      case "7003":
        data = createBoxComponentNew2(width, height, size, offsetX, offsetY);
        break;
      case "7004":
        data = createBoxComponentNew3(width, height, size, offsetX, offsetY);
        break;
      case "7005":
        data = createBoxComponentNew4(width, height, size, offsetX, offsetY);
        break;
      case "7006":
        data = createBoxComponentNew5(width, height, size, offsetX, offsetY);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 右上部件
  const createDynamicTopRight = (trapezoidLeftType, width, height, size, offsetX, offsetY) => {
    if (!size) return createNoneProject();
    let data = {};
    switch (trapezoidLeftType) {
      case "6001":
        data = createBoxComponentNew(width, height, size, offsetX, offsetY);
        break;
      case 1:
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  // 盒底组件 特殊的盒底组件
  const createBoxBottomComponent = (trapezoidLeftType, width, deep, size, offsetX, offsetY) => {
    let data = {};
    switch (trapezoidLeftType) {
      case "5001":
        data = createRightAngleBoxBottomComponent(width, deep, size, offsetX, offsetY);
        break;
      case "5002":
        data = createBoxBottomComponent1(width, deep, size, offsetX, offsetY);
        break;
      case "5003":
        data = createBoxBottomComponent2(width, deep, size, offsetX, offsetY);
        break;
      case "5004":
        data = createBoxBottomComponent3(width, deep, size, offsetX, offsetY);
        break;
      case "5005":
        data = createBoxBottomComponent4(width, deep, size, offsetX, offsetY);
        break;
      case "5006":
        data = createBoxBottomComponent5(width, deep, size, offsetX, offsetY);
        break;
      case "5007":
        data = createBoxBottomComponent6(width, deep, size, offsetX, offsetY);
        break;
      default:
        data = createNoneProject();
        break;
    }
    return data;
  };
  return (
    <div
      id="svgContainer"
      key={boxKey}
      ref={svgContainerRef}
      style={{
        width: "100%",
        height: "100%",
        margin: "0 auto",
      }}
    >
      <svg
        className={styles.svgContainer}
        id="dynamicSvg"
        xmlns="http://www.w3.org/2000/svg"
        ref={svgRef}
        viewBox="0 0 400 300"
        preserveAspectRatio="xMidYMid meet"
        width="100%"
        height="100%"
      />
    </div>
  );
};

export default SvgBox;
