/* eslint-disable */
import React, { useRef, useState, useEffect } from "react";
import { Select, Button, message, Input, Spin } from "antd";
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 * as commonConfig from "@/utils/config";
import SvgBox from "./svg";
import styles from "./index.less";
const BoxDesignEvent = props => {
  const addState = {};
  const { formData = [], selectData = [], masterData, makeUpPDFRecord = {} } = props;
  const [tableData, setTableData] = useState({});
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false); // 加载状态

  addState.getSqlOptions = async type => {
    setLoading(true);
    const { app, token, makeConfig } = props;
    // const quickQuoteConfig = config.gdsconfigformslave.find(item => item.sControlName === "BtnQuickQuote") || {};
    const { sId } = makeConfig;
    if (!sId) return;
    const url = `${commonConfig.server_host}business/getSelectLimit/${sId}?sModelsId=${sId}`;
    const body = {
      pageNum: 1,
      pageSize: 20,
      sKeyUpFilterName: "",
      sSqlCondition: {
        sType: type,
      },
    };
    const data = await commonServices.postValueService(token, body, url);
    if (data) {
      const option = data.data.dataset.rows;
      option.sort((a, b) => {
        if (a.sCode === "") {
          return -1; // 将 id 为 1 的元素排在前面
        }
        if (b.sCode === "") {
          return 1;
        }
        return 0; // 其他元素保持原顺序
      });
      setOptions(data.data.dataset.rows);
    }
    setLoading(false);
  };

  useEffect(
    () => {
      if (!formData.length) return;

      const data = formData[0].gdsconfigformslave.filter(Item => Item.bVisible);
      setTableData(data);
      props.onSaveState(pre => ({ ...pre, data }));
    },
    [formData.length]
  );

  return {
    ...props,
    tableData,
    ...addState,
    options,
    loading,
  };
};
const BoxDesignCompontent = baseProps => {
  const props = BoxDesignEvent(baseProps);
  const { onCancel, onOk, title, loading, masterConfig, bFullScreen, tableData, options = [] } = props;
  const { slaveData = {}, masterData = {} } = props.state;
  const { boxVisible } = baseProps;
  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 [boxKey, setBoxKey] = useState(new Date().getTime());
  if (!boxVisible) return "";
  useEffect(
    () => {
      if (tableData && tableData.length) {
        const newTableColum = tableData.map(item => {
          return {
            ...item,
            isEditable: true,
            isSelect: false,
            selectImage: null,
            value: "",
          };
        });
        // const last = newTableColum.pop();
        // const newList = [last, ...newTableColum];
        const newList = newTableColum.filter(
          item => item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽")
        );
        const newLists = newTableColum.filter(
          item =>
            !(item.showName.includes("盒长") || item.showName.includes("盒高") || item.showName.includes("盒宽") || item.showName.includes("盒身"))
        );
        const bodyList = newTableColum.filter(item => item.showName.includes("盒身"));
        newLists.forEach(x => {
          if (x.showName === "盒型类别") {
            x.showName = "盒型名称";
          }
        });
        setTableColum(newLists);
        setBoxBodyList(bodyList);
        newList.forEach(item => {
          let name = "";
          if (item.showName === "盒长") {
            name = item.showName + "(L)";
          } else if (item.showName === "盒宽") {
            name = item.showName + "(W)";
          } else if (item.showName === "盒高") {
            name = item.showName + "(D)";
          }
          item.sName = name;
        });
        setTableDataList(newList);
      }
    },
    [tableData]
  );
  const titleList = [
    "上方盒舌",
    "盒底组件",
    "下方盒舌",
    "左(上)插位组件",
    "左贴边位",
    "左(下)插位组件",
    "右(上)插位组件",
    "右贴边位",
    "右(下)插位组件",
  ];
  const titleList1 = [
    { name: "上方盒舌", value: "dSFHS" },
    { name: "盒底组件", value: "dHDC" },
    { name: "下方盒舌", value: "dXFHS" },
    { name: "左(上)插位组件", value: "dZSCW" },
    { name: "左贴边位", value: "dZTBW" },
    { name: "左(下)插位组件", value: "dZXCW" },
    { name: "右(上)插位组件", value: "dYSCW" },
    { name: "右贴边位", value: "dYTBW" },
    { name: "右(下)插位组件", value: "dYXCW" },
  ];
  const newBoxList = [];

  // const boxs = titleList.length + tableData.length;
  tableColum.forEach(item => {
    titleList.push(item.showName);
  });
  console.log("🚀 ~ tableColum:", tableColum);
  boxBodyList.forEach(item => {
    titleList.push(item.showName);
  });
  tableDataList.forEach(item => {
    titleList.push(item.showName);
  });
  // 盒身信息
  titleList.forEach((item, index) => {
    newBoxList.push({
      value: "",
      sName: item,
      isEditable: true,
      isSelect: false,
      selectValue: null,
      selectLabel: "",
      selectImage: null,
      type: null,
      show: true,
      showName: item, // 参数名称
      sAssignFormula:null
    });
  });
  // 部件信息
  if (slaveData && slaveData.length) {
    slaveData.forEach((item, index) => {
      const i = titleList1.findIndex(i => {
        return i.value === item.sCode;
      });
      if (i !== -1) {
        const x = newBoxList.findIndex(z => z.sName === titleList1[i].name);
        newBoxList[x].value = item.iValue;
        newBoxList[x].type = item.sTypes;
        newBoxList[x].showName = item.sName;
        newBoxList[x].selectImage = item.sMakeUpPath;
        newBoxList[x].sName = titleList1[i].name;
        newBoxList[x].sAssignFormula = item.sAssignFormula
        newBoxList[x].bVisible = item.bVisible
      }
    });
  }
  // 盒身信息
  if (masterData) {
    newBoxList.forEach((item, index) => {
      if (item.sName === "盒身") {
        newBoxList[index].value = masterData.sBoxBody;
        newBoxList[index].selectImage = masterData.sMakeUpPath;
        newBoxList[index].type = masterData.sTypes;
      } else if (item.sName === "盒长") {
        newBoxList[index].value = masterData.dBoxLength;
      } else if (item.sName === "盒宽") {
        newBoxList[index].value = masterData.dBoxWidth;
      } else if (item.sName === "盒高") {
        newBoxList[index].value = masterData.dBoxHeight;
      } else if (item.sName === "盒型名称") {
        newBoxList[index].value = masterData.sName;
      }
    });
  }
  // 有数据的时候 盒型设计需要赋值
  useEffect(
    () => {
      if (newBoxList.length > 0 && !arraysAreEqual(boxList, newBoxList)) {
        setBoxList(newBoxList);
      }
    },
    [newBoxList]
  );

  const arraysAreEqual = (arr1, arr2) => {
    if (arr1.length !== arr2.length) return false;
    return arr1.every((item, index) => item.sName === arr2[index].sName);
  };
  useEffect(
    () => {
      const type = boxList.find(item => item.sName === "盒身")?.type;
      const updateLists = () => {
        const topBoxFilter = item => item.sName === "上方盒舌" || item.sName === "盒底组件" || item.sName === "下方盒舌";

        const leftBoxFilter = item => item.sName === "左(上)插位组件" || item.sName === "左贴边位" || item.sName === "左(下)插位组件";

        const rightBoxFilter = item => item.sName === "右(上)插位组件" || item.sName === "右贴边位" || item.sName === "右(下)插位组件";

        if (type === "2" || type === 2 || type === "4" || type === 4 || type === 3 || type === "3") {
          const box = [...boxList];
          box.forEach(x => {
            x.show = true;
          });
          if (type === "2" || type === 2) {
            box.forEach(x => x.sName === "盒底组件" && (x.show = false));
          } else if (type === "4" || type === 4) {
            const title = ["盒底组件", "左贴边位", "右贴边位"];
            box.forEach(x => title.includes(x.sName) && (x.show = false));
          } else if (type === "3" || type === 3) {
            const title = ["左(上)插位组件", "右(下)插位组件", "盒底组件"];
            box.forEach(x => title.includes(x.sName) && (x.show = false));
          }
          setTopBoxList(box.filter(topBoxFilter));
          setLeftBoxList(box.filter(leftBoxFilter));
          if (type === 3 || type === "3") {
            setRightBoxList(box.filter(rightBoxFilter).reverse());
          } else {
            setRightBoxList(box.filter(rightBoxFilter));
          }
        } else {
          const box = [...boxList];
          box.forEach(x => {
            x.show = true;
          });
          setTopBoxList(box.filter(topBoxFilter));
          setLeftBoxList(box.filter(leftBoxFilter));
          setRightBoxList(box.filter(rightBoxFilter));
        }
      };

      updateLists();
    },
    [boxList]
  );

  const handleFocus = (e, index) => {
    if (boxList && boxList.length) {
      const updatedBoxList = [...boxList];
      updatedBoxList[index].isEditable = true;
      setBoxList(updatedBoxList);
    }
  };

  const handleBlur = (e, index) => {
    if (boxList && boxList.length) {
      const updatedBoxList = [...boxList];
      updatedBoxList[index].isEditable = false;
      setBoxList(updatedBoxList);
    }
  };

  const handleChange = (e, index) => {
    const updatedBoxList = [...boxList];
    updatedBoxList[index].value = e.target.value;
    setBoxList(updatedBoxList);
  };

  const handleChangeName = (e, index) => {
    const updatedBoxList = [...boxList];
    updatedBoxList[index].showName = e.target.value;
    setBoxList(updatedBoxList);
  };

  const handleSelect = (name, selectConfig, index, type) => {
    let updatedBoxList = [...boxList];
    updatedBoxList[index].type = name;
    updatedBoxList[index].selectImage = selectConfig.image;
    // 选择盒身数据全部清空

    const typeList = [1, 2, 3, 4];
    if (typeList.includes(type)) {
      const table1 = tableColum.map(x => x.showName);
      const table2 = boxBodyList.map(x => x.showName);
      const table3 = tableDataList.map(x => x.showName);
      const tableTitle = table1.concat(table2, table3);
      updatedBoxList.forEach((x, i) => {
        if (i !== index && !tableTitle.includes(x.sName)) {
          x.value = "";
          x.type = null;
          x.selectValue = null;
          x.selectImage = null;
          // x.showName =
        }
      });
      setIsDefaultValue(false);
      updatedBoxList[index].value = selectConfig.label;
    }
    setBoxList(updatedBoxList);
  };
  const getImage = fileName => {
    const imageUrl = `${commonConfig.file_host}file/download?savePathStr=${fileName}&sModelsId=100&token=${props.token}`;
    return imageUrl;
  };
  // 下来框
  const renderOptionWithImage = option => {
    return (
      <Select.Option key={option.sId} value={option.sCode} label={option.sName} image={getImage(option.sMakeUpPath)}>
        <div style={{ display: "flex", alignItems: "center" }}>
          {option.sMakeUpPath ? <img src={getImage(option.sMakeUpPath)} alt={option.sName} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
          <span>{option.sName}</span>
        </div>
      </Select.Option>
    );
  };
  const svgBoxProps = {
    ...props,
    boxList,
  };
  // 计算展长展宽
  // 创建盒型
  const submit = () => {
    const newSlaveData = [];
    // 判断是新增还是修改

    // 存储子表数据
    boxList.forEach((item, index) => {
      const i = titleList1.findIndex(i => i.name === item.sName);
      const slave = slaveData.find(z => z.sCode === titleList1[i]?.value);
      if (i !== -1) {
        const data = {
          ...slaveData[0],
          handleType: slave ? "update" : "add",
          sName: item.showName,
          sCode: titleList1[i].value,
          iValue: item.value,
          iOrder: index + 1,
          iRowNum: index + 1,
          sId: slave ? slave.sId : commonUtils.createSid(),
          sMakeUpPath: item.selectImage,
          sTypes: item.type,
          bVisible: (item.value ? true : false),
          sParentId: masterData.sId,
          sAssignFormula:item.sAssignFormula
        };
        // if (item.value !== "") {
        newSlaveData.push(data);
        // }
      }
    });
    const submitSlaveData = [];
    slaveData.forEach(item => {
      const i = newSlaveData.findIndex(x => x.scode === item.code);
      if (i === -1) {
        submitSlaveData.push({ ...item, handleType: "del" });
      }
    });
    submitSlaveData.concat(newSlaveData);
    // 存储盒身数据 主表
    const newMasterData = {
      ...masterData,
      sBoxBody: boxList.find(item => item.sName === "盒身")?.value || "",
      dBoxLength: boxList.find(item => item.sName === "盒长")?.value || "",
      dBoxWidth: boxList.find(item => item.sName === "盒宽")?.value || "",
      dBoxHeight: boxList.find(item => item.sName === "盒高")?.value || "",
      sName: boxList.find(item => item.sName === "盒型名称")?.value || "",
      sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "",
      sTypes: boxList.find(item => item.sName === "盒身")?.type || "",
    };
    onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据
  };
  const findIndexBySname = name => {
    const i = boxList.findIndex(x => x.sName === name);
    return i || 0;
  };
  return (
    <AntdDraggableModal
      width="1000px"
      height="calc(100vh - 50px)"
      title={title}
      visible={boxVisible}
      onCancel={onCancel}
      okText="创建"
      onOk={submit}
      bodyStyle={{
        height: "calc(95vh - 105px)",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column",
      }}
      style={{
        top: 50,
      }}
    >
      {/* 盒身信息 */}
      <div className={styles.boxBody} key={boxKey}>
        <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>
    </AntdDraggableModal>
  );
};

export default CommonBase(BoxDesignCompontent);