/* eslint-disable */
import React, { Component, useState, useEffect } from "react";
import CommonBase from "../../Common/CommonBase"; /* 获取配置及数据 */
import CommonSales from "../../Common/CommonBillEvent"; /* 继承销售模块业务功能 */
import * as commonFunc from "../../Common/commonFunc"; /* 通用单据方法 */ /* 通用单据方法 */
import { Form } from "@ant-design/compatible";
import { Spin, Tree, Select, Input } from "antd-v4";
import styles from "./index.less";
import { ArrowLeftOutlined, FolderFilled, FolderOpenFilled, FileTextFilled, PlusOutlined, MinusOutlined } from "@ant-design/icons";
import SvgBox from "./svg";
import img1 from "../../../assets/paiban1.png";
class BoxProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      boxList: [],
    };
  }
  // 添加一个方法来更新 boxList
  updateBoxList = newBoxList => {
    this.setState({ boxList: newBoxList });
  };
  render() {
    const { pageLoading, masterData, fastOrderModalVisible } = this.props;
    const { boxList } = this.state;
    return (
      <Spin spinning={pageLoading}>
        <BoxProjectContent {...this.props} boxList={boxList} updateBoxList={this.updateBoxList} />
      </Spin>
    );
  }
}
const BoxProjectContent = Form.create({
  mapPropsToFields(props) {
    const { masterData, masterConfig } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig);
    return obj;
  },
})(props => {
  const { updateBoxList, boxList } = props; // 获取父组件传递的更新方法
  // 获取树形节点
  const treeData = [
    {
      title: "parent 1",
      key: "0-0",
      icon: <FolderOpenFilled />,
      children: [
        {
          title: "leaf",
          key: "0-0-0",
          icon: <FileTextFilled />,
        },
        {
          title: "leaf",
          key: "0-0-1",
          icon: ({ selected }) => (selected ? <FileTextFilled /> : <FileTextFilled />),
        },
      ],
    },
  ];
  const options = [
    { value: null, label: "", image: null },
    { value: 0, label: "图片1", image: img1 },
    { value: 1, label: "图片2", image: img1 },
    // { value: 2, label: "图片3", image: img1 },
  ];
  // 生成盒型输入框数据并更新到父组件的 state
  useEffect(
    () => {
      let list = [];
      for (let index = 0; index < 9; index++) {
        const data = {
          isEditable: false,
          value: "",
          type: null,
        };
        list.push(data);
      }
      updateBoxList(list); // 调用父组件的方法更新 boxList
    },
    [updateBoxList]
  );

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

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

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

  const handleSelect = (name, selectConfig, index) => {
    const updatedBoxList = [...boxList];
    updatedBoxList[index].type = name;
    updateBoxList(updatedBoxList);
  };
  const titleList = [
    "上方盒舌",
    "盒底组件",
    "下方盒舌",
    "左(上)插位组件",
    "左贴边位",
    "左(下)插位组件",
    "右(上)插位组件",
    "右贴边位",
    "右(下)插位组件",
  ];
  const svgProps = {
    ...props,
    boxList,
    showNew:0
  };
  // const renderTreeNodes = data => {
  //   return data.map(item => {
  //     const { showName, children = [], sId } = item;
  //     const treeNodeProps = {
  //       title: showName,
  //       key: sId,
  //       treeNode: item,
  //       selectable: !children.length,
  //       switcherIcon: params => {
  //         const { expanded, isLeaf } = params;
  //         let icon = "";
  //         if (isLeaf) {
  //           icon = <FileTextFilled style={{ color: "#f7cc4f", fontSize: 20 }} />;
  //         } else if (expanded) {
  //           icon = <FolderOpenFilled style={{ color: "#f7cc4f", fontSize: 20 }} />;
  //         } else {
  //           icon = <FolderFilled style={{ color: "#f7cc4f", fontSize: 20 }} />;
  //         }
  //         return icon;
  //       },
  //     };

  //     return <Tree.TreeNode {...treeNodeProps}>{!!children.length && renderTreeNodes(children)}</Tree.TreeNode>;
  //   });
  // };
  return (
    <Form>
      <div
        style={{
          marginTop: "50px",
        }}
        className={styles.boxDesignContent}
      >
        <div className={styles.tabs}>111</div>
        <div className={styles.content}>
          <div className={styles.boxTree}>
            <Tree
              className={"hide-file-icon"}
              onSelect={(e, select) => {
                // props.setState(pre => ({ ...pre, selectedNode: select.selectedNodes[0]?.treeNode || {} }));
              }}
              // defaultSelectedKeys={[activeTree]}
              defaultExpandAll={true}
              selectedKeys={[1]}
              treeData={treeData}
            >
              {/* {renderTreeNodes(treeData)} */}
            </Tree>
          </div>
          <div className={styles.design}>
            {/* 数值输入 */}
            {/* 上 */}
            {boxList && boxList.length ? (
              <div className={styles.boxTop}>
                {Array.from({ length: 3 }).map((_, index) => (
                  <div key={index} className={styles.boxFlex}>
                    {titleList[index]}
                    <Select
                      optionLabelProp="label"
                      style={{ width: 180 }}
                      defaultValue={options[0].value}
                      onSelect={(value, option) => handleSelect(value, option, index)}
                    >
                      {options.map(item => (
                        <Option key={item.value} value={item.value} label={item.label}>
                          <div style={{ display: "flex", alignItems: "center" }}>
                            {item.image ? <img src={item.image} alt={item.label} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
                            <span>{item.label}</span>
                          </div>
                        </Option>
                      ))}
                    </Select>
                    <div>
                      <div>参数：</div>
                      <Input
                        value={boxList[index]?.value}
                        onChange={e => handleChange(e, index)}
                        onFocus={e => handleFocus(e, index)}
                        onBlur={e => handleBlur(e, index)}
                        readOnly={!boxList[index]?.isEditable}
                        style={{ width: 180 }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              ""
            )}

            {/* 左 */}
            {boxList && boxList.length ? (
              <div className={styles.boxLeft}>
                {Array.from({ length: 3 }, (_, i) => i + 3).map(index => (
                  <div key={index} className={styles.boxFlex}>
                    {titleList[index]}
                    <Select
                      optionLabelProp="label"
                      style={{ width: 180 }}
                      defaultValue={options[0].value}
                      onSelect={(value, option) => handleSelect(value, option, index)}
                    >
                      {options.map(item => (
                        <Option key={item.value} value={item.value} label={item.label}>
                          <div style={{ display: "flex", alignItems: "center" }}>
                            {item.image ? <img src={item.image} alt={item.label} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
                            <span>{item.label}</span>
                          </div>
                        </Option>
                      ))}
                    </Select>
                    <div>
                      <div>参数：</div>
                      <Input
                        value={boxList[index]?.value}
                        onChange={e => handleChange(e, index)}
                        onFocus={e => handleFocus(e, index)}
                        onBlur={e => handleBlur(e, index)}
                        readOnly={!boxList[index]?.isEditable}
                        style={{ width: 180 }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              ""
            )}
            {/* 右 */}
            {boxList && boxList.length ? (
              <div className={styles.boxRight}>
                {Array.from({ length: 3 }, (_, i) => i + 6).map(index => (
                  <div key={index} className={styles.boxFlex}>
                    {titleList[index]}
                    <Select
                      optionLabelProp="label"
                      style={{ width: 180 }}
                      defaultValue={options[0].value}
                      onSelect={(value, option) => handleSelect(value, option, index)}
                    >
                      {options.map(item => (
                        <Option key={item.value} value={item.value} label={item.label}>
                          <div style={{ display: "flex", alignItems: "center" }}>
                            {item.image ? <img src={item.image} alt={item.label} style={{ width: 24, height: 24, marginRight: 8 }} /> : ""}
                            <span>{item.label}</span>
                          </div>
                        </Option>
                      ))}
                    </Select>
                    <div>
                      <div>参数：</div>
                      <Input
                        value={boxList[index]?.value}
                        onChange={e => handleChange(e, index)}
                        onFocus={e => handleFocus(e, index)}
                        onBlur={e => handleBlur(e, index)}
                        readOnly={!boxList[index]?.isEditable}
                        style={{ width: 180 }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              ""
            )}
            <SvgConten {...svgProps} />
          </div>
        </div>
      </div>
    </Form>
  );
});

const SvgConten = props => {
  const [length, setLength] = useState(0);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const handleChange = (e, index) => {
    if (index === 0) {
      setLength(e.target.value);
    } else if (index === 1) {
      setWidth(e.target.value);
    } else {
      setHeight(e.target.value);
    }
  };
  const svgBoxProps = {
    ...props,
    boxSize:{
      length,
      width,
      height
    }
  }
  return (
    <div className={styles.svgContent}>
      <div className={styles.svgBox}>
        <SvgBox {...svgBoxProps} />
        <div>
          盒长
          <Input value={length} style={{ width: 180 }} onChange={e => handleChange(e, 0)} />
        </div>
        <div>
          盒宽
          <Input value={width} style={{ width: 180 }} onChange={e => handleChange(e, 1)} />
        </div>
        <div>
          盒高
          <Input value={height} style={{ width: 180 }} onChange={e => handleChange(e, 2)} />
        </div>
      </div>
    </div>
  );
};
export default CommonBase(CommonSales(BoxProject));