/* eslint-disable */
// eslint-disable-next-line no-plusplus
// eslint-disable-next-line no-mixed-operators

/* 材料开版图 */
import React, { Component, createRef } from "react";
import * as commonUtils from "../../../utils/utils";
import styles from "./index.less";
import { LeftOutlined, RightOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
const dScale = 7;
export default class ShowImg extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.tableRef = createRef(); // 使用 createRef
  }

  /* 根据不同条件 计算排版数 */
  //竖排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineLength，dPartsWidth--》dMachineWidth
  getSp = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
    var dMachineWidth = dMachineWidth;
    var dMachineLength = dMachineLength;
    //计算合版数量
    var iTemp = Math.floor(dMachineWidth / dPartsWidth) * Math.floor(dMachineLength / dPartsLength);
    return iTemp;
  };
  //横排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineWidth，dPartsWidth--》dMachineLength
  getHp = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
    var dMachineWidth = dMachineWidth;
    var dMachineLength = dMachineLength;
    //计算合版数量
    var iTemp = Math.floor(dMachineWidth / dPartsLength) * Math.floor(dMachineLength / dPartsWidth);
    return iTemp;
  };
  //横竖取大
  getHSQD = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
    var iTemp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
    var iTemp2 = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
    if (iTemp2 > iTemp) {
      iTemp = iTemp2;
      // tag= 2;//竖排
    }
    return iTemp;
  };

  getTag = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
    let num = 1;
    var iTemp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
    var iTemp2 = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
    if (iTemp2 > iTemp) {
      num = 2; //竖排
    }
    return num;
  };

  //传入参数  宽、高、长、宽
  getHHP = (dMatLength, dMatWidth, dLength, dWidth) => {
    var p_dMatLength = dMatLength; //
    var p_dMatWidth = dMatWidth; //
    var p_dLength = dLength; //长度*2+两个出血位
    var p_dWidth = dWidth; //高度+两个出血位
    var tr = Math.floor(p_dMatWidth / p_dWidth);
    var td = Math.floor(p_dMatLength / p_dLength);
    //计算合版数量
    var iTemp = Math.floor(p_dMatLength / p_dLength) * Math.floor(p_dMatWidth / p_dWidth);
    var iTemp2 = 0;
    var tmp = true;
    if (dLength >= dWidth) {
      //竖向调用进来的 竖+横
      tmp = dMatWidth > p_dLength;
    } else {
      tmp = dMatLength > dWidth;
    }
    var tr2 = 0;
    var td2 = 0;
    //横排
    if (dLength >= dWidth) {
      if (p_dMatLength - td * p_dLength >= p_dWidth && tmp) {
        if (dLength >= dWidth) {
          //横+竖 才会左边
          // floats=" style='float:left';";
        }
        tr2 = Math.floor(p_dMatWidth / p_dLength);
        td2 = Math.floor((p_dMatLength - td * p_dLength) / p_dWidth);
      }
    } else {
      //竖排
      if (p_dMatWidth - tr * p_dWidth >= p_dLength && tmp) {
        tr2 = Math.floor((p_dMatWidth - tr * p_dWidth) / p_dLength);
        td2 = Math.floor(p_dMatLength / p_dWidth);
        // dTableWidth2 = td2*p_dWidth;
        // dTableHeight2 = tr2*p_dLength;
        // dTrWidth2 = td2*p_dWidth;
        // dTrHeight2 = p_dLength;
        // dTdWidth2 = dLength;
        // dTdHeight2 = dWidth;
      }
    }
    iTemp2 = tr2 * td2;
    iTemp = iTemp + iTemp2;
    return iTemp;
  };

  //添加HTML
  // <select id="sPrintingPlate"  name="sPrintingPlate">
  // <option value="1">横竖取大</opion>
  // <option value="3">横排</opion>
  // <option value="4">竖排</opion>
  // <option value="2">混排</opion>
  addHtml = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, sPrintingPlate, xxfx, wlfx) => {
    const elements = [];
    var dDivHeight = dMachineLength + dBite; //传入的为减去咬口计算时的高度
    var dDivWidth = dMachineWidth; //宽度
    var dTableWidth = 0;
    var dTableHeight = 0;
    var dTrWidth = 0;
    var dTrHeight = 0;
    var dTdWidth = 0;
    var dTdHeight = 0;
    var tr = 0;
    var td = 0;
    if (sPrintingPlate === 3) {
      //横排（垂直纹路）
      dTableHeight = Math.floor(dMachineLength / dPartsWidth) * dPartsWidth;
      dTableWidth = Math.floor(dMachineWidth / dPartsLength) * dPartsLength;
      dTrWidth = Math.floor(dMachineWidth / dPartsLength) * dPartsLength;
      dTrHeight = dPartsWidth;
      dTdWidth = dPartsLength;
      dTdHeight = dPartsWidth;
      tr = Math.floor(dMachineLength / dPartsWidth);
      td = Math.floor(dMachineWidth / dPartsLength);
    } else {
      //竖排（顺纹路）
      dTableHeight = Math.floor(dMachineLength / dPartsLength) * dPartsLength;
      dTableWidth = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth;
      dTrWidth = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth;
      dTrHeight = dPartsLength;
      dTdWidth = dPartsWidth;
      dTdHeight = dPartsLength;
      tr = Math.floor(dMachineLength / dPartsLength);
      td = Math.floor(dMachineWidth / dPartsWidth);
    }
    // alert("宽度："+(dTdWidth-2*dBoold)+"  高度："+(dTdHeight-2*dBoold)+" 出血："+dBoold);
    const sStyleObject = {};
    // sStyleObject.position = 'absolute';
    // sStyleObject.background = '#DDDDFF';
    sStyleObject.width = dDivWidth / dScale + 10;
    sStyleObject.height = dDivHeight / dScale + 10;
    sStyleObject.color = "red";
    const num = {};
    num.display = "block";
    num.position = "absolute";
    num.width = "28px";
    num.top = "48%";
    num.fontSize = "12px";

    var floats = "";
    // var html ="";
    // var div = "<div style='background:#DDDDFF;width:" + dDivWidth + "px;height:" + dDivHeight +"px' dBite =" + dBite + " dBoold =" + dBoold + " >";
    // var table = this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,xxfx);
    // html = div + table + "</div>";

    elements.push(
      <div style={sStyleObject} className={wlfx === 1 ? styles.area : styles.area2} dBite={dBite} dBlood={dBoold}>
        <div className={styles.divHeight}>
          {/* <div className={styles.divArrowLeft} /> */}
          <LeftOutlined className={styles.divArrowLeftIcon} />
          <div className={styles.divHeightLine}>{dMachineWidth + dBite}</div>
          {/* <div className={styles.divArrowRight} /> */}
          <RightOutlined className={styles.divArrowRightIcon} />
        </div>{" "}
        <div className={styles.divWidth}>
          {/* <div className={styles.divArrowTop} />
          <div className={styles.divWidthLine}>
            <span style={num}>{dMachineLength}</span>
          </div>{" "}
          <div className={styles.divArrowTop} /> */}
          <UpOutlined className={styles.divArrowTopIcon} />
          <div className={styles.divWidthLine}>
            <span style={num}>{dMatWidth}</span>
          </div>{" "}
          <DownOutlined className={styles.divArrowBottomIcon} />
        </div>
        {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx)}
      </div>
    );

    return elements;
  };

  handleGetChildTd = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx, i) => {
    const tdArr = [];
    /* xxfx  虚线方向 2：横虚线 1：树虚线;3:无需虚线 */
    // console.log('虚线方向：', xxfx);
    const sTdDiv = {};
    sTdDiv.fontSize = "12px";
    sTdDiv.position = "relative";
    const { controlData, controlSelectedRowKeys } = this.props;
    if (commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys)) {
      const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
      if (iIndex > -1) {
        const tableDataRow = controlData[iIndex];
        const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */
        if (sSpineDirection === 1) {
          /* 长 */
          /* 长书脊逻辑 */
          if (xxfx === 2) {
            /* 横虚线 */
            sTdDiv.width = dTdWidth / dScale;
            // sTdDiv.height = '25%';
            sTdDiv.borderBottom = "1px dashed #ff0000";
          } else if (xxfx === 1) {
            /* 树虚线 */
            sTdDiv.width = dTdWidth / dScale / 2;
            sTdDiv.height = dTdHeight / dScale;
            sTdDiv.borderRight = "1px dashed #ff0000";
          }
        } else {
          /* 短书脊逻辑 */
          if (xxfx === 1) {
            /* 横虚线 */
            sTdDiv.width = dTdWidth / dScale;
            // sTdDiv.height = '25%';
            sTdDiv.borderBottom = "1px dashed #ff0000";
          } else if (xxfx === 2) {
            /* 树虚线 */
            sTdDiv.width = dTdWidth / dScale / 2;
            sTdDiv.height = dTdHeight / dScale;
            sTdDiv.borderRight = "1px dashed #ff0000";
          }
        }
      }
    }

    for (let j = 0; j < td; j++) {
      tdArr.push(
        <td width={dTdWidth / dScale} height={dTdHeight / dScale} dZyBoold={dBoold} xxfx={xxfx} style={{ position: "relative" }}>
          {((td === 1 && j === 0) || j === 0) && i === 0 ? (
            <div className={styles.tdStyleM}>
              <div className={styles.tdWidthM}>{dTdWidth - dBoold * 2}</div>{" "}
            </div>
          ) : (
            ""
          )}
          {((td === 1 && j === 0) || j === 0) && i === 0 ? (
            <div className={styles.tdStyleM1}>
              <div className={styles.tdWidthM}>{dTdHeight - dBoold * 2}</div>{" "}
            </div>
          ) : (
            ""
          )}
          <div style={sTdDiv} />
        </td>
      );
    }
    return tdArr;
  };

  handleGetChildTr = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx) => {
    const trArr = [];
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < tr; i++) {
      trArr.push(
        <tr width={dTrWidth / dScale} height={dTrHeight / dScale}>
          {this.handleGetChildTd(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx, i)}
        </tr>
      );
    }
    return trArr;
  };

  //dDivWidth 对应length,height:对应上级Width xxfx  虚线方向 2：横虚线 1：树虚线;3:无需虚线
  getTable = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx,bgcolor) => {
    const table = [];
    if (dTrWidth > 0 && dTrHeight > 0) {
      /* 当宽度,高度不为空 */
      table.push(
        <table
          bgcolor= {bgcolor? "#b7e0ff":'yellow'}
          border="1"
          width={dTableWidth / dScale}
          height={dTableHeight / dScale}
          className={styles.sTable}
          style={{ floats: floats }}
        >
          {this.handleGetChildTr(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx)}
        </table>
      );
    }
    // var table = " <table  bgcolor ='yellow' border='1' width ='" + dTableWidth /4 + "' height ='" + dTableHeight /4 + "' " + floats + ">";
    // for(var i = 0;i<tr;i++){
    //   table = table + "<tr width ='"+dTrWidth/4 +"' height ='"+dTrHeight/4 +"' dSxBoold='"+dBoold*4+"' >";
    //   for(var j = 0;j<td;j++){
    //     table = table + "<td width ='"+dTdWidth/4+"' height = '"+dTdHeight/4+"' dZyBoold='"+dBoold*4+"' xxfx='"+xxfx+"' ></td>";
    //   }
    //   table = table + "</tr>";
    //
    // }
    // table = table+ "</table>";
    return table;
  };

  // //横向+竖 添加HTML
  getHHPHtml = (dMatLength, dMatWidth, dLength, dWidth, dBoold, dBite, wlfx, bBox) => {
    const elements = [];
    var p_dMatLength = dMatLength;
    var p_dMatWidth = dMatWidth; //减去咬口后的高度
    var p_dLength = dLength; //长度*2+两个出血位
    var p_dWidth = dWidth; //高度+两个出血位

    var dDivWidth = dMatLength;
    var dDivHeight = dMatWidth;
    var dTableWidth = Math.floor(p_dMatLength / p_dLength) * p_dLength;
    var dTableHeight = Math.floor(p_dMatWidth / p_dWidth) * p_dWidth;
    var dTrWidth = Math.floor(p_dMatLength / p_dLength) * p_dLength;
    var dTrHeight = p_dWidth;
    var dTdWidth = dLength;
    var dTdHeight = dWidth;
    var iTemp2 = 0;
    var floats = "";
    var tr = Math.floor(p_dMatWidth / p_dWidth);
    var td = Math.floor(p_dMatLength / p_dLength);

    var tmp = true;
    if (dLength >= dWidth) {
      //竖向调用进来的 竖+横
      tmp = dMatWidth > p_dLength;
    } else {
      tmp = dMatLength > p_dWidth;
    }
    var tr2 = 0;
    var td2 = 0;
    //大的长 - Math.floor(大长 / 小长)*小长>= 小短, 并且大的高度>小的长度
    var dTableWidth2 = 0;
    var dTableHeight2 = 0;
    var dTrWidth2 = 0;
    var dTrHeight2 = 0;
    var dTdWidth2 = 0;
    var dTdHeight2 = 0;

    if (dLength >= dWidth) {
      // alert(p_dMatLength - td * p_dLength);
      // alert(p_dWidth);
      if (p_dMatLength - td * p_dLength >= p_dWidth && tmp) {
        if (dLength >= dWidth) {
          //横+竖 才会左边
          floats = " style='float:left';";
        }
        tr2 = Math.floor(p_dMatWidth / p_dLength);
        td2 = Math.floor((p_dMatLength - td * p_dLength) / p_dWidth);
        dTableWidth2 = td2 * p_dWidth;
        dTableHeight2 = tr2 * p_dLength;
        dTrWidth2 = td2 * p_dWidth;
        dTrHeight2 = p_dLength;
        dTdWidth2 = p_dWidth;
        dTdHeight2 = p_dLength;
      }
    } else {
      if (p_dMatWidth - tr * p_dWidth >= p_dLength && tmp) {
        tr2 = Math.floor((p_dMatWidth - tr * p_dWidth) / p_dLength);
        td2 = Math.floor(p_dMatLength / p_dWidth);
        dTableWidth2 = td2 * p_dWidth;
        dTableHeight2 = tr2 * p_dLength;
        dTrWidth2 = td2 * p_dWidth;
        dTrHeight2 = p_dLength;
        dTdWidth2 = p_dWidth;
        dTdHeight2 = p_dLength;
      }
    }

    iTemp2 = tr2 * td2;
    // var html ="";
    // var div = "<div style=\"background:#DDDDFF;width:" + dMatLength + "px;height:" + dMatWidth + " \" width =" + dMatLength + "px height ='" + dMatWidth + "' dBite ='" + dBite + "'  >";
    // var table = getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,0);
    //
    //
    // if(iTemp2>0){
    //   table = table + getTable(dTableWidth2,dTableHeight2,dTrWidth2,dTrHeight2,dTdWidth2,dTdHeight2,floats,dBoold,tr2,td2,0);
    // }
    // html = div + table + "</div>";
    // $("#table").html(html);
    const sStyleObject = {};
    // sStyleObject.position = 'absolute';
    // sStyleObject.background = '#DDDDFF';
    sStyleObject.width = dMatLength / dScale + 10;
    sStyleObject.height = dMatWidth / dScale + 10;
    sStyleObject.color = "red";
    const num = {};
    num.display = "block";
    num.position = "absolute";
    num.width = "28px";
    num.top = "48%";
    num.fontSize = "12px";
    // 快速报价单独处理 bBox 为true
    if (bBox) {
      if (iTemp2 > 0) {
        elements.push(
          <div
            className={wlfx === 1 ? styles.area : styles.area2}
            style={sStyleObject}
            width={dMatLength / dScale}
            height={dMatWidth / dScale}
            dBite={dBite}
            dBlood={dBoold}
          >
            <div className={styles.bBoxDivHeight}>
              {/* <div className={styles.divArrowLeft} /> */}
              <LeftOutlined className={styles.divArrowLeftIcon} style={{color:'#333'}}/>
              <div className={styles.divHeightLine} style={{backgroundColor:'#333'}}>{dMatLength + dBite}</div>
              {/* <div className={styles.divArrowRight} /> */}
              <RightOutlined className={styles.divArrowRightIcon} style={{color:'#333'}}/>
            </div>{" "}
            <div className={styles.bBoxDivWidth}>
              {/* <div className={styles.divArrowTop} />
              <div className={styles.divWidthLine}>
                <span style={num}>{dMatWidth}</span>
              </div>{" "}
              <div className={styles.divArrowTop} /> */}
              <UpOutlined className={styles.divArrowTopIcon} style={{color:'#333'}}/>
              <div className={styles.divWidthLine} style={{backgroundColor:'#333'}}>
                <span style={num}>{dMatWidth}</span>
              </div>{" "}
              <DownOutlined className={styles.divArrowBottomIcon} style={{color:'#333'}}/>
            </div>
            {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
            {this.getTable(dTableWidth2, dTableHeight2, dTrWidth2, dTrHeight2, dTdWidth2, dTdHeight2, floats, dBoold, tr2, td2, 0)}
          </div>
        );
      } else {
        elements.push(
          <div
            className={wlfx === 1 ? styles.area : styles.area2}
            style={bBox?{...sStyleObject,backgroundImage:'none',backgroundColor:'rgb(243, 243, 243)'}: sStyleObject}
            width={dMatLength / dScale}
            height={dMatWidth / dScale}
            dBite={dBite}
            dBlood={dBoold}
          >
            <div className={styles.bBoxDivHeight}>
              {/* <div className={styles.divArrowLeft} /> */}
              <LeftOutlined className={styles.divArrowLeftIcon} style={{color:'#333'}}/>
              <div className={styles.divHeightLine} style={{backgroundColor:'#333',height:'1px'}}>{dMatLength + dBite}</div>
              {/* <div className={styles.divArrowRight} /> */}
              <RightOutlined className={styles.divArrowRightIcon} style={{color:'#333'}}/>
            </div>{" "}
            <div className={styles.bBoxDivWidth}>
              {/* <div className={styles.divArrowTop} /> */}
              <UpOutlined className={styles.divArrowTopIcon} style={{color:'#333'}}/>
              <div className={styles.divWidthLine} style={{backgroundColor:'#333',width:'1px'}}>
                <span style={num}>{dMatWidth}</span>
              </div>{" "}
              <DownOutlined className={styles.divArrowBottomIcon} style={{color:'#333'}}/>
              {/* <div className={styles.divArrowTop} /> */}
            </div>
            {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0,true)}
          </div>
        );
      }
    } else {
      if (iTemp2 > 0) {
        elements.push(
          <div
            className={wlfx === 1 ? styles.area : styles.area2}
            style={sStyleObject}
            width={dMatLength / dScale}
            height={dMatWidth / dScale}
            dBite={dBite}
            dBlood={dBoold}
          >
            <div className={styles.divHeight}>
              <div className={styles.divArrowLeft} />
              <div className={styles.divHeightLine}>{dMatLength + dBite}</div>
              <div className={styles.divArrowRight} />
            </div>{" "}
            <div className={styles.divWidth}>
              <div className={styles.divArrowTop} />
              <div className={styles.divWidthLine}>
                <span style={num}>{dMatWidth}</span>
              </div>{" "}
              <div className={styles.divArrowTop} />
            </div>
            {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
            {this.getTable(dTableWidth2, dTableHeight2, dTrWidth2, dTrHeight2, dTdWidth2, dTdHeight2, floats, dBoold, tr2, td2, 0)}
          </div>
        );
      } else {
        elements.push(
          <div
            className={wlfx === 1 ? styles.area : styles.area2}
            style={sStyleObject}
            width={dMatLength / dScale}
            height={dMatWidth / dScale}
            dBite={dBite}
            dBlood={dBoold}
          >
            <div className={styles.divHeight}>
              <div className={styles.divArrowLeft} />
              <div className={styles.divHeightLine}>{dMatLength + dBite}</div>
              <div className={styles.divArrowRight} />
            </div>{" "}
            <div className={styles.divWidth}>
              <div className={styles.divArrowTop} />
              <div className={styles.divWidthLine}>
                <span style={num}>{dMatWidth}</span>
              </div>{" "}
              <div className={styles.divArrowTop} />
            </div>
            {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
          </div>
        );
      }
    }

    return elements;
  };

  /* 计算排版数 */
  handleGetImgPQty = tableDataRow => {
    let divStr = [];
    let dSingleQty = 0; /* 排版数 */
    let tag = 1; //1横排还是2竖排
    let dPartsWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽 */
    let dPartsLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机高 */
    let dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMaterialWidth, 0)); /* 材料宽 */
    let dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMaterialLength, 0)); /* 材料高 */
    const sPrintingPlate = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sMaterialsPlate, 0)); /* 排版方式 */
    const bBox = tableDataRow.bBox;
    if (tableDataRow.bMachineStyle) {
      /* 如果材料是否取原材料规格打了勾 */
      dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 材料宽 */
      dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 材料高 */
    }

    /* 滚轮 */
    if (tableDataRow.bReel) {
      const dCampare1 = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth; /* 1060 */
      const dCampare2 = Math.floor(dMachineWidth / dPartsLength) * dPartsLength; /* 590*/
      if (dCampare1 > dCampare2) {
        dMachineLength = dPartsLength;
      } else {
        dMachineLength = dPartsWidth;
      }
    }

    const dBoold = 0; /* 出血位 */
    const dBite = 0; /* 咬口 */
    // console.log('dPartsWidth', dPartsWidth, dPartsLength);
    var dMachineTmp = 0;
    var dPartsTmp = 0;
    var tagval = "";
    var xxfx = 3; //虚线方向 1：横虚线 2：树虚线;3:无需虚线
    var wlfx = 1; //竖纹
    //机器长宽转换
    if (dMachineWidth > dMachineLength) {
      dMachineTmp = dMachineWidth; //上级高
      dMachineWidth = dMachineLength; //上级宽
      dMachineLength = dMachineTmp;
      wlfx = 2;
    }
    //长宽转换（dLength 高度、dWidth 表示宽度,高度永远大于宽度）
    if (dPartsWidth > dPartsLength) {
      dPartsTmp = dPartsWidth; //上级高
      dPartsWidth = dPartsLength; //上级宽
      dPartsLength = dPartsTmp;
    }
    dMachineWidth = dMachineWidth - dBite;

    const sCutMethod = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sCutMethod, 0)); /* 裁切方式 */
    const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */

    // console.log('sPrintingPlate', sPrintingPlate);
    // console.log('sCutMethod', sCutMethod);
    // console.log('sSpineDirection', sSpineDirection);
    let tmpBl = 1; //排版数乘的数字，如果书类为2 默认是1
    let tmp = 0;
    //三边裁切
    if (false) {
      //长书(1,3,4)
      if (sSpineDirection === 1) {
        dPartsLength = dPartsLength;
        dPartsWidth = dPartsWidth * 2;
      } else {
        dPartsWidth = dPartsWidth;
        dPartsLength = dPartsLength * 2;
      }
      tmpBl = 2;
      dPartsWidth = dPartsWidth + 2 * dBoold;
      dPartsLength = dPartsLength + 2 * dBoold;
      if (sPrintingPlate === 1) {
        /* 横竖取大 */
        tmp = this.getHSQD(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
        dSingleQty = tmp * 2;
        tag = this.getTag(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
        if (tag === 2) {
          // alert("横竖取大==版数："+tmp*2);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
        } else {
          // alert("横竖取大==版数："+tmp*2);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
        }

        // console.log('横竖取大排版数：', dSingleQty);
      } else if (sPrintingPlate === 3) {
        /* 横排 */
        if (wlfx === 1 && sSpineDirection === 1) {
          //长书脊
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx === 2 && sSpineDirection === 1) {
          //长书脊
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx === 1 && sSpineDirection === 2) {
          //长书脊
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx == 2 && sSpineDirection == 2) {
          //长书脊
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
          dSingleQty = tmp * 2;
        }
      } else if (sPrintingPlate === 4) {
        /* 竖排 */
        //竖排
        if (wlfx === 1 && sSpineDirection === 1) {
          //长书脊
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx === 2 && sSpineDirection === 1) {
          //长书脊
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx === 1 && sSpineDirection === 2) {
          //长书脊
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
          dSingleQty = tmp * 2;
        } else if (wlfx === 2 && sSpineDirection === 2) {
          //长书脊
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
          dSingleQty = tmp * 2;
        }
      } else if (sPrintingPlate === 2) {
        /* 混排 */
        //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
      }
    } else {
      /* 四边裁 */
      dPartsWidth = dPartsWidth + 2 * dBoold;
      dPartsLength = dPartsLength + 2 * dBoold;
      if (sPrintingPlate === 3) {
        /* 横排 */
        if (wlfx === 1) {
          //长书级
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          dSingleQty = tmp;
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 3, wlfx);
        } else {
          //长书级
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          dSingleQty = tmp;
          // $("#dPlateQty").val(tmp);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 3, wlfx);
        }
        // var tmp = getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
        // alert("横排版数："+tmp);
        // addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2);
      } else if (sPrintingPlate === 4) {
        /* 竖排 */
        //竖排
        if (wlfx === 1) {
          //长书级
          tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          dSingleQty = tmp;
          // $("#dPlateQty").val(tmp);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 3, wlfx);
        } else {
          //长书级
          tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
          dSingleQty = tmp;
          // $("#dPlateQty").val(tmp);
          divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 3, wlfx);
        }
      } else {
        /* 除了横排 、竖排 其他都是混排 */
        //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
        // if( sCutMethod===1){
        //   console.log("书没有混排");
        //   return;
        // }
        //竖排+横排
        let htTmpTag = 0;
        let tmp3 = 0;
        tmp = this.getHHP(dMachineWidth, dMachineLength, dPartsLength, dPartsWidth);
        tmp3 = this.getHHP(dMachineWidth, dMachineLength, dPartsWidth, dPartsLength);
        if (tmp < tmp3) {
          tmp = tmp3;
          htTmpTag = 1;
        }
        // alert("混拼排版数："+tmp);
        // $("#dPlateQty").val(tmp);
        dSingleQty = tmp;

        //哪个大取哪个
        if (htTmpTag == 0) {
          divStr = this.getHHPHtml(dMachineWidth, dMachineLength, dPartsLength, dPartsWidth, dBoold, dBite, wlfx, bBox);
        } else {
          divStr = this.getHHPHtml(dMachineWidth, dMachineLength, dPartsWidth, dPartsLength, dBoold, dBite, wlfx, bBox);
        }
      }
    }

    const lrl = ((tmp * dPartsLength * dPartsWidth) / (dMachineWidth * (dMachineLength + dBite))) * 100;

    const isNumber = value => {
      return typeof value === "number" && !Number.isNaN(value);
    };
    /* 增加利润率显示 */
    const dProfit = commonUtils.convertFixNum(lrl, 2);
    const dProfitStr = commonUtils.isNotEmptyNumber(dProfit) ? dProfit + "%" : 0;
    divStr.push(
      <div className={styles.fontArea} style={{marginTop:`${bBox?30:0}px`}}>
        <div style={{ fontSize: "12px", color: "#000" }}>
          材料利用率：
          <span style={{ color: "#ff0000" }}>{dProfitStr}</span>{" "}
        </div>
      </div>
    );

    return isNumber(dProfit) ? divStr : null;
  };

  render() {
    let element = "";
    const { controlData, controlSelectedRowKeys, materialsData, bBox } = this.props;
    console.log(this.props);

    if (commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys) && commonUtils.isNotEmptyArr(materialsData)) {
      const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
      const materialsDataFilter = materialsData.filter(
        item => controlSelectedRowKeys.includes(item.sControlId) && item.sType === "0"
      ); /* 取部件材料的第一条11 */
      if (iIndex > -1 && commonUtils.isNotEmptyArr(materialsDataFilter)) {
        const tableDataRow = controlData[iIndex];
        const materialRow = materialsDataFilter[0];
        if (tableDataRow && materialRow) {
          const dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机高 */
          const dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽 */
          /* 材料表的材料规格 */
          let dMaterialLength =
            !commonUtils.isEmpty(materialRow.sMaterialsStyle) && materialRow.sMaterialsStyle.split("*").length === 2
              ? materialRow.sMaterialsStyle.split("*")[1]
              : 0;
          dMaterialLength = commonUtils.convertStrToNumber(commonUtils.isNull(dMaterialLength, 0)); /* 产品宽 */
          dMaterialLength = typeof dMaterialLength === "number" && !isNaN(dMaterialLength) ? dMaterialLength : 0; /* 产品宽 */

          let dMaterialWidth =
            !commonUtils.isEmpty(materialRow.sMaterialsStyle) && materialRow.sMaterialsStyle.split("*").length === 2
              ? materialRow.sMaterialsStyle.split("*")[0]
              : 0;
          dMaterialWidth = commonUtils.convertStrToNumber(commonUtils.isNull(dMaterialWidth, 0)); /* 材料高 */
          dMaterialWidth = typeof dMaterialWidth === "number" && !isNaN(dMaterialWidth) ? dMaterialWidth : 0; /* 材料宽 */
          tableDataRow.dMaterialWidth = dMaterialWidth;
          tableDataRow.dMaterialLength = dMaterialLength;

          tableDataRow.bMachineStyle = materialRow.bMachineStyle; /* 是否取原材料规格 */
          tableDataRow.bReel = materialRow.bReel;

          if (dMachineLength === 0 || dMachineWidth === 0 || dMaterialLength === 0 || dMaterialLength === 0) {
            element = "";
          } else {
            element = this.handleGetImgPQty(tableDataRow);
          }
        }
      }
    }
    if (bBox && this.props.state.slaveData && this.props.state.slaveData.length > 0) {
      const saveIndex = this.props.state.slaveData.findIndex(
        item => item.sTreeNodeName === this.props.state.selectedNode.showName && item.sBoxModel === this.props.boxModel
      );
      const { newMaterialLength, newMaterialWidth, materialLength, materialWidth, dWlcd, dWlkd } = this.props.state.slaveData[saveIndex];
      // 计算出来的最大尺寸
      const tableDataRow = {
        dMaterialLength: dWlcd || 0,
        dMaterialWidth: dWlkd || 0,
        dMachineWidth: materialWidth || 0,
        dMachineLength: materialLength || 0,
        bBox,
      };
      if (materialLength) {
        element = this.handleGetImgPQty(tableDataRow);
      }

      setTimeout(() => {
        if (this.tableRef && this.tableRef.current) {
          this.tableRef.current.style.transform = `scale(${1.2})`;
          this.tableRef.current.style.transformOrigin = `0 0`;
          // this.tableRef.current.style.margin = "30px 0 0 50px";
        }
      }, 200);
    }

    return (
      <div id="table" className={styles.bigDiv} ref={this.tableRef}>
        {element}
      </div>
    );
  }
}