/* eslint-disable */
import React, { useRef, useState, useEffect } from "react";
import styles from "../index.less";
import SvgBox from "../svg";
import { Select, Button, message, Input, Spin } from "antd-v4";
import { CompressOutlined, ExpandOutlined } from "@ant-design/icons";
import * as commonUtils from "@/utils/utils";
import * as commonFunc from "@/components/Common/commonFunc";
import * as commonBusiness from "@/components/Common/commonBusiness";
import * as commonServices from "@/services/services";
import CommonBase from "@/components/Common/CommonBase";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import CommonViewTable from "@/components/Common/CommonViewTable";
import StaticEditTable from "@/components/Common/CommonTable";
import jsPreviewPdf from "@js-preview/pdf";
import commonConfig from "@/utils/config";
const DoubleLayerBox = props => {
  console.log("🚀 ~ DoubleLayerBox:", props);
  const [boxList, setBoxList] = useState([]);
  const [tableColum, setTableColum] = useState([]); // 盒身类型
  const [tableDataList, setTableDataList] = useState([]); // 盒长
  const [boxBodyList, setBoxBodyList] = useState([]); // 盒身信息
  const [isDefaultValue, setIsDefaultValue] = useState(true); // 是否默认值
  const [topBoxList, setTopBoxList] = useState([]); // 盒身信息
  const [leftBoxList, setLeftBoxList] = useState([]); // 左边
  const [rightBoxList, setRightBoxList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { renderOptionWithImage } = props;
  let boxData = {
    value: "",
    sName: "",
    isEditable: true,
    isSelect: false,
    selectValue: null,
    selectLabel: "",
    selectImage: null,
    type: null,
    show: true,
    showName: "", // 参数名称
    sAssignFormula: null,
    code: "",
  };
  const options = props.options;
  const top = [
    { name: "左贴边位", value: "dZTBW" },
    { name: "上插位组件", value: "dZSCW" },
    { name: "右贴边位", value: "dYTBW" },
  ];
  setTopBoxList(
    top.map(item => {
      boxData.sName = item.name;
      boxData.showName = item.name;
      boxData.code = item.value;
      return boxData;
    })
  );
  const svgBoxProps = {
    ...props,
    boxList: [],
    showNew: 0,
  };
  return (
    <div className={styles.boxBody}>
      <div className={styles.boxTop}>
        {topBoxList.map((topItem, index) => (
          <div key={index} className={styles.boxFlex} style={{ display: topItem.show ? "block" : "none" }}>
            <div className={styles.boxTitle}>{topItem.sName}</div>
            {topItem?.selectImage ? (
              <img
                src={topItem?.selectImage}
                alt={topItem.value}
                style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 20, top: 24, zIndex: 10 }}
              />
            ) : (
              ""
            )}

            <Select
              optionLabelProp="label"
              className="mySelects"
              style={{ width: 180 }}
              defaultValue={options.length ? options[0].value : ""}
              onSelect={(value, option) => handleSelect(value, option, index, 0)}
              onDropdownVisibleChange={async open => {
                if (open) {
                  props.getSqlOptions(index + 1); // 在下拉菜单打开时调用 getSqlOptions
                }
              }}
            >
              {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
            </Select>
            <div className={styles.boxInput}>
              {/* <div className={styles.text}>参数：</div> */}
              <Input
                value={topItem?.showName}
                onChange={e => handleChangeName(e, index)}
                onFocus={e => handleFocus(e, index)}
                onBlur={e => handleBlur(e, index)}
                readOnly={!topItem?.isEditable}
                className={styles.text}
              />
              <Input
                value={topItem?.value}
                onChange={e => handleChange(e, index)}
                onFocus={e => handleFocus(e, index)}
                onBlur={e => handleBlur(e, index)}
                readOnly={!topItem?.isEditable}
                style={{ width: " 80%" }}
              />
            </div>
          </div>
        ))}
      </div>
      <div className={styles.boxLeft}>
        {leftBoxList.map((item, index) => (
          <div key={index + 3} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
            <div className={styles.boxTitle}>{titleList[index + 3]}</div>

            <Select
              optionLabelProp="label"
              className="mySelects"
              style={{ width: 180 }}
              defaultValue={options.length ? options[0].value : ""}
              onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
              onDropdownVisibleChange={async open => {
                if (open) {
                  props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
                }
              }}
            >
              {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
            </Select>
            <div className={styles.boxInput}>
              {item?.selectImage ? (
                <img
                  src={item?.selectImage}
                  alt={item.value}
                  style={{
                    width: 40,
                    height: 30,
                    marginRight: 8,
                    position: "absolute",
                    left: 20,
                    top: -35,
                    zIndex: 10,
                  }}
                />
              ) : (
                ""
              )}
              <Input
                value={item?.showName}
                onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                readOnly={!item?.isEditable}
                className={styles.text}
              />
              <Input
                value={item?.value}
                onChange={e => handleChange(e, findIndexBySname(item.sName))}
                onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                readOnly={!item?.isEditable}
                style={{ width: " 80%" }}
              />
            </div>
          </div>
        ))}
      </div>
      <div className={styles.boxRight}>
        {rightBoxList.map((item, index) => (
          <div key={findIndexBySname(item.sName)} className={styles.boxFlex} style={{ display: item?.show ? "block" : "none" }}>
            <div className={styles.boxTitle}>{titleList[findIndexBySname(item.sName)]}</div>

            <Select
              optionLabelProp="label"
              className="mySelects"
              style={{ width: 180 }}
              defaultValue={options.length ? options[0].value : ""}
              onSelect={(value, option) => handleSelect(value, option, findIndexBySname(item.sName), 0)}
              onDropdownVisibleChange={async open => {
                if (open) {
                  props.getSqlOptions(findIndexBySname(item.sName) + 1); // 在下拉菜单打开时调用 getSqlOptions
                }
              }}
            >
              {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
            </Select>
            <div className={styles.boxInput}>
              {item?.selectImage ? (
                <img
                  src={item?.selectImage}
                  alt={item.value}
                  style={{
                    width: 40,
                    height: 30,
                    marginRight: 8,
                    position: "absolute",
                    left: 20,
                    top: -35,
                    zIndex: 10,
                  }}
                />
              ) : (
                ""
              )}

              <Input
                value={item?.showName}
                onChange={e => handleChangeName(e, findIndexBySname(item.sName))}
                onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                readOnly={!item?.isEditable}
                className={styles.text}
              />
              <Input
                value={item?.value}
                onChange={e => handleChange(e, findIndexBySname(item.sName))}
                onFocus={e => handleFocus(e, findIndexBySname(item.sName))}
                onBlur={e => handleBlur(e, findIndexBySname(item.sName))}
                readOnly={!item?.isEditable}
                style={{ width: " 80%" }}
              />
            </div>
          </div>
        ))}
      </div>
      <div className={styles.boxBottom}>
        <div className={styles.svgBox}>
          <SvgBox {...svgBoxProps} />
        </div>
        <div className={styles.content}>
          {tableColum && tableColum.length
            ? tableColum.map((item, index) => {
                const uniqueIndex = index + 9;
                return (
                  <div key={uniqueIndex} className={styles.boxFlex}>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: "120px" }}>
                        {item.showName}
                      </div>
                      <Input
                        value={boxList[uniqueIndex]?.value}
                        onChange={e => handleChange(e, uniqueIndex)}
                        onFocus={e => handleFocus(e, uniqueIndex)}
                        onBlur={e => handleBlur(e, uniqueIndex)}
                        readOnly={!boxList[uniqueIndex]?.isEditable}
                        style={{ width: " 80%" }}
                      />
                    </div>
                  </div>
                );
              })
            : ""}
          {boxBodyList && boxBodyList.length
            ? boxBodyList.map((item, index) => {
                const uniqueIndex = index + 9 + tableColum.length;

                return (
                  <div key={uniqueIndex} className={styles.boxFlex}>
                    <div className={styles.boxInput}>
                      <div className={styles.text} style={{ width: "120px" }}>
                        {item.showName}
                      </div>
                      {boxList[uniqueIndex]?.selectImage ? (
                        <img
                          src={boxList[uniqueIndex]?.selectImage}
                          alt={boxList[uniqueIndex].value}
                          style={{ width: 40, height: 30, marginRight: 8, position: "absolute", left: 120, top: 6, zIndex: 10 }}
                        />
                      ) : (
                        ""
                      )}
                      {isDefaultValue ? <div className={styles.defaultValue}>{boxList[uniqueIndex]?.value}</div> : ""}
                      <Select
                        optionLabelProp="label"
                        className="mySelects"
                        style={{ width: "80%" }}
                        defaultValue={boxList[uniqueIndex]?.value}
                        onSelect={(value, option) => handleSelect(value, option, uniqueIndex, 1)}
                        onDropdownVisibleChange={async open => {
                          if (open) {
                            props.getSqlOptions(10); // 盒身
                          }
                        }}
                      >
                        {!loading ? options.map(option => renderOptionWithImage(option)) : ""}
                      </Select>
                    </div>
                  </div>
                );
              })
            : ""}
          <div className={styles.boxFlexs}>
            {tableDataList && tableDataList.length
              ? tableDataList.map((item, index) => {
                  const uniqueIndex = index + 9 + tableColum.length + boxBodyList.length;

                  return (
                    <div key={uniqueIndex} className={styles.boxInputs}>
                      <div className={styles.text}>{item.sName}</div>
                      <Input
                        value={boxList[uniqueIndex]?.value}
                        onChange={e => handleChange(e, uniqueIndex)}
                        onFocus={e => handleFocus(e, uniqueIndex)}
                        onBlur={e => handleBlur(e, uniqueIndex)}
                        readOnly={!boxList[uniqueIndex]?.isEditable}
                        style={{ width: " 60%" }}
                      />
                    </div>
                  );
                })
              : ""}
          </div>
        </div>
      </div>
    </div>
  );
};
export default DoubleLayerBox;