/* 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 { useHistory, Link } from 'react-router-dom';
import map from '@/pages/user/login/components/Login/map';

import { GetMetaData } from '@/services/platform/gis';
import DragTable from '@/components/DragTable/DragTable';

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 [searchVisible, setSearchVisible] = useState(false);
  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 history = useHistory();
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式

  const [InPutVisible, setInPutVisible] = useState(false);

  const columns = [
    {
      title: () => <span className={styles.font}>序号</span>,
      key: 'nodeID ',
      dataIndex: 'nodeID',
      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),
    },
    {
      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);
                }
                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={submitDelete}
              >
                <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: 'nodeID',
      key: 'nodeID',
      width: 60,
      align: 'center',
      render: (text, record, index) => (
        <Space>
          <span>{index + 1}</span>
        </Space>
      ),
    },
    {
      title: () => <span className={styles.font}>名称</span>,
      dataIndex: 'nodeName',
      key: 'nodeName',
    },
    {
      title: () => <span className={styles.font}>值</span>,
      dataIndex: 'nodeValue',
      key: 'nodeValue',
      render: record => {
        if (!record) {
          return '-';
        }
        return record;
      },
    },
    {
      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);
                }
                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);
                    }
                  }}
                  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 = record =>
    record.nodeID === selectColor.nodeID ? 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 = '';
    console.log(data);
    data.forEach((item, index) => {
      if (index === data.length - 1) {
        ids += `${item.nodeID}`;
      } else {
        ids += `${item.nodeID},`;
      }
    });
    console.log(ids);
    let bb = ids.split(',');
    console.log(bb);
    setLoading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setLoading(false);
    });
  }, [data]);
  useEffect(() => {
    let ids = '';
    console.log(subData);
    if (subData !== '') {
      subData.forEach((item, index) => {
        if (index === subData.length - 1) {
          ids += `${item.nodeID}`;
        } else {
          ids += `${item.nodeID},`;
        }
      });
    }
    console.log(ids);
    let bb = ids.split(',');
    console.log(bb);
    setIsloading(true);
    DataDictionaryChangeOrder(bb).then(res => {
      setIsloading(false);
    });
  }, [subData]);
  // 根据父节点nodeID（即parentID）获取子节点数据，一级条目parentID = -1
  const getData = value => {
    console.log(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') {
          setData(res);
          // setOd(res)

          console.log(res);
          console.log(first);
          if (first) {
            setSelect(res[0]); // 默认当前选中一级条目第一条
            setSelectColor(res[0]);
            setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
            setFirst(false);
            getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
          }
        } else if (value) {
          console.log(res);
          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 = () => {
    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) {
      setAddVisible1(true);
    }
    if (value === 2) {
      setAddVisible(true);
    }
    addForm.resetFields();
  };

  // 添加二级条目
  const submitAdd = value => {
    console.log(value);
    if (value.length === 0) {
      notification.error({
        message: '提交失败',
        description: '请先选择一级条目',
      });
    } else {
      const nodeName1 = addForm.getFieldsValue();
      const nodeName = addForm.getFieldsValue().nodeName1;
      const nodeValue = addForm.getFieldsValue().nodeValue1;
      console.log(nodeName1);
      console.log(nodeName);
      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) {
        setAddVisible1(false);
        getData(null);
        setSubData(res.msg); // res.message为添加成功返回的一级条目ID
        // // 设置添加二级条目的父级ID及父级ID选中状态
        setSelect({ nodeID: res.msg, parentID: '-1' });
        setSelectID(res.msg);
        setSelectColor({ nodeID: res.msg });

        notification.success({
          message: '提交成功',
        });
      } 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();
          }
        } 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) {
          setEditVisible1(false);
          if (flag1 === 0) {
            getData(select.parentID === '-1' ? null : select.parentID);
          } else {
            submitSearchUser();
          }
          notification.success({
            message: '提交成功',
          });
          if (flag1 === 1) {
            sumbitSearch();
          }
        } 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') {
            setSubData([]);
          }
          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 => {
      console.log('filee', file);
      setFiles(file.file);
    },
    onChange(info) {
      let data;
      let mse;
      console.log(info, 'info');
      setFiles(info.file);
      if (info.file.status !== 'uploading') {
        info.fileList.map(item => {
          console.log(item.response);
          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 = () => {
    setInPutVisible(true);
  };

  const submitSearchUser = () => {
    setFlag1(1);
    SearchDataDictionaryList({ key: searchWord, type: 1 }).then(res => {
      if (res.code === 0) {
        setShowSearchStyle(true);
        if (res.data.length === 0) {
          setData(res.data);
          setSubData([]);
        } else {
          setData(res.data);
          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]);
        setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
        getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
        setShowSearchStyle(false);
      }
      setLoading(false);
      setIsloading(false);
    });
  };

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

  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={submitSearchUser}
              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={setRowClassName}
              onClick={record => {
                getData(record.nodeID);
                setSelect(record);
                setSelectColor(record);
                setSelectID(record.nodeID);
              }}
              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>
                    <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="添加二级条目"
        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);
                      console.log(arr);
                      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);
                                }

                                console.log(arr);
                                if (new Set(arr).size !== arr.length) {
                                  arr = [...new Set(arr)];
                                  console.log(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>
    </div>
  );
};

export default WebDic;
