/* eslint-disable */
// 创建飞机盒盒身
const boxContent = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${
    offsetX + width
  } ${offsetY} L ${offsetX} ${offsetY} Z`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果
  return svg;
};
// 创建飞机盒上盒部件
const createBoxTop = (width, height, offsetX, offsetY, outerWidth) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${width} ${offsetY} A ${height} ${height} 0 0 1 ${width + outerWidth} ${offsetX} L ${offsetX - outerWidth} ${
    offsetY + height
  } A ${height} ${height} 0 0 1 ${offsetX} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 创建飞机左上部件
const createBoxLeftTop = (width, height, offsetX, offsetY, isLeft) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + 5} A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width} ${
    offsetY + 15
  } L ${offsetX - width} ${offsetY + height - 15}
  A 10 10 0 0 ${isLeft ? 0 : 1} ${offsetX - width + (isLeft ? 5 : -5)} ${offsetY + height - 5} L ${offsetX} ${offsetY + height}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
const createBoxDown = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX - width} ${offsetY} L ${offsetX - width} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
const createBoxComponent = (D, d1, dD, height, offsetX, offsetY, outerHeight) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  // const h = height - 8;
  // 短脚尺寸
  const dJj = height * 0.05;
  const dD1 = 5;
  // 计算突出的高度
  const dTW1 = (height / 2) * 0.1;
  const dTW2 = (height / 2) * 0.2;
  const dTW = height / 2 - dTW2 * 2 - dTW1;
  const d = `M ${offsetX} ${offsetY} 
  L ${offsetX - D} ${offsetY} 
  L ${offsetX - D} ${offsetY + height} 
  L ${offsetX - D} ${offsetY} 
  L ${offsetX - D - outerHeight} ${offsetY + dTW1}
  L ${offsetX - D - outerHeight} ${offsetY + height - dTW1}
  L ${offsetX - D - outerHeight} ${offsetY + dTW1}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 - 2}
  L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2}
  L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW - 2}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 - 2}
  L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2}
  L ${offsetX - D - outerHeight - d1 - dD} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW - 2}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW}
  L ${offsetX - D - outerHeight - d1} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2}
  L ${offsetX - D - outerHeight} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2}
  L ${offsetX - D} ${offsetY + dTW1 + dTW2 + dTW + dTW2 + dTW2 + dTW + dTW2 + dTW1}
  L ${offsetX} ${offsetY + height} 
  `;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};

// 盒身
export const createPathElement = (x, y, width, height, id, wrapperId) => {
  const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "red");
  svg.setAttribute("stroke-width", "1");
  svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
export const createPathElements = (x, y, width, height, id, wrapperId) => {
  const d = `M ${x} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width} ${y} L ${x} ${y} Z`;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#7588B9");
  svg.setAttribute("stroke-width", "1");
  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
export const createPathElementTrapezoid = (x, y, width, height) => {
  const d = `M ${x + width * 0.2} ${y} L ${x} ${y + height} L ${x + width} ${y + height} L ${x + width * 0.8} ${y} L ${x + width * 0.2} ${y} `;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#7588B9");
  svg.setAttribute("stroke-width", "1");
  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
export const createPathElementTrapezoids = (x, y, width, height) => {
  const d = `M ${x} ${y + height * 0.1} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height * 0.9} L ${x} ${y + height * 0.1}`;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#7588B9");
  svg.setAttribute("stroke-width", "1");
  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
export const createPathElementTrapezoidBottom = (x, y, width, height) => {
  const d = `M ${x } ${y} L ${x + width * 0.1} ${y + height} L ${x + width * 0.9} ${y + height} L ${x + width} ${y} L ${x } ${y}`;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#7588B9");
  svg.setAttribute("stroke-width", "1");
  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
export const createPathElementTrapezoidRight = (x, y, width, height) => {
  const d = `M ${x} ${y} L ${x + width} ${y  + height * 0.1} L ${x + width} ${y + height * 0.9} L ${x} ${y + height} L ${x} ${y}`;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#7588B9");
  svg.setAttribute("stroke-width", "1");
  // svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};

//
// 左边斜线贴边
export const createTrapezoid = (height, offsetX, offsetY, size) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX - size} ${offsetY + 2} L ${offsetX - size} ${offsetY + height - 2} L ${offsetX} ${offsetY + height}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 左上盒舌 盒舌 x轴原点 y轴原点 高度 x轴方向偏移 y轴方向偏移 是否瞬时针 是否镜像 type0
export const createTopTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${
    offsetX + width - (isMirror ? -(yz * 2) : yz * 2)
  } ${offsetY - size}
    A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 下边
export const createBottomTongue = (width, offsetX, offsetY, size, xz, yz, clockwise, isMirror, az, jxY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + az} L ${offsetX + xz} ${offsetY - size} L ${
    offsetX + width - (isMirror ? -(yz * 2) : yz * 2)
  } ${offsetY - size}
    A ${yz} ${yz} 0 0 ${clockwise} ${offsetX + width - (isMirror ? -yz : yz)} ${offsetY - size + jxY} L ${offsetX + width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 上盒舌类型1
export const createTopTongueType1 = (width, offsetX, offsetY, size, xz, yz) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX + xz} ${offsetY + size} L ${offsetX + width - xz + yz}  ${offsetY + size} L${
    offsetX + width
  }  ${offsetY} `;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
export const createDynamicTop = (width, height, deep, offsetX, offsetY, size) => {
  const isSignNum = Math.sign(deep) === 1 ? 2 : -2;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  // 动态生成路径，基于输入参数
  const d = `M  ${offsetX} ${offsetY} L ${offsetX} ${offsetY - deep - size + isSignNum} A 2 2 0 0 1 ${offsetX + 2} ${offsetY - deep - size} 
  L ${offsetX + width - 2} ${offsetY - deep - size} A 2 2 0 0 1 ${offsetX + width} ${offsetY - deep - size + isSignNum} L ${offsetX + width} ${
    offsetY - deep
  }
  L ${offsetX} ${offsetY - deep} L ${offsetX + width} ${offsetY - deep} L ${offsetX + width} ${offsetY} `;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
const createBottomCy = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M  ${offsetX} ${offsetY} L ${offsetX + 2} ${offsetY + height} L ${offsetX + width / 2}  ${offsetY + height} 
  L ${offsetX + width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
const createBottomDh = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M  ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width / 2 - 10} ${offsetY + height}
  A 10 10 0 0 0 ${offsetX + width / 2} ${offsetY + height - 10} A 5 5 0 0 1 ${offsetX + width / 2 + 5} ${offsetY + height - 10}
  L ${offsetX + width * 0.75} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY + 5} 
  L ${offsetX + width - 3} ${offsetY + 3} L ${offsetX + width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 添加标注
export const createText = (offsetX, offsetY, size, textContent) => {
  const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  text.setAttribute("x", offsetX); // 文字水平居中
  text.setAttribute("y", offsetY); // 文字垂直居中
  text.setAttribute("text-anchor", "middle"); // 文字水平居中
  text.setAttribute("dominant-baseline", "middle"); // 文字垂直居中
  text.setAttribute("fill", "#333"); // 文字颜色
  text.setAttribute("font-size", size); // 文字大小
  text.textContent = textContent || ""; // 默认文字内容
  return text;
};
// 竖向双箭头
export const createDoubleArrow = (height, offsetX, offsetY, scale) => {
  const Y = -3 * (scale ? scale : 1);
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX + Y} ${offsetY - height / 2 - Y} L ${offsetX} ${
    offsetY - height / 2
  }
    L ${offsetX - Y} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY - height / 2 - Y} L ${offsetX} ${offsetY + height / 2 + Y} L
    ${offsetX - Y} ${offsetY + height / 2 + Y} L ${offsetX} ${offsetY + height / 2} L ${offsetX + Y} ${offsetY + height / 2 + Y} L ${offsetX} ${
    offsetY + height / 2 + Y
  }`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "#F5AD6C");
  svg.setAttribute("stroke", "#F5AD6C");
  svg.setAttribute("stroke-width", "1");

  return svg;
};
// 横向双箭头
export const createHorizontalDoubleArrow = (width, offsetX, offsetY, scale) => {
  const Y = 3 * (scale ? scale : 1);
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX - width / 2 + Y} ${offsetY - Y} L ${
    offsetX - width / 2
  } ${offsetY}
    L ${offsetX - width / 2 + Y} ${offsetY + Y} L ${offsetX - width / 2 + Y} ${offsetY} L ${offsetX + width / 2 - Y} ${offsetY} L ${
    offsetX + width / 2 - Y
  } ${offsetY + Y} L ${offsetX + width / 2} ${offsetY}
    L ${offsetX + width / 2 - Y} ${offsetY - Y} L ${offsetX + width / 2 - Y} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "#F5AD6C");
  svg.setAttribute("stroke", "#F5AD6C");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 左右直线贴边
const createLineWelt = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${offsetY + height}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};

const createLine = (height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  svg.setAttribute("stroke-dasharray", "3.8"); // 添加虚线效果
  return svg;
};
// 没选部件的时候展示空白
export const createNoneProject = () => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = ``;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 自动扣抵盒
export function createDeductionBox(slaveRowData) {
  const pathList = [];
  const { W, L, D, dg, dc, db } = slaveRowData;
  const width = L;
  const height = D;
  const deep = W;
  // 盒身
  const rectangles = [
    { x: 0, y: 0, width: deep, height, id: "ac_path_c795a39_2oj", wrapperId: "3476" },
    { x: 0 + deep, y: 0, width: width, height, id: "ac_path_c795a39_2on", wrapperId: "3480" },
    { x: 0 + deep + width, y: 0, width: deep, height, id: "ac_path_c795a39_2or", wrapperId: "3484" },
    { x: 0 + deep * 2 + width, y: 0, width: width, height, id: "ac_path_c795a39_2ov", wrapperId: "3488" },
  ];
  rectangles.forEach(rect => {
    pathList.push(createPathElement(rect.x, rect.y, rect.width, rect.height, rect.id, rect.wrapperId));
  });
  pathList.push(createTrapezoid(height, deep * 2 + width * 2, 0, -dg));
  pathList.push(createTopTongue(deep, 0, 0, db, 2, 5, 1, false));
  pathList.push(createTopTongue(-deep, deep * 2 + width, 0, db, -2, 5, 0, true));
  pathList.push(createDynamicTop(width, height, deep, deep * 2 + width, 0, dc));
  pathList.push(createBottomCy(deep, dc - 10, 0, height));
  pathList.push(createBottomCy(deep, dc - 10, deep + width, height));
  pathList.push(createBottomDh(width, dc, deep, height));
  pathList.push(createBottomDh(width, dc, deep * 2 + width, height));
  pathList.push(createHorizontalDoubleArrow(width, deep + width / 2, height * 0.3));
  pathList.push(createHorizontalDoubleArrow(deep, deep + width + deep / 2, height * 0.5));
  pathList.push(createHorizontalDoubleArrow(dg, deep * 2 + width * 2 + dg / 2, height * 0.5));
  pathList.push(createDoubleArrow(db, deep + width + deep * 0.2, -db / 2, -3));
  pathList.push(createDoubleArrow(height, deep * 2 + width + width * 0.5, height / 2, -3));
  pathList.push(createDoubleArrow(dc, deep * 2 + width + width * 0.5, -deep - dc / 2, -3));
  pathList.push(createText(deep + width / 2, height * 0.3 + 15, 14, "L"));
  pathList.push(createText(deep + width + deep / 2, height * 0.5 + 15, 14, "W"));
  pathList.push(createText(deep * 2 + width * 2 + dg / 2, height * 0.5 + 15, 14, "g"));
  pathList.push(createText(deep + width + deep * 0.2 + 8, -db / 2, 14, "b"));
  pathList.push(createText(deep * 2 + width + width * 0.5 + 8, height / 2, 14, "D"));
  pathList.push(createText(deep * 2 + width + width * 0.5 + 8, -deep - dc / 2, 14, "c"));
  return pathList;
}
// 飞机盒
export function createAirplaneBox(slaveRowData) {
  const { W, L, D, dF5, dD3, dF, dD1, dTd } = slaveRowData;
  const pathList = [];
  const width = L;
  const height = W;
  const deep = D;
  const dD = dTd;
  // 盒身
  const rectangles = [
    { x: 0, y: 0, width: width - 8 * 2, height: height },
    { x: 0 - 4, y: height, width: width - 4 * 2, height: dD3 },
    { x: 0 - 8, y: height + dD3, width: width, height: height },
    { x: 0 - 4, y: height + dD3 + height, width: width - 4 * 2, height: dD3 },
  ];
  pathList.push(createBoxTop(width - 8 * 2, dD3, 0, -dD3, dF5));
  pathList.push(createBoxLeftTop(dF5, height, 0, 0, true));
  pathList.push(createBoxLeftTop(-dF5, height, width - 8 * 2, 0, false));
  pathList.push(createBoxDown(dF, dD3, -4, height));
  pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height));
  pathList.push(createBoxDown(dF, dD3, -4, height * 2 + dD3));
  pathList.push(createBoxDown(-dF, dD3, width - 4 * 2 - 4, height * 2 + dD3));
  pathList.push(createBoxComponent(deep, dD1, dD, height, 0 - 8, height + dD3, dD));
  pathList.push(createBoxComponent(-deep, -dD1, -dD, height, width - 8, height + dD3, -dD));
  // 竖向
  pathList.push(createDoubleArrow(dD3, L * 0.3, -dD3 / 2, -3));
  pathList.push(createText(L * 0.3 + 10, -dD3 / 2, 14, "d3"));
  pathList.push(createDoubleArrow(height, -15, height + dD3 + height / 2, -3));
  pathList.push(createText(-25, height + dD3 + height / 2, 14, "W"));
  // 横向
  pathList.push(createHorizontalDoubleArrow(dF5, -dF5 / 2, height / 2));
  pathList.push(createText(-dF5 / 2, height / 2 + 10, 14, "f5"));
  pathList.push(createHorizontalDoubleArrow(width, width / 2 - 8, dD3 + height + height * 0.2));
  pathList.push(createText(width / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(deep, width + deep / 2 - 8, dD3 + height + height * 0.2));
  pathList.push(createText(width + deep / 2 - 8, dD3 + height + height * 0.2 + 10, 14, "D"));
  pathList.push(createHorizontalDoubleArrow(dD1, width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.2));
  pathList.push(createText(width + deep + dD1 / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d1"));
  pathList.push(createHorizontalDoubleArrow(dD, width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.2));
  pathList.push(createText(width + deep + dD1 + dD / 2 + dD - 8, dD3 + height + height * 0.3 + 6, 14, "d"));
  pathList.push(createHorizontalDoubleArrow(dF, width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2));
  pathList.push(createText(width - 12 + dF / 2, dD3 + height * 2 + dD3 / 2 + 10, 14, "f"));
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });

  return pathList;
}
// 手提袋
export function createTote(slaveRowData) {
  const pathList = [];
  const { W, L, D, dF, dF1, dF2 } = slaveRowData;
  const rectangles = [
    { x: 0, y: 0, width: L, height: D },
    { x: L, y: 0, width: W, height: D },
    { x: L + W, y: 0, width: L, height: D },
    { x: L + W + L, y: 0, width: W, height: D },
  ];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createLineWelt(-dF, D, 0, 0));
  pathList.push(createLineWeltTop(dF + L * 2 + W * 2, -dF1, -dF, 0));
  pathList.push(createLineWeltTop(dF + L * 2 + W * 2, dF2, -dF, D));
  pathList.push(createLine(dF1, 0, -dF1));
  pathList.push(createLine(dF1, L, -dF1));
  pathList.push(createLine(dF2, 0, D));
  pathList.push(createLine(dF2, L, D));
  pathList.push(createLine(dF1 + D + dF2, L + W / 2, -dF1));
  pathList.push(createLine(dF1, L + W, -dF1));
  pathList.push(createLine(dF1, L * 2 + W, -dF1));
  pathList.push(createLine(dF2, L + W, D));
  pathList.push(createLine(dF2, L * 2 + W, D));
  pathList.push(createLine(dF1 + D + dF2, L * 2 + W + W / 2, -dF1));

  // 横向
  pathList.push(createHorizontalDoubleArrow(dF, -dF / 2, D / 2));
  pathList.push(createText(-dF / 2, D / 2 + 10, 14, "f"));
  pathList.push(createHorizontalDoubleArrow(L, L / 2, D / 2, -3));
  pathList.push(createText(L / 2, D / 2 + 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D / 2, -3));
  pathList.push(createText(L + W / 2, D / 2 + 10, 14, "W"));
  // 竖向
  pathList.push(createDoubleArrow(dF1, L + W + L / 2, -dF1 / 2, -3));
  pathList.push(createText(L + W + L / 2 + 10, -dF1 / 2, 14, "f1"));
  pathList.push(createDoubleArrow(dF2, L + W + L / 2, D + dF2 / 2, -3));
  pathList.push(createText(L + W + L / 2 + 10, D + dF2 / 2, 14, "f2"));
  pathList.push(createDoubleArrow(D, L + W + 10, D / 2, -3));
  pathList.push(createText(L + W + 20, D / 2, 14, "D"));
  return pathList;
}
// 普通盒
export function createBoxs(slaveRowData) {
  const pathList = [];
  const { W, L, D, dF, dG } = slaveRowData;
  const rectangles = [
    { x: 0, y: 0, width: L, height: D },
    { x: L, y: 0, width: W, height: D },
    { x: L + W, y: 0, width: L, height: D },
    { x: L + W + L, y: 0, width: W, height: D },
  ];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createTrapezoid(D, 0, 0, dG));
  pathList.push(createLineWeltTop(L * 2 + W * 2, -dF, 0, 0));
  pathList.push(createLineWeltTop(L * 2 + W * 2, dF, 0, D));
  pathList.push(createLine(dF, L, -dF));
  pathList.push(createLine(dF, L + W, -dF));
  pathList.push(createLine(dF, L * 2 + W, -dF));
  pathList.push(createLine(dF, L, D));
  pathList.push(createLine(dF, L + W, D));
  pathList.push(createLine(dF, L * 2 + W, D));

  pathList.push(createHorizontalDoubleArrow(dG, -dG / 2, D / 2));
  pathList.push(createText(-dG / 2, D / 2 + 10, 14, "g"));

  pathList.push(createHorizontalDoubleArrow(W, L + W / 2, D * 0.7));
  pathList.push(createText(L + W / 2, D * 0.7 + 10, 14, "W"));

  pathList.push(createHorizontalDoubleArrow(L, L + W + L / 2, D / 2));
  pathList.push(createText(L + W + L / 2, D / 2 + 10, 14, "L"));

  pathList.push(createDoubleArrow(D, L + W + L * 0.2, D / 2, -3));
  pathList.push(createText(L + W + L * 0.2 + 10, D / 2, 14, "D"));

  pathList.push(createDoubleArrow(dF, L + W + L * 0.6, -dF / 2, -3));
  pathList.push(createText(L + W + L * 0.6 + 10, -dF / 2, 14, "f"));

  return pathList;
}
// 天地盖
export function createHeavenBox(slaveRowData) {
  const pathList = [];
  const { W, L, D, dF, dF1, dD1, dZBJJ } = slaveRowData;
  const rectangles = [
    { x: 0, y: 0, width: L, height: W },
    { x: L + D + dZBJJ + dD1, y: -2, width: L + 4, height: W + 4 },
  ];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createLineWelt(-D, W, 0, 0));
  pathList.push(createLineWelt(D, W, L, 0));
  pathList.push(createLineWelt(-dD1, W + 4, L + D + dZBJJ + dD1, -2));
  pathList.push(createLineWelt(dD1, W + 4, L * 2 + 4 + D + dZBJJ + dD1, -2));

  pathList.push(createLineWeltTop(D * 2 + L, -dF, -D, 0));
  pathList.push(createLineWeltTop(D * 2 + L, dF, -D, W));
  pathList.push(createLineWeltTop(dD1 * 2 + L + 4, -dF1, L + D + dZBJJ, -2));
  pathList.push(createLineWeltTop(dD1 * 2 + L + 4, dF1, L + D + dZBJJ, W + 2));

  pathList.push(createLine(dF, 0, -dF));
  pathList.push(createLine(dF, L, -dF));
  pathList.push(createLine(dF1, L + D + dZBJJ + dD1, -dF1 - 2));
  pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, -dF1 - 2));
  pathList.push(createLine(dF, 0, W));
  pathList.push(createLine(dF, L, W));
  pathList.push(createLine(dF1, L + D + dZBJJ + dD1, W + 2));
  pathList.push(createLine(dF1, L + D + dZBJJ + dD1 + L + 4, W + 2));

  // 横向标注
  pathList.push(createHorizontalDoubleArrow(L, L / 2, W * 0.3));
  pathList.push(createText(L / 2, W * 0.3 + 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(D, L + D / 2, W / 2));
  pathList.push(createText(L + D / 2, W / 2 + 10, 14, "D"));
  pathList.push(createHorizontalDoubleArrow(dD1, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2));
  pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, W / 2 + 10, 14, "d1"));
  // 竖向
  pathList.push(createDoubleArrow(dF, L + D / 2, -dF / 2, -3));
  pathList.push(createText(L + D / 2 + 10, -dF / 2, 14, "f"));
  pathList.push(createDoubleArrow(dF + 2, L + D + dZBJJ + dD1 + L + 4 + dD1 / 2, -dF / 2 - 1, -3));
  pathList.push(createText(L + D + dZBJJ + dD1 + L + 4 + dD1 / 2 + 10, -dF / 2, 14, "f1"));
  return pathList;
}

// 盘式盒
export function createDiscBox(slaveRowData) {
  const pathList = [];
  const { W, L, D, dF, dD1, dTd, dDj } = slaveRowData;
  const dTW1 = (W / 2) * 0.1;
  const dTW2 = (W / 2) * 0.2;
  const dTW = W / 2 - dTW2 * 2 - dTW1;
  const rectangles = [
    { x: 0, y: 0, width: L - 4, height: D },
    { x: -2, y: D, width: L, height: W },
    { x: 0, y: D + W, width: L - 4, height: D },
    { x: -2, y: D + dTW1 + dTW2, width: 5, height: dTW },
    { x: L - 7, y: D + dTW1 + dTW2, width: 5, height: dTW },
    { x: -2, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW },
    { x: L - 7, y: D + W - dTW1 - dTW2 - dTW, width: 5, height: dTW },
  ];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createBoxDown(dF, D - 4, 0, 2));
  pathList.push(createBoxDown(-dF, D - 4, L - 4, 2));
  pathList.push(createBoxDown(dF, D - 4, 0, D + W + 2));
  pathList.push(createBoxDown(-dF, D - 4, L - 4, D + W + 2));
  pathList.push(createBoxComponent(D, dD1, dTd, W, 0 - 2, D, dDj));
  pathList.push(createBoxComponent(-D, -dD1, -dTd, W, L, D, -dDj));
  // 横向标注
  pathList.push(createHorizontalDoubleArrow(L, (L - 2) / 2, D + W * 0.3));
  pathList.push(createText((L - 2) / 2, D + W * 0.3 + 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(D, L + D / 2, D + 10));
  pathList.push(createText(L + D / 2, D + 15, 14, "D"));
  // 竖向
  pathList.push(createDoubleArrow(W, -D / 2, D + W / 2, -3));
  pathList.push(createText(-D / 2, D + W / 2 + 10, 14, "W"));
  return pathList;
}
// 展示盒f1
const createShowBoxF1 = (width, height, offsetX, offsetY, size) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX - width} ${offsetY + size + 1} L ${offsetX - width} ${
    offsetY + height
  } L ${offsetX} ${offsetY + height} Z`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 展示盒机翼
const createShowBoxWing = (width, height, offsetX, offsetY, size) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 展示盒f1
const createShowBoxF2 = (width, height, offsetX, offsetY, size) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height + size} 
  L ${offsetX + width} ${offsetY + height + size} L ${offsetX + width} ${offsetY + -size * 2} L ${offsetX} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 展示盒
export function createShowBox(slaveRowData) {
  const pathList = [];
  const { L, W, D, dD2, dF1, dF2 } = slaveRowData;
  const rectangles = [
    { x: 0, y: 0, width: D, height: W },
    { x: D, y: 0, width: L, height: W },
    { x: D + L, y: 0, width: dD2, height: W },
  ];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createShowBoxF1(dF1, -D, D, 0, -3));
  pathList.push(createShowBoxF1(dF1, D, D, W, 3));
  pathList.push(createShowBoxWing(L, -dD2, D, 0, -D));
  pathList.push(createShowBoxWing(L, dD2, D, W, D));
  pathList.push(createShowBoxF2(dF2, -dD2, D + L, 0, 2));
  pathList.push(createShowBoxF2(dF2, dD2, D + L, W, -2));
  // 横向标注
  pathList.push(createHorizontalDoubleArrow(L, D + L / 2, W * 0.3));
  pathList.push(createText(D + L / 2, W * 0.3 + 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(dF1, dF1 / 2, -D / 2));
  pathList.push(createText(dF1 / 2, -D / 2 + 10, 14, "f1"));

  pathList.push(createHorizontalDoubleArrow(D, D / 2, W / 2));
  pathList.push(createText(D / 2, W / 2 + 10, 14, "D"));

  pathList.push(createHorizontalDoubleArrow(dF2, D + L + dF2 / 2, -dD2 / 2));
  pathList.push(createText(D + L + dF2 / 2, -dD2 / 2 + 10, 14, "f2"));

  pathList.push(createHorizontalDoubleArrow(dD2, D + L + dD2 / 2, W / 2));
  pathList.push(createText(D + L + dD2 / 2, W / 2 + 10, 14, "D2"));
  // 竖向
  pathList.push(createDoubleArrow(W, D + L * 0.8, W / 2, -3));
  pathList.push(createText(D + L * 0.8 + 10, D + W / 2, 14, "W"));
  return pathList;
}
// 内衬槽
const createInnerLiningGroove = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height - width / 2} A ${width / 2} ${width / 2} 0 0 0 ${offsetX - width} ${
    offsetY + height
  } L ${offsetX - width} ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 内衬
export function createLiningBox(slaveRowData) {
  const pathList = [];
  const { L, W, D, dCk, dY, dX } = slaveRowData;
  const rectangles = [{ x: 0, y: 0, width: L, height: D }];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  const width = (L - dX * 2) / (dCk - 1);
  for (let index = 0; index < Number(dCk); index++) {
    pathList.push(createInnerLiningGroove(3, dY, L - dX - width * index, 0));
  }
  // 横向标注
  pathList.push(createHorizontalDoubleArrow(L, L / 2, D * 0.9));
  pathList.push(createText(L / 2, D * 0.9 - 10, 14, "L"));
  pathList.push(createHorizontalDoubleArrow(dX, L - dX / 2, dY / 2));
  pathList.push(createText(L - dX / 2, dY / 2 + 10, 14, "x"));
  // 竖向
  pathList.push(createDoubleArrow(D, dX / 2 - 5, D / 2, -3));
  pathList.push(createText(dX / 2, D / 2, 12, "D"));
  return pathList;
}
const createDiagonalEdging = (width, height, offsetX, offsetY) => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = `M ${offsetX} ${offsetY} L ${offsetX + 5} ${offsetY + height} L ${offsetX + width - 5} ${offsetY + height} L${
    offsetX + width
  } ${offsetY}`;
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  return svg;
};
// 信封
export function createEnvelope(slaveRowData) {
  const pathList = [];
  const { L, W, D, dF1, dS1 } = slaveRowData;
  const rectangles = [{ x: 0, y: 0, width: W, height: L }];
  rectangles.forEach(x => {
    pathList.push(boxContent(x.width, x.height, x.x, x.y));
  });
  pathList.push(createTrapezoid(L, 0, 0, dS1));
  pathList.push(createDiagonalEdging(W, -dF1, 0, 0));
  pathList.push(createDiagonalEdging(W, dF1, 0, L));
  pathList.push(createLineWelt(W, L, W, 0));

  // 横向标注
  pathList.push(createHorizontalDoubleArrow(W, W / 2, L * 0.3));
  pathList.push(createText(W / 2, D * 0.3 + 10, 14, "W"));
  pathList.push(createHorizontalDoubleArrow(dS1, -dS1 / 2, L / 2));
  pathList.push(createText(-dS1 / 2, L / 2 + 10, 14, "s1"));
  // 竖向
  pathList.push(createDoubleArrow(L, W * 0.8, L / 2, -3));
  pathList.push(createText(W * 0.8 + 10, L / 2, 14, "L"));
  pathList.push(createDoubleArrow(dF1, W * 0.7, L + dF1 / 2, -3));
  pathList.push(createText(W * 0.7 + 10, L + dF1 / 2, 14, "f1"));
  return pathList;
}
// 抽屉盒
// export function
const createSvg = d => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "0.5");
  return svg;
};
const createDasharraySvg = d => {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "#333");
  svg.setAttribute("stroke-width", "1");
  svg.setAttribute("stroke-dasharray", "4");
  return svg;
};
// 添加虚线效果
// 上下直线贴边
export const createLineWeltTop = (width, height, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}`;
  return createSvg(d);
};

// 上方盒舌等腰梯形
export const createIsoscelesTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${
    offsetX + width
  } ${offsetY}`;
  return createSvg(d);
};
// 盒舌梯形
export const createTrapezoidWeltTop = (width, height, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.5} ${offsetY + height} L ${offsetX + width * 0.9} ${offsetY + height} L ${
    offsetX + width
  } ${offsetY}`;
  return createSvg(d);
};
// 盒舌折叠
export const createFoldWeltTop = (width, height, offsetX, offsetY) => {
  // 判断高度正负值
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.5} L  ${offsetX + width * 0.5} ${offsetY + height * 0.5} 
  L  ${offsetX + width * 0.5} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${offsetX + width} ${offsetY}
  `;
  return createSvg(d);
};
// 盒舌折叠虚线
export const createFoldWeltTopLine = (width, height, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} ${offsetX + width} ${offsetY + height} `;
  return createDasharraySvg(d);
};
// 盒舌圆角
export const createRoundedCornersWeltTop = (width, height, offsetX, offsetY) => {
  const isNegative = (width > 0 && height > 0) || (width < 0 && height < 0);

  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.1} ${offsetY + height * 0.9} L ${offsetX + width} ${offsetY + height} L ${
    offsetX + width
  } ${offsetY}`;
  return createSvg(d);
};
// 盒底组件 直角
export const createRightAngleBoxBottomComponent = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} 
  L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY + size} L ${
    offsetX + width + deep + width + deep
  } ${offsetY}`;
  return createSvg(d);
};
// 盒底组件 5002
export const createBoxBottomComponent1 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.2} ${offsetY + size * 0.5} L ${offsetX + width * 0.2} ${offsetY + size} L ${
    offsetX + width * 0.8
  } ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size * 0.5} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${
    offsetY + size * 0.5
  } L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${
    offsetX + width + deep + width * 0.2
  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${
    offsetY + size
  }
  L ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY} 
  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size} L ${
    offsetX + width + deep + width + deep
  } ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}
  `;
  return createSvg(d);
};
// 盒底组件 5003
export const createBoxBottomComponent2 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} 
  L ${offsetX + width * 0.2} ${offsetY + size} L ${offsetX + width * 0.8} ${offsetY + size} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${
    offsetY + size * 0.5
  }  L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.2} ${offsetY + size} L ${
    offsetX + width + deep + width * 0.2
  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8}  ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.8} ${
    offsetY + size
  } ${offsetX + width + deep + width} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
  L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size * 0.5} L ${offsetX + width + deep + width + deep * 0.5} ${offsetY + size} L ${
    offsetX + width + deep + width + deep
  } ${offsetY + size} L ${offsetX + width + deep + width + deep} ${offsetY}

  `;
  return createSvg(d);
};
// 盒底组件 5004
export const createBoxBottomComponent3 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} 
  L ${offsetX + width * 0.05} ${offsetY + size} L ${offsetX + width * 0.25} ${offsetY + size} L ${offsetX + width * 0.5} ${offsetY + size * 0.5} L ${
    offsetX + width * 0.75
  } ${offsetY + size} L ${offsetX + width * 0.95} ${offsetY + size} L ${offsetX + width} ${offsetY}
  L ${offsetX + width + deep * 0.1} ${offsetY + size} L ${offsetX + width + deep * 0.5} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep + width * 0.05} ${offsetY + size} L ${offsetX + width + deep + width * 0.25} ${offsetY + size} L ${
    offsetX + width + deep + width * 0.5
  } ${offsetY + size * 0.5} L ${offsetX + width + deep + width * 0.75} ${offsetY + size} L ${offsetX + width + deep + width * 0.95} ${
    offsetY + size
  } L ${offsetX + width + deep + width} ${offsetY}
  L ${offsetX + width * 2 + deep + deep * 0.5} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.9} ${offsetY + size} L ${
    offsetX + width * 2 + deep + deep
  } ${offsetY + size} L ${offsetX + width * 2 + deep * 2} ${offsetY}
  `;
  return createSvg(d);
};
// 盒底组件 5005
export const createBoxBottomComponent4 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} 
  L ${offsetX} ${offsetY + size} L ${offsetX + width * 0.3} ${offsetY + size} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY + size} L ${offsetX + width + deep * 0.3} ${offsetY + size} L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + deep + width * 0.3} ${offsetY + size} L ${offsetX + width * 2 + deep} ${offsetY}
  L ${offsetX + width * 2 + deep} ${offsetY + size} L ${offsetX + width * 2 + deep + deep * 0.3} ${offsetY + size} L ${
    offsetX + width * 2 + deep * 2
  } ${offsetY}
  `;
  return createSvg(d);
}; // 盒底组件 5006
export const createBoxBottomComponent5 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} 
  A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width} ${offsetY}
  A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width + deep} ${offsetY}
  A ${width * 0.5} ${width * 0.5} 0 0 0 ${offsetX + width * 2 + deep} ${offsetY}
  A ${deep * 0.5} ${deep * 0.5} 0 0 0 ${offsetX + width * 2 + deep * 2} ${offsetY}
  `;
  return createSvg(d);
};
// 盒底组件 5007
export const createBoxBottomComponent6 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} 
  L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}
  L ${offsetX + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.2} ${offsetY + size}
  L ${offsetX + width + deep * 0.8}  ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${offsetX + width + deep * 0.8} ${offsetY + size * 0.7}
  L ${offsetX + width + deep} ${offsetY}
  L ${offsetX + width + deep} ${offsetY + size} L ${offsetX + width + width + deep} ${offsetY + size} L ${offsetX + width + deep + width} ${offsetY}
  L ${offsetX + width + deep + width + deep * 0.2} ${offsetY + size * 0.7} A ${size * 0.1} ${size * 0.1} 0 0 0 ${
    offsetX + width + deep + width + deep * 0.2
  } ${offsetY + size}
  L ${offsetX + width + deep + width + deep * 0.8}  ${offsetY + size} A ${size * 0.1} ${size * 0.1} 0 0 0 ${
    offsetX + width + deep + width + deep * 0.8
  } ${offsetY + size * 0.7}
  L ${offsetX + width + deep + width + deep} ${offsetY}
  `;
  return createSvg(d);
};
// 部件
export const createBoxComponentNew = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY + deep + size} L ${offsetX} ${offsetY + deep + size} L ${offsetX} ${offsetY}`;
  return createSvg(d);
};
// 部件1
export const createBoxComponentNew1 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}`;
  return createSvg(d);
};
// 部件2
export const createBoxComponentNew2 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width * 0.4} ${offsetY} L ${offsetX + width * 0.4} ${offsetY + size} L ${offsetX + width * 0.6} ${
    offsetY + size
  } L ${offsetX + width * 0.6} ${offsetY} L ${offsetX + width} ${offsetY}`;
  return createSvg(d);
};
// 部件3
export const createBoxComponentNew3 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${offsetY + deep * 2} L ${offsetX + width * 0.2} ${
    offsetY + deep * 2 + size
  } L ${offsetX + width * 0.4} ${offsetY + deep * 2 + size}
  L ${offsetX + width * 0.4} ${offsetY + deep * 2} L ${offsetX + width * 0.6} ${offsetY + deep * 2} L${offsetX + width * 0.6} ${
    offsetY + deep * 2 + size
  } L ${offsetX + width * 0.8} ${offsetY + deep * 2 + size} L ${offsetX + width * 0.8} ${offsetY + deep * 2}
  L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${
    offsetY + deep
  } ${offsetX + width} ${offsetY}`;
  return createSvg(d);
};
// 部件4
export const createBoxComponentNew4 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep * 2} L ${offsetX + width} ${offsetY + deep * 2} L ${offsetX + width} ${
    offsetY + deep
  } L ${offsetX} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep}  L ${offsetX + width} ${offsetY} 
  M ${offsetX + width * 0.3} ${offsetY + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep * 0.6} L  ${offsetX + width * 0.7} ${
    offsetY + deep * 0.6
  }  L  ${offsetX + width * 0.7} ${offsetY + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY + deep * 0.8}
  M ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8} L  ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.6} L  ${offsetX + width * 0.7} ${
    offsetY + deep + deep * 0.6
  }  L  ${offsetX + width * 0.7} ${offsetY + deep + deep * 0.8}  L  ${offsetX + width * 0.3} ${offsetY + deep + deep * 0.8}
  `;
  return createSvg(d);
};
// 部件4的小组件
export const createBoxComponentNew4_1 = (width, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + size} L ${offsetX + width} ${offsetY + size} L ${offsetX + width} ${offsetY}Z`;
  return createSvg(d);
};

// 部件5
export const createBoxComponentNew5 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + deep} L ${offsetX + width}  ${offsetY + deep}
  L ${offsetX + width}  ${offsetY} L ${offsetX + width}  ${offsetY + deep} L ${offsetX + width * 0.9}  ${offsetY + deep + size} 
  L ${offsetX + width * 0.1}  ${offsetY + deep + size} L ${offsetX}  ${offsetY + deep}  
  `;
  return createSvg(d);
};
// 手提盒部件
export const createBoxComponentNew6 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY}  L ${offsetX} ${offsetY + deep} L ${offsetX + width * 0.3} ${offsetY + deep}
  L ${offsetX + width * 0.3} ${offsetY + deep + size * 0.5} L ${offsetX + width * 0.7} ${offsetY + deep + size * 0.5}
  L ${offsetX + width * 0.7} ${offsetY + deep} L ${offsetX + width} ${offsetY + deep} L ${offsetX} ${offsetY + deep}
  L ${offsetX} ${offsetY + deep + size} L ${offsetX + width * 0.1} ${offsetY + deep + size} 
  L ${offsetX + width * 0.1} ${offsetY + deep + size * 0.8} L ${offsetX + width * 0.2} ${offsetY + deep + size}
  L ${offsetX + width * 0.8} ${offsetY + deep + size} L ${offsetX + width * 0.9} ${offsetY + deep + size * 0.8} 
  L ${offsetX + width * 0.9} ${offsetY + deep + size}L ${offsetX + width} ${offsetY + deep + size}L ${offsetX + width} ${offsetY}
  `;
  return createSvg(d);
};
// 贴边1
export const createWelt = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + size * 0.6} ${offsetY} L ${offsetX + size * 0.6} ${offsetY + height} L ${
    offsetX + size * 0.6
  } ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX + size * 0.6} ${
    offsetY + height
  } L ${offsetX} ${offsetY + height}`;
  return createSvg(d);
};
// 贴边1
export const createWelt1 = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY + height * 0.1} L ${offsetX + size} ${offsetY + height * 0.9} L ${offsetX} ${
    offsetY + height
  }`;
  return createSvg(d);
};
// 贴边2
export const createWelt2 = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.3} ${size * 0.3} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${
    offsetY + height
  } L 
  ${offsetX + size} ${offsetY + height} A  ${size * 0.3} ${size * 0.3} 0 0 0 ${offsetX} ${offsetY + height} L ${offsetX + size} ${
    offsetY + height
  } L ${offsetX + size} ${offsetY} 
    `;
  // A  ${ size * 0.5 } ${size} 0 0 1 ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 1 ${offsetX + size * 0.5} ${
  //   offsetY + height + Math.abs(size)
  // } A ${size * 0.5} ${size} 0 0 1 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${
  //   offsetY + height
  // } L ${offsetX} ${offsetY + height}`;
  return createSvg(d);
};
export const createWelt2Right = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} A ${size * 0.3} ${size * 0.3} 0 0 0 ${offsetX} ${offsetY} L ${offsetX} ${
    offsetY + height
  }
  L ${offsetX + size} ${offsetY + height} A  ${size * 0.3} ${size * 0.3} 0 0 1 ${offsetX} ${offsetY + height} L ${offsetX + size} ${
    offsetY + height
  } L ${offsetX + size} ${offsetY} `;
  //  A ${
  //   size * 0.5
  // } ${size} 0 0 0 ${offsetX} ${offsetY}  L ${offsetX} ${offsetY + height} A ${size * 0.5} ${size} 0 0 0 ${offsetX + size * 0.5} ${
  //   offsetY + height + Math.abs(size)
  // } A ${size * 0.5} ${size} 0 0 0 ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${
  //   offsetY + height
  // } L ${offsetX} ${offsetY + height}`;
  return createSvg(d);
};
export const createWelt3 = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${
    offsetY + size * 0.3
  } L ${offsetX} ${offsetY + size * 0.3} L ${offsetX} ${offsetY}`;
  return createSvg(d);
};
export const createWelt4 = (height, size, offsetX, offsetY, dSFHS, dXFHS) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - dSFHS} L ${offsetX + size} ${offsetY - dSFHS} L ${offsetX + size} ${
    offsetY + height + dXFHS
  }
  L ${offsetX} ${offsetY + height + dXFHS} L ${offsetX} ${offsetY + height}`;
  return createSvg(d);
};
export const createWelt3Right = (height, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + height} L ${offsetX + size} ${offsetY + height} L ${offsetX + size} ${
    offsetY - size * 0.3
  } L ${offsetX} ${offsetY - size * 0.3} L ${offsetX} ${offsetY}`;
  return createSvg(d);
};
export const createWelt4Right = (height, size, offsetX, offsetY, dSFHS, dXFHS) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY - dSFHS} L ${offsetX + size} ${offsetY - dSFHS} 
  L ${offsetX + size} ${offsetY + height + dXFHS} L ${offsetX} ${offsetY + height + dXFHS} L ${offsetX} ${offsetY + height}`;
  return createSvg(d);
};
// 天地盒
export const createFullTelescope = (width, height, deep, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + width} ${offsetY} L ${offsetX + width} ${offsetY + height} L ${offsetX} ${
    offsetY + height
  } L ${offsetX} ${offsetY}
  L ${offsetX - deep} ${offsetY} L ${offsetX - deep} ${offsetY + height} L ${offsetX} ${offsetY + height}
  L ${offsetX} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height + deep} L ${offsetX + width} ${offsetY + height}
  L ${offsetX + width + deep} ${offsetY + height} L ${offsetX + width + deep} ${offsetY} L ${offsetX + width} ${offsetY}
  L ${offsetX + width} ${offsetY - deep} L ${offsetX} ${offsetY - deep} L ${offsetX} ${offsetY}
  `;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.setAttribute("d", d);
  svg.setAttribute("fill", "transparent");
  svg.setAttribute("stroke", "red");
  svg.setAttribute("stroke-width", "1");
  svg.setAttribute("stroke-dasharray", "4"); // 添加虚线效果
  return svg;
};
// 天地部件1
export const createBoxComponentNewFull = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY}
  L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`;
  return createSvg(d);
};
// 天地部件2
export const createBoxComponentNewFull1 = (width, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + size} ${offsetY} L ${offsetX + size} ${offsetY + width} L ${offsetX} ${offsetY + width}`;
  return createSvg(d);
};
// 天地部件3
export const createBoxComponentNewFull2 = (width, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX} ${offsetY + width * 0.4} L ${offsetX + size} ${offsetY + width * 0.4}
  L ${offsetX + size} ${offsetY + width * 0.6} L ${offsetX}  ${offsetY + width * 0.6} L ${offsetX} ${offsetY + width}
  `;
  return createSvg(d);
};
// 天地部件4
export const createBoxComponentNewFul3 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width}
  L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep * 2} ${offsetY + width * 0.8} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.8}
  L ${offsetX + deep * 2 + size} ${offsetY + width * 0.6} L ${offsetX + deep * 2} ${offsetY + width * 0.6}
  L ${offsetX + deep * 2} ${offsetY + width * 0.4} L ${offsetX + deep * 2 + size} ${offsetY + width * 0.4}
  L ${offsetX + deep * 2 + size} ${offsetY + width * 0.2} L ${offsetX + deep * 2} ${offsetY + width * 0.2}
  L ${offsetX + deep * 2} ${offsetY} L ${offsetX} ${offsetY}
  `;
  return createSvg(d);
};
// 天地部件4
export const createBoxComponentNewFul4 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep * 2} ${offsetY} L ${offsetX + deep * 2} ${offsetY + width} L ${offsetX + deep} ${
    offsetY + width
  } L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width}  L ${offsetX} ${offsetY + width} 
  M ${offsetX + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${offsetY + width * 0.3} L  ${offsetX + deep * 0.6} ${
    offsetY + width * 0.7
  }  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep * 0.8} ${offsetY + width * 0.3}
  M ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3} L  ${offsetX + deep + deep * 0.6} ${offsetY + width * 0.3} L  ${
    offsetX + deep + deep * 0.6
  } ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.7}  L  ${offsetX + deep + deep * 0.8} ${offsetY + width * 0.3}
  `;
  return createSvg(d);
};
// 部件5
export const createBoxComponentNewFul5 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY} L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width} 
  L ${offsetX + deep} ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} L${offsetX + deep + size} ${offsetY + width * 0.9}
  L ${offsetX + deep} ${offsetY + width} L ${offsetX} ${offsetY + width}
  `;
  return createSvg(d);
};
// 手提盒部件
export const createBoxComponentNewFul6 = (width, deep, size, offsetX, offsetY) => {
  const d = `M ${offsetX} ${offsetY}  L ${offsetX + deep} ${offsetY} L ${offsetX + deep} ${offsetY + width * 0.3}
  L ${offsetX + deep + size * 0.5} ${offsetY + width * 0.3} L ${offsetX + deep + size * 0.5} ${offsetY + width * 0.7}
  L ${offsetX + deep} ${offsetY + width * 0.7} L ${offsetX + deep} ${offsetY + width} L ${offsetX + deep} ${offsetY}
  L ${offsetX + deep + size} ${offsetY} L ${offsetX + deep + size} ${offsetY + width * 0.1} 
  L ${offsetX + deep + size * 0.8} ${offsetY + width * 0.1} L ${offsetX + deep + size} ${offsetY + width * 0.2}
  L ${offsetX + deep + size} ${offsetY + width * 0.8} L ${offsetX + deep + size * 0.8} ${offsetY + width * 0.9} 
  L ${offsetX + deep + size} ${offsetY + width * 0.9}L ${offsetX + deep + size} ${offsetY + width}L ${offsetX} ${offsetY + width}
  `;
  return createSvg(d);
};