/* 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";
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 = 200;
  const clientHeight = 300;
  const boxScale = 300 / 400;
  // 找出盒型信息
  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(dWlkd / dMachineWidth);
  const verticalBoxes = Math.floor(dWlcd / dMachineLength);
  const scaleX = (clientWidth - 50) / (dWlkd + 60);
  const scaleY = (clientHeight - 25) / (dWlcd + 90);
  // 动态生成多个 materialBox
  const generateMaterialBoxes = () => {
    const boxes = [];
    for (let i = 0; i < horizontalBoxes * verticalBoxes; i++) {
      boxes.push(
        <div
          key={i}
          className={styles.materialBox}
          style={{
            width: `${dMachineWidth}px`,
            height: `${dMachineLength}px`,
            backgroundColor: "#b7e0ff",
            border: "1px soild #333",
            position: "relative",
          }}
        >
          <div
          ref={nTextRef}
            style={{
              position: "absolute",
              bottom: "-30px",
              left: "0px",
              width: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60)}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: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60) * 0.2}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
            <span
              style={{
                display: "inline-block",
                color: "red",
              }}
            >
              {dMachineWidth}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                top: "10px",
                right: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                right: "5px",
                width: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60) * 0.2}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
          </div>
          <div
           ref={nTextRefs}
            style={{
              position: "absolute",
              top: "0",
              right: "-30px",
              height: `${dMachineLength * (clientHeight - 25) / (dWlcd + 90)}px`,
              lineHeight: `${dMachineLength * (clientHeight - 25) / (dWlcd + 90)}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: `${dMachineLength *(clientHeight - 25) / (dWlcd + 90)* 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
            <span
              style={{
                color: "red",
              }}
            >
              {dMachineLength}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                bottom: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: "5px",
                left: "15px",
                height: `${dMachineLength *(clientHeight - 25) / (dWlcd + 90) * 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) {
      // 计算父元素的缩放因子
      const scaleX = (clientWidth - 50) / (dWlkd + 60);
      const scaleY = (clientHeight - 25) / (dWlcd + 90);

      // 对父元素应用缩放
      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: `${dWlkd}px`,
            height: `${dWlcd}px`,
            margin: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
            display: "grid",
            gridTemplateColumns: `repeat(${horizontalBoxes}, ${dMachineWidth}px)`,
            gridTemplateRows: `repeat(${verticalBoxes}, ${dMachineLength}px)`,
            gap: "0", // 可以根据需要调整间距
            position: "relative",
          }}
          ref={boxRef}
        >
          <div
            ref={textRef}
            style={{
              position: "absolute",
              left: "0px",
              width: `${dWlkd * (clientWidth - 50) / (dWlkd + 60)}px`,
              fontSize: "11px",
              textAlign: "center",
              height: "30px",
              bottom:`-120px`,
              lineHeight:'30px'
            }}
          >
            <VerticalRightOutlined
              style={{
                position: "absolute",
                top: "10px",
                left: "0px",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "15px",
                left: "5px",
                width: `${5}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
            <span ref={textRef}> 
              <span
                style={{
                  display: "inline-block",
                  color: "red",
                }}
              >
                {dWlkd}
              </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: `${5}px`,
                backgroundColor: "#333",
                height: "1px",
              }}
            />
          </div>
          <div
            ref={textRefs}
            style={{
              position: "absolute",
              top: "0",
              right: "-140px",
              height: `${dWlcd*(clientHeight - 25) / (dWlcd + 90)}px`,
              lineHeight: `${dWlcd*(clientHeight - 25) / (dWlcd + 90)}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: `${dWlcd*(clientHeight - 25) / (dWlcd + 90) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
            <span
              style={{
                color: "red",
              }}
            >
              {dWlcd}
            </span>
            <VerticalLeftOutlined
              style={{
                position: "absolute",
                bottom: "0",
                left: "10px",
                transform: `rotateZ(${90}deg)`,
              }}
            />
            <div
              style={{
                position: "absolute",
                bottom: "5px",
                left: "15px",
                height: `${dWlcd*(clientHeight - 25) / (dWlcd + 90) * 0.3}px`,
                backgroundColor: "#333",
                width: "1px",
              }}
            />
          </div>
          {generateMaterialBoxes()}
        </div>
      ) : (
        ""
      )}
    </>
  );
};
export default BoxShowImgMaterial;