/* eslint-disable */
import React, { useEffect, useState, useRef } from "react";
import { VerticalLeftOutlined, VerticalRightOutlined } from "@ant-design/icons";
import styles from "./index.less";
import { bottom } from "react-grid-layout/build/utils";
import { transform } from "@antv/g2/lib/util/transform";
const BoxShowImgMaterial = props => {
  const boxRef = useRef(null);
  const textRef = useRef(null);
  const textRefs = useRef(null);
  const nTextRefs = useRef(null);
  const nTextRef = useRef(null);
  const [boxKey, setBoxKey] = useState(new Date().getTime());
  const clientWidth = 300;
  const clientHeight = 250;
  // 找出盒型信息
  const { slaveData, selectedNode } = props.state;
  const { boxModel } = props;
  const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
  if (slaveDataDetail) {
    // 最大上机长 上机宽 排版长 排版宽 材料长 材料宽
    var { dMaxLength, dMaxWidth, dMachineLength, dMachineWidth, dWlcd, dWlkd, dSBLB, dXBLB, dZBLB, dYBLB, scale } = slaveDataDetail;
  }
  // 计算可以放置的盒子数量
  const horizontalBoxes = Math.floor(dWlcd / dMachineLength);
  const verticalBoxes = Math.floor(dWlkd / dMachineWidth);
  const scaleX = (clientWidth - 70) / (dWlcd);
  const scaleY = (clientHeight - 70) / (dWlkd);
  // 动态生成多个 materialBox
  const generateMaterialBoxes = () => {
    const boxes = [];
    for (let i = 0; i < horizontalBoxes * verticalBoxes; i++) {
      boxes.push(
        <div
          key={i}
          className={styles.materialBox}
          style={{
            width: `${dMachineLength}px`,
            height: `${dMachineWidth}px`,
            backgroundColor: "#b7e0ff",
            position: "relative",
          }}
        >
          <div
            ref={nTextRef}
            style={{
              position: "absolute",
              bottom: "-30px",
              left: "0px",
              width: `${(dMachineLength * scaleX)}px`,
              fontSize: "11px",
              textAlign: "center",
              height: "30px",
              lineHeight: "30px",
              transform: `scale(${1 / scaleX}, ${1 / scaleY})`,
              transformOrigin: "top left",
            }}
          >
            <VerticalRightOutlined
              style={{
                position: "absolute",
                top: "10px",
                left: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                left: "5px",
                width: `${((dMachineLength * scaleX)) * 0.2}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
            <span
              style={{
                display: "inline-block",
                color: "red",
              }}
            >
              {dMachineLength}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                top: "10px",
                right: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                right: "5px",
                width: `${((dMachineLength *scaleX)) * 0.2}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
          </div>
          <div
            ref={nTextRefs}
            style={{
              position: "absolute",
              top: "0",
              right: "-30px",
              height: `${(dMachineWidth * scaleY)}px`,
              lineHeight: `${(dMachineWidth * scaleY)}px`,
              fontSize: "11px",
              textAlign: "center",
              width: "30px",
              transform: `scale(${1 / scaleX}, ${1 / scaleY})`,
              transformOrigin: "top left",
            }}
          >
            <VerticalRightOutlined
              style={{
                position: "absolute",
                top: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "5px",
                left: "15px",
                height: `${((dMachineWidth * scaleY)) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
            <span
              style={{
                color: "red",
              }}
            >
              {dMachineWidth}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                bottom: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: "5px",
                left: "15px",
                height: `${((dMachineWidth * scaleY)) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
          </div>
        </div>
      );
    }
    return boxes;
  };
  // 计算材料利用率
  const availability = (
    ((horizontalBoxes * verticalBoxes * (Number(dMachineLength) * Number(dMachineWidth))) / (Number(dWlcd) * Number(dWlkd))) *
    100
  ).toFixed(2);
  useEffect(
    () => {
      // setBoxKey(new Date().getTime());
      setTimeout(() => {
        //     if (boxRef.current && textRef.current && textRefs.current &&  nTextRef.current && nTextRefs.current)
        if (boxRef.current && textRef.current && textRefs.current && nTextRef.current && nTextRefs.current) {
          // 计算父元素的缩放因子
          // 对父元素应用缩放
          boxRef.current.style.transform = `scale(${scaleX}, ${scaleY})`;
          boxRef.current.style.transformOrigin = "top left";
          // // 对子元素应用逆缩放
          textRef.current.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
          textRef.current.style.transformOrigin = "top left";
          textRefs.current.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
          textRefs.current.style.transformOrigin = "top left";
        }
      }, 0);
    },
    [slaveDataDetail]
  );
  const isMax = slaveDataDetail?.dMaxWidth * slaveDataDetail?.dMaxLength > slaveDataDetail?.dMachineLength * slaveDataDetail?.dMachineWidth;
  const isDPartsLength = slaveDataDetail?.dPartsLength < slaveDataDetail?.dMaxLength && slaveDataDetail?.dPartsWidth < slaveDataDetail?.dMaxWidth;

  const isShow =
    isDPartsLength && slaveDataDetail && slaveDataDetail.dMachineLength && slaveDataDetail.dMaxWidth && slaveDataDetail.dMaxLength && isMax;
  return (
    <>
      {isShow ? (
        <div
          key={boxKey}
          className={styles.box}
          style={{
            width: `${dWlcd}px`,
            height: `${dWlkd}px`,
            margin: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
            display: "grid",
            gridTemplateColumns: `repeat(${horizontalBoxes}, ${dMachineLength}px)`,
            gridTemplateRows: `repeat(${verticalBoxes}, ${dMachineWidth}px)`,
            gap: "0", // 可以根据需要调整间距
            position: "relative",
          }}
          ref={boxRef}
        >
          <div
            ref={textRef}
            style={{
              position: "absolute",
              left: "0px",
              width: `${(dWlcd * (clientWidth - 50)) / (dWlcd + 60)}px`,
              fontSize: "11px",
              textAlign: "center",
              height: "30px",
              bottom: `-${100}px`,
              lineHeight: "30px",
            }}
          >
            <VerticalRightOutlined
              style={{
                position: "absolute",
                top: "10px",
                left: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                left: "5px",
                width: `${30}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
            <span ref={textRef}>
              <span
                style={{
                  display: "inline-block",
                  color: "red",
                }}
              >
                {dWlcd}
              </span>
              <span
                style={{
                  display: "inline-block",
                }}
              >
                材料利用率:
              </span>
              <span
                style={{
                  display: "inline-block",
                  color: "red",
                }}
              >
                {availability}%
              </span>
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                top: "10px",
                right: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                right: "5px",
                width: `${30}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
          </div>
          <div
            ref={textRefs}
            style={{
              position: "absolute",
              top: "0",
              right: "-140px",
              height: `${(dWlkd * scaleY)}px`,
              lineHeight: `${(dWlkd * scaleY)}px`,
              fontSize: "11px",
              textAlign: "center",
              width: "30px",
            }}
          >
            <VerticalRightOutlined
              style={{
                position: "absolute",
                top: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "5px",
                left: "15px",
                height: `${((dWlkd * scaleY)) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
            <span
              style={{
                color: "red",
              }}
            >
              {dWlkd}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                bottom: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: "5px",
                left: "15px",
                height: `${((dWlkd * scaleY)) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
          </div>
          {generateMaterialBoxes()}
        </div>
      ) : (
        ""
      )}
    </>
  );
};
export default BoxShowImgMaterial;