/* eslint-disable no-else-return */
/* eslint-disable no-undef */
/* eslint-disable no-shadow */
import React, { useState, useEffect } from 'react';
import {
  Table,
  Tooltip,
  Spin,
  Modal,
  Form,
  Input,
  Space,
  Popconfirm,
  notification,
  message,
  Row,
  Col,
  Button,
  Upload,
} from 'antd';
import {
  EditTwoTone,
  DeleteOutlined,
  PlusSquareFilled,
  MinusCircleOutlined,
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  SyncOutlined,
} from '@ant-design/icons';

import {
  GetDataDictionaryList,
  EditDataDictionary,
  AddDataDictionary,
  DeleteDataDictionary,
  AddDataDictionaryList,
  SearchDataDictionaryList,
  DataDictionaryChangeOrder,
} from '@/services/dataCenter/api';
import styles from './WebDic.less';

import { GetMetaData } from '@/services/gis/gis';
import DragTable from '@/components/DragTable/DragTable';
import ImportModal from './importModal';

const WebDic = () => {
  const [loading, setLoading] = useState(false);
  const [level, setLevel] = useState(0); // 设置级别，一级1，二级2,添加条目时使用
  const [data, setData] = useState([]); // 一级条目数据
  const [subData, setSubData] = useState([]); // 二级条目数据
  const [searchData, setSearchData] = useState([]); // 搜索框表格数据
  const [first, setFirst] = useState(true); // 是否第一次加载
  const [select, setSelect] = useState({}); // 当前选中条目,可以是一级/二级，修改/删除时设置
  const [twoSelectColor, setTwoSelectColor] = useState({});
  const [selectColor, setSelectColor] = useState({}); // 当前选中一级条目颜色,修改/删除时设置
  const [selectID, setSelectID] = useState('-1'); // 当前选中一级条目的ID，添加二级条目时使用
  const [addVisible, setAddVisible] = useState(false); // 添加二级条目
  const [addVisible1, setAddVisible1] = useState(false); // 添加一级条目
  const [addForm] = Form.useForm();
  const [editVisible, setEditVisible] = useState(false); // 编辑二级条目
  const [editVisible1, setEditVisible1] = useState(false); // 编辑一级条目
  const [editForm] = Form.useForm();
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [files, setFiles] = useState('');
  const [flag, setFlag] = useState(0);
  const [flag1, setFlag1] = useState(0); // 搜索框数据是否刷新
  const [isloading, setIsloading] = useState(false);
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式

  const [InPutVisible, setInPutVisible] = useState(false);
  const [importVisible, setImportVisible] = useState(false);
  const [name, setName] = useState('');
  const [keepName, setKeepName] = useState('');

  const columns = [
    {
      title: () => <span className={styles.font}>序号</span>,
      key: 'id ',
      dataIndex: 'id',
      render: (text, record, index) => (
        <Space>
          <span>{index + 1}</span>
        </Space>
      ),
      width: 60,
      align: 'center',
    },
    {
      title: () => <span className={styles.font}>名称</span>,
      dataIndex: 'nodeName',
      key: 'nodeName',
      // render: item => searchStyle(item),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {searchStyle(record)}
        </Tooltip>
      ),
    },
    {
      title: () => <span className={styles.font}>操作</span>,
      key: 'action',
      width: 100,
      align: 'center',
      render: record => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
                  setSelectColor(record.nodeID);
                }
                setEditVisible1(true);
                editForm.setFieldsValue({
                  nodeName: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <div onClick={e => e.stopPropagation()}>
            <Tooltip title="删除">
              <Popconfirm
                title="是否确认删除该数据,删除一级目录数据会将其二级目录子数据一起删除？"
                okText="确认"
                cancelText="取消"
                onConfirm={submitDeleteOne}
              >
                <DeleteOutlined
                  onClick={() => {
                    setSelect(record);
                    // if (record.parentID === '-1') {
                    //   setSelectColor(record);
                    // }
                  }}
                  style={{
                    fontSize: '16px',
                    margin: '0px 10px',
                    color: '#e86060',
                  }}
                />
              </Popconfirm>
            </Tooltip>
          </div>
        </Space>
      ),
    },
  ];

  const columns1 = [
    {
      title: () => <span className={styles.font}>序号</span>,
      dataIndex: 'ID',
      key: 'ID',
      width: 60,
      align: 'center',
      className: 'column',
      render: (text, record, index) => (
        <Space>
          <span>{index + 1}</span>
        </Space>
      ),
    },
    {
      title: () => <span className={styles.font}>名称</span>,
      dataIndex: 'nodeName',
      key: 'nodeName',
      className: 'column',
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: () => <span className={styles.font}>值</span>,
      dataIndex: 'nodeValue',
      key: 'nodeValue',
      // width: 400,
      className: 'column',
      onCell: () => ({
        style: {
          maxWidth: 300,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => {
        if (!record) {
          return '-';
        }
        return (
          <Tooltip placement="topLeft" title={record}>
            {record}
          </Tooltip>
        );
      },
    },
    {
      title: () => <span className={styles.font}>操作</span>,
      key: 'action',
      width: 100,
      className: 'column',
      align: 'center',
      render: record => (
        <Space>
          <Tooltip title="编辑">
            <EditTwoTone
              onClick={() => {
                setSelect(record);
                if (record.parentID === '-1') {
                  setSelectColor(record.nodeID);
                }
                setEditVisible(true);
                editForm.setFieldsValue({
                  nodeName: record.nodeName,
                  nodeValue: record.nodeValue,
                });
              }}
              style={{ fontSize: '16px' }}
            />
          </Tooltip>
          <div onClick={e => e.stopPropagation()}>
            <Tooltip title="删除">
              <Popconfirm
                title="是否删除该数据？"
                okText="确认"
                cancelText="取消"
                onConfirm={submitDelete}
              >
                <DeleteOutlined
                  onClick={() => {
                    setSelect(record);
                    if (record.parentID === '-1') {
                      setSelectColor(record.nodeID);
                    }
                  }}
                  style={{
                    fontSize: '16px',
                    margin: '0px 10px',
                    color: '#e86060',
                  }}
                />
              </Popconfirm>
            </Tooltip>
          </div>
        </Space>
      ),
    },
  ];

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const setRowClassName = nodeID => {
    return nodeID == selectColor ? styles.clickRowStyle : '';
  };

  const setRowClassName1 = record =>
    record.nodeID === twoSelectColor.nodeID ? styles.clickRowStyle : '';

  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  useEffect(() => {
    getData(null); // 首次加载可以为空
  }, [flag]);

  // const setOd = e => {
  //     setOrderTable(e)
  //     setFgg(fgg + 1)
  // }

  // const setOd1 = e => {
  //     setOrderTable1(e)
  //     setFgg(fgg + 1)
  // }

  // useEffect(() => {
  //     setOrderTable(data);
  //     setOrderTable1(subData);
  // }, [fgg]);
  // 根据orderTable值改变flowIDs
  useEffect(() => {
    let ids = '';
    data.forEach((item, index) => {
      if (index === data.length - 1) {
        ids += `${item.nodeID}`;
      } else {
        ids += `${item.nodeID},`;
      }
    });
    let bb = ids.split(',');
    setLoading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setLoading(false);
    });
  }, [data]);
  useEffect(() => {
    let ids = '';
    if (subData !== '') {
      subData.forEach((item, index) => {
        if (index === subData.length - 1) {
          ids += `${item.nodeID}`;
        } else {
          ids += `${item.nodeID},`;
        }
      });
    }
    let bb = ids.split(',');
    setIsloading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setIsloading(false);
    });
  }, [subData]);

  // useEffect(() => {
  //   console.log(selectColor);
  //   console.log(data);
  //   console.log(data.find(i => i.nodeID == selectColor));
  // }, [selectColor]);
  // 根据父节点nodeID（即parentID）获取子节点数据，一级条目parentID = -1
  const getData = value => {
    isLoadingShow(value, true);
    GetDataDictionaryList({ nodeID: value }).then(resnew => {
      if (resnew.code === 0) {
        // if (resnew.data.length > 0) {
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
        }
        if (value === null || value === '-1') {
          console.log(123);
          setData(res);
          // 是否首次加载
          if (first) {
            setSelect(res[0]); // 默认当前选中一级条目第一条
            setSelectColor(res[0].nodeID);
            setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
            setFirst(false);
            setName(res[0].nodeName);
            getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
          } else {
            console.log(selectColor);
          }
        } else if (value) {
          setSubData(res); // 设置二级条目,res为空[]时也要设置
          // setOd1(res)
        }
        isLoadingShow(value, false);
        // } else {
        //     console.log(3)
        //     isLoadingShow(value, false)
        // }
      } else {
        isLoadingShow(value, false);
        notification.error({
          message: '获取失败',
          description: resnew.msg,
        });
      }
    });
  };

  // eslint-disable-next-line no-shadow
  const isLoadingShow = (value, data) => {
    if (!value || value === -1) {
      setLoading(data);
    } else {
      setIsloading(data);
    }
  };
  // const onSearch = () => {
  //     setSearchVisible(true)
  //     setFlag1(1)
  // }
  // const onSearch = () => {
  //   history.push({
  //     pathname: '/dataCenter/dictionary',
  //   });
  // };
  // 搜索
  const sumbitSearch = () => {
    console.log(121212);
    SearchDataDictionaryList({ key: searchWord }).then(res => {
      if (res.code === 0) {
        setSearchData(res.data);
      }
      // else {
      //     notification.error({
      //         message: '提交失败',
      //         description: res.message,
      //     })
      // }
    });
  };
  // const resetSearch = () => {
  //   setFlag1(0);
  //   setSearchVisible(false);
  //   setSearchWord(''); // 搜索框置空
  //   setSearchData([]);
  // };

  // 上传
  // const submitInPut = () => {
  //     ImportDataDictionary({ file: files }).then((res) => {
  //         if (res.code === 0) {
  //             notification.success({
  //                 message: '执行成功',
  //             });
  //         } else {
  //             notification.error({
  //                 message: '执行失败',
  //                 description: res.message,
  //             })
  //         }
  //     })
  // }

  // 导出
  // const submitOutPut = () => {
  //     ExportDataDictionary().then((res) => {
  //         notification.success({
  //             message: '执行成功',
  //         });
  //     })
  // }
  // const inPutOutPut = () => {
  //     setInPutOutPutVisible(true);
  // }

  const setItem = value => {
    setLevel(value);
    if (value === 1) {
      setSearchWord('');
      setAddVisible1(true);
    }
    if (value === 2) {
      if (name == '') {
        notification.warning({
          description: '请先选择一级条目',
        });
      } else {
        setAddVisible(true);
      }
    }
    addForm.resetFields();
  };

  // 添加二级条目
  const submitAdd = value => {
    console.log(value);
    const nodeName1 = addForm.getFieldsValue();
    const nodeName = addForm.getFieldsValue().nodeName1;
    const nodeValue = addForm.getFieldsValue().nodeValue1;
    let arr = [];
    let result = nodeName1.users;
    if (result) {
      // eslint-disable-next-line array-callback-return
      result.map((item, index) => {
        if (item) {
          arr.push({
            nodeName: item.nodeName,
            nodeValue: item.nodeValue,
            parentID: Number(value),
          });
        }
      });
    }
    arr.unshift({ nodeName, nodeValue, parentID: Number(value) });
    AddDataDictionaryList([...arr]).then(res => {
      if (res.code === 0) {
        setAddVisible(false);
        getData(value);
        notification.success({
          message: '提交成功',
        });
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };
  // 添加一级条目
  const submitAdd1 = value => {
    const nodeName = addForm.getFieldValue('nodeName');
    AddDataDictionary({
      nodeID: value,
      nodeName,
      nodeValue: '-',
    }).then(res => {
      console.log(res.msg);
      if (res.code === 0) {
        console.log(res.data);
        setSelectColor(res.data);
        setSelectID(res.data);
        setRowClassName(res.data);
        setAddVisible1(false);
        setSubData([]);
        getData(null);
        setFlag1(0);
        notification.success({
          message: '提交成功',
        });
        setName(nodeName);
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };

  // 修改
  const submitEdit = () => {
    const nodeName = editForm.getFieldValue('nodeName');
    const nodeValue = editForm.getFieldValue('nodeValue');
    if (nodeName) {
      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName,
        nodeValue,
      }).then(res => {
        if (res.code === 0) {
          setEditVisible(false);

          getData(select.parentID === '-1' ? null : select.parentID);

          notification.success({
            message: '提交成功',
          });
          if (flag1 === 1) {
            // sumbitSearch();
            getData(null);
          }
        } else {
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
        }
      });
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
      });
    }
  };
  const submitEdit1 = () => {
    const nodeName = editForm.getFieldValue('nodeName');
    if (nodeName) {
      EditDataDictionary({
        nodeID: select.nodeID,
        nodeName,
        nodeValue: '-',
      }).then(res => {
        if (res.code === 0) {
          setName(nodeName);
          setEditVisible1(false);
          if (flag1 === 0) {
            getData(select.parentID === '-1' ? null : select.parentID);
          } else {
            submitSearchUser();
          }
          notification.success({
            message: '提交成功',
          });
          // if (flag1 === 1) {
          //   // sumbitSearch();
          //   getData(null);
          // }
        } else {
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
        }
      });
    } else {
      notification.error({
        message: '提交失败',
        description: '名称不能为空',
      });
    }
  };
  // 删除
  const submitDelete = () => {
    DeleteDataDictionary({
      nodeID: select.nodeID,
    })
      .then(res => {
        if (res.code === 0) {
          if (flag1 === 0) {
            getData(select.parentID === '-1' ? null : select.parentID);
          } else {
            submitSearchUser();
          }
          if (select.parentID === '-1') {
            if (select.nodeID === selectID) {
              setSelectID('');
              setSubData([]);
            }
          }

          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  // 删除
  const submitDeleteOne = () => {
    DeleteDataDictionary({
      nodeID: select.nodeID,
    })
      .then(res => {
        if (res.code === 0) {
          if (select.nodeID == selectColor) {
            if (flag1 === 0) {
              // getData(null);
              GetDataDictionaryList({ nodeID: null }).then(resnew => {
                if (resnew.code === 0) {
                  let res = resnew.data;
                  setData(res);
                  setSelect(res[0]); // 默认当前选中一级条目第一条
                  setSelectColor(res[0].nodeID);
                  setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
                  getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
                  // setSubData(res); // 设置二级条目,res为空[]时也要设置
                  // isLoadingShow(value, false);
                  setName(res[0].nodeName);
                  console.log(res[0].nodeName);
                } else {
                  isLoadingShow(value, false);
                  notification.error({
                    message: '获取失败',
                    description: resnew.msg,
                  });
                }
              });
            } else {
              submitSearchUser(1);
            }
          } else {
            if (flag1 === 0) {
              getData(null);
            } else {
              submitSearchUser();
            }
          }
          notification.success({
            message: '删除成功',
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  const pagenation = {
    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
    pageSizeOptions: [10, 20, 50, 100],
    defaultPageSize: '20',
    // showQuickJumper: true,
    showSizeChanger: true,
  };

  const props = {
    name: 'file',
    action: `/PandaOMS/OMS/DataManger/ImportDataDictionary`,
    headers: {
      authorization: 'authorization-text',
    },
    accept: 'application/vnd.ms-excel',
    beforeUpload: file => {
      setFiles(file.file);
    },
    onChange(info) {
      let data;
      let mse;
      setFiles(info.file);
      if (info.file.status !== 'uploading') {
        // eslint-disable-next-line array-callback-return
        info.fileList.map(item => {
          data = item.response.code;
          mse = item.response.msg;
        });
        if (data === 0) {
          notification.success({
            message: '导入成功',
          });
          setFirst(true);
        } else {
          notification.error({
            message: '导入失败',
            description: mse,
          });
        }
      }
    },
  };

  const input1 = () => {
    setFlag(flag + 1);
    setInPutVisible(false);
  };
  const submitInput = () => {
    console.log(111);
    setImportVisible(true);
    // setInPutVisible(true);
  };

  const submitSearchUser = aa => {
    setFlag1(1);
    console.log(searchWord);
    SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
      if (res.code === 0) {
        setShowSearchStyle(true);
        if (res.data.length === 0) {
          setData(res.data);
          setSubData([]);
          setName('');
        } else {
          setData(res.data);
          // 搜索
          if (aa == 1) {
            setSelect(res.data[0]);
            setName(res.data[0].nodeName);
            setSelectColor(res.data[0].nodeID);
            setSelectID(res.data[0].nodeID);
            getData(res.data[0].nodeID);
          } else {
            getData(selectColor);
          }
        }
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };

  const submitSearchUserAll = aa => {
    setFlag1(1);
    console.log(searchWord);
    SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
      if (res.code === 0) {
        setShowSearchStyle(true);
        if (res.data.length === 0) {
          setData(res.data);
          setSubData([]);
          setName('');
        } else {
          setData(res.data);
          // 搜索
          setName(res.data[0].nodeName);
          setSelect(res.data[0]);
          setSelectColor(res.data[0].nodeID);
          setSelectID(res.data[0].nodeID);
          getData(res.data[0].nodeID);
        }
      } else {
        notification.error({
          message: '提交失败',
          description: res.msg,
        });
      }
    });
  };

  const handleReset = () => {
    setFlag1(0);
    setSearchWord('');
    setLoading(true);
    setIsloading(true);
    GetDataDictionaryList({ nodeID: null }).then(resnew => {
      if (resnew.code === 0) {
        setLoading(false);
        setIsloading(false);
        let res = resnew.data;
        if (res.length > 0) {
          res.map(item => {
            item.key = item.nodeID;
            return item;
          });
        }
        setData(res);
        setSelect(res[0]); // 默认当前选中一级条目第一条
        setSelectColor(res[0].nodeID);
        setName(res[0].nodeName);
        setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
        getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
        setShowSearchStyle(false);
      }
      setLoading(false);
      setIsloading(false);
    });
  };

  // 拖拽回调函数
  const dragCallBack = value => {
    if (value) {
      setData(value);
    }
  };
  const dragCallBack1 = e => {
    if (e) {
      setSubData(e);
    }
  };

  const onImportSubmit = () => {
    setImportVisible(false);
    setFlag(flag + 1);
  };

  const title = (
    <>
      <span>添加二级条目</span>
      <span style={{ color: 'rgb(24, 144, 255)' }}>（{name}）</span>
    </>
  );

  return (
    <div className={styles.WebDic}>
      <Spin spinning={loading} tip="loading...">
        <div className={styles.item}>
          {/* <span>
                        <SearchOutlined onClick={() => onSearch()} /><span style={{ verticalAlign: 'middle', marginLeft: '6px', marginRight: "40px", cursor: "pointer" }} onClick={() => onSearch()}>查找条目</span>
                    </span> */}
          <span>
            <Search
              style={{ width: 260, marginRight: '20px', marginLeft: '10px' }}
              placeholder="搜索一级条目数据"
              onSearch={submitSearchUserAll}
              onChange={e => handleSearch(e)}
              enterButton
              value={searchWord}
            />
            <Button style={{ marginRight: '40px' }} icon={<SyncOutlined />} onClick={handleReset}>
              重置
            </Button>
          </span>
          <span>
            <DownloadOutlined />
            <span
              style={{
                verticalAlign: 'middle',
                marginLeft: '6px',
                marginRight: '40px',
                cursor: 'pointer',
              }}
            >
              <a
                style={{ color: 'rgba(0, 0, 0, 0.85)' }}
                href="/PandaOMS/OMS/DataManger/ExportDataDictionary"
              >
                导出数据
              </a>
            </span>
          </span>
          <span>
            <UploadOutlined />
            <span
              style={{
                verticalAlign: 'middle',
                marginLeft: '6px',
                marginRight: '40px',
                cursor: 'pointer',
              }}
            >
              <span style={{ color: 'rgba(0, 0, 0, 0.85)' }} onClick={() => submitInput()}>
                导入数据
              </span>
            </span>
          </span>
        </div>
        <Row style={{ background: 'white' }}>
          <Col span={8} className={styles.left}>
            {/* 一级条目 表格 */}
            <DragTable
              size="small"
              rowKey={record => record.nodeID}
              columns={columns}
              dataSource={data}
              scroll={{ y: 'calc(100vh - 370px)' }}
              bordered
              dragCallBack={dragCallBack}
              className={styles.pab}
              title={() => (
                <div>
                  <span>一级条目</span>
                  <Tooltip title="添加一级条目配置">
                    <PlusSquareFilled
                      onClick={() => setItem(1)}
                      style={{
                        color: '#1890FF',
                        fontSize: '25px',
                        marginTop: '3px',
                        float: 'right',
                      }}
                    />
                  </Tooltip>
                </div>
              )}
              rowClassName={record => setRowClassName(record.nodeID)}
              onClick={record => {
                getData(record.nodeID);
                setSelect(record);
                setSelectColor(record.nodeID);
                setSelectID(record.nodeID);
                setName(record.nodeName);
              }}
              ItemTypes="first"
              pagination={false}
            />
          </Col>
          <Col span={16}>
            {/* 二级条目 表格 */}
            <Spin spinning={isloading} tip="loading...">
              <DragTable
                size="small"
                ItemTypes="second"
                bordered
                rowKey={record => record.nodeID}
                columns={columns1}
                dragCallBack={dragCallBack1}
                className={styles.tab}
                dataSource={subData}
                scroll={{ x: 'max-content', y: 'calc(100vh - 340px)' }}
                rowClassName={setRowClassName1}
                onClick={record => {
                  setSelect(record);
                  setTwoSelectColor(record);
                }}
                title={() => (
                  <div>
                    <span>二级条目</span>
                    <span style={{ color: 'rgb(24, 144, 255)' }}>
                      <strong>（{name}）</strong>
                    </span>
                    <Tooltip title="添加二级条目配置">
                      <PlusSquareFilled
                        onClick={() => setItem(2)}
                        style={{
                          color: '#1890FF',
                          fontSize: '25px',
                          marginTop: '3px',
                          float: 'right',
                        }}
                      />
                    </Tooltip>
                  </div>
                )}
                pagination={false}
              />
            </Spin>
          </Col>
        </Row>
      </Spin>
      {/* 添加一级 */}
      <Modal
        title="添加一级条目"
        visible={addVisible1}
        width="500px"
        onOk={() => {
          submitAdd1('-1');
        }}
        onCancel={() => {
          setAddVisible1(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form autoComplete="off" form={addForm} labelCol={{ span: 3 }}>
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
            <Input placeholder="请输入名称" style={{ width: '95%' }} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 添加二级 */}
      <Modal
        title={title}
        visible={addVisible}
        width="500px"
        onOk={() => {
          submitAdd(selectID);
        }}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form autoComplete="off" form={addForm} labelCol={{ span: 7 }}>
          <Row>
            <Col span={11}>
              <Form.Item
                name="nodeName1"
                label="名称"
                rules={[
                  { required: true, message: '不能为空' },
                  {
                    validator: (rule, value) => {
                      const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                      const nodeName1 = addForm.getFieldsValue();
                      let result = nodeName1.users;
                      let arr = [];
                      if (result) {
                        // eslint-disable-next-line array-callback-return
                        result.map(item => {
                          if (item) {
                            let a = item.nodeName;
                            if (a !== '') {
                              arr.push(a);
                            }
                          }
                        });
                      }
                      arr.unshift(nodeName);
                      if (new Set(arr).size !== arr.length) {
                        // eslint-disable-next-line prefer-promise-reject-errors
                        return Promise.reject('用户名重复');
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <Input placeholder="请输入名称" />
              </Form.Item>
            </Col>
            <Col span={11}>
              <Form.Item name="nodeValue1" label="值">
                <Input placeholder="请输入值" />
              </Form.Item>
            </Col>
          </Row>
          <Form.List name="users">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }}>
                    <Row>
                      <Col span={11}>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeName']}
                          label="名称"
                          fieldKey={[fieldKey, 'frist']}
                          rules={[
                            { required: true, message: '不能为空' },
                            {
                              validator: (rule, value, callback) => {
                                const nodeName = addForm.getFieldsValue().nodeName1; // 第一项的nodeName
                                const nodeName1 = addForm.getFieldsValue();
                                let result = nodeName1.users;
                                let arr = [];
                                // eslint-disable-next-line array-callback-return
                                result.map(item => {
                                  if (item) {
                                    let a = item.nodeName;
                                    if (a !== '') {
                                      arr.push(a);
                                    }
                                  }
                                });
                                if (nodeName !== undefined) {
                                  arr.unshift(nodeName);
                                }
                                if (new Set(arr).size !== arr.length) {
                                  arr = [...new Set(arr)];
                                  callback('用户名重复');
                                }
                              },
                            },
                          ]}
                        >
                          <Input placeholder="请输入名称" />
                        </Form.Item>
                      </Col>
                      <Col span={11}>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeValue']}
                          label="值"
                          fieldKey={[fieldKey, 'last']}
                        >
                          <Input placeholder="请输入值" />
                        </Form.Item>
                      </Col>
                      <Col span={2}>
                        <Tooltip title="移除条目项">
                          <MinusCircleOutlined
                            onClick={() => remove(name)}
                            style={{ marginLeft: '20px', fontSize: '20px' }}
                          />
                        </Tooltip>
                      </Col>
                    </Row>
                  </Space>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                    style={{ width: '353px', marginLeft: '61px' }}
                  >
                    新增条目项
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form>
      </Modal>
      {/* 修改一级条目 */}
      <Modal
        title="修改一级条目"
        visible={editVisible1}
        onOk={submitEdit1}
        onCancel={() => {
          setEditVisible1(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
            <Input placeholder="请输入名称" style={{ width: '90%' }} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 修改二级条目 */}

      <Modal
        title="修改二级条目"
        visible={editVisible}
        onOk={submitEdit}
        onCancel={() => {
          setEditVisible(false);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Form form={editForm} labelCol={{ span: 3 }}>
          <Form.Item name="nodeName" label="名称" rules={[{ required: true, message: '不能为空' }]}>
            <Input placeholder="请输入名称" style={{ width: '90%' }} />
          </Form.Item>
          <Form.Item name="nodeValue" label="值">
            <Input placeholder="请输入值" style={{ width: '90%' }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* <Modal
        title="查找条目"
        visible={searchVisible}
        width="700px"
        onOk={resetSearch}
        onCancel={() => {
          setSearchVisible(false);
          setSearchWord(''); // 搜索框置空
          setSearchData([]);
        }}
        okText="确认"
        cancelText="取消"
      >
        <Search
          style={{ width: 470, marginBottom: 25 }}
          placeholder="输入关键字"
          onSearch={sumbitSearch}
          onChange={e => handleSearch(e)}
          enterButton
          value={searchWord}
        />
        <Table
          size="small"
          bordered
          key=""
          columns={columns2}
          dataSource={searchData}
          scroll={{ x: 'max-content', y: 'calc(100vh - 700px)' }}
          rowClassName={setRowClassName}
          onRow={record => ({
            onClick: () => {
              setSelect(record);
              setSelectColor(record);
              setSelectID(record.nodeID);
            },
          })}
          pagination={pagenation}
        />
      </Modal> */}
      {/* <Modal
        title="导入数据"
        visible={InPutVisible}
        onOk={input1}
        onCancel={input1}
        okText="确认"
        cancelText="取消"
      >
        <Upload {...props}>
          <UploadOutlined />
          <span
            style={{
              verticalAlign: 'middle',
              marginLeft: '6px',
              marginRight: '40px',
              cursor: 'pointer',
            }}
          >
            <a style={{ color: 'rgb(24 144 255)' }}>请选择将要导入的数据文件（仅支持Excel文件）</a>
          </span>
        </Upload>
      </Modal> */}
      <ImportModal
        visible={importVisible}
        onCancel={() => setImportVisible(false)}
        callBackSubmit={onImportSubmit}
      />
    </div>
  );
};

export default WebDic;
