/* eslint-disable prefer-destructuring */
/* eslint-disable no-else-return */
/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable indent */
/* eslint-disable camelcase */
/* eslint-disable no-unused-expressions */
import React, { useState, useEffect, useRef } from 'react';
import {
  Drawer,
  Form,
  Input,
  notification,
  Row,
  Col,
  Select,
  Button,
  Space,
  TreeSelect,
  Empty,
} from 'antd';
import { PlusOutlined, SwapOutlined, MinusCircleOutlined } from '@ant-design/icons';
import styles from './patrolFeedback.less';
import {
  CM_Feedback_LoadFeedbackTables,
  CM_Feedback_LoadFeedbackEvent,
  CM_Feedback_OperatePatrolFeedback,
  CM_Feedback_LoadFields,
  CM_Feedback_QueryPatrolFeedback,
  GetTaskSyncField,
  GetGisPatrolObject,
} from '@/services/PatrolFeedback/api';
import {
  GetCM_Event_LoadEventTable,
  CM_Event_LoadDepartmentAndRoles,
} from '@/services/standingBook/api';
import RMSComponents from '@/components/RolePmSite/index';

import ChangeRoles from './ChangeRoles';
import ChangeFields from './ChangeFields';

import logo from '@/assets/images/icons/值映射.png';

import { reloadTableFields } from '@/services/tablemanager/tablemanager';

const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;

  const [filed, setFiled] = useState({}); // 传给子组件列表数据
  const [filed1, setFiled1] = useState({}); // 传给子组件列表数据
  const [pickItem, setPickItem] = useState(''); // 复选框数据填入项
  const [checkedList1, setCheckedList1] = useState([]); // 最新选择数据

  const [feedbackTable, setFeedbackTable] = useState([]);
  const [feedbackEvent, setFeedbackEvent] = useState([]);
  const [isVisibleFields, setIsVisibleFields] = useState(false);
  const [isVisibleRoles, setIsVisibleRoles] = useState(false);
  const [nu, setNu] = useState([]);
  const [nu1, setNu1] = useState([]);
  const [groupName, setGroupName] = useState('角色');
  const [chooseGroupName, setChooseGroupName] = useState(['角色', '部门', '站点']);
  const [keepFiled, setKeepFiled] = useState([]);
  const [eventData, setEventData] = useState([]);
  const [keepData, setKeepData] = useState('');
  const [keep, setkeep] = useState([]); // 保存初始完整任务同步事件字段
  const [keepAllData, setKeepAllData] = useState([]); // 保存所有关联事件类型数据
  const [keepTree, setKeepTree] = useState([]);
  const [keepAll, setKeepAll] = useState([]); // 保存所选关联事件下完整的字段值
  const [treeSelectValue, setTreeSelectValue] = useState([]);
  const [menuWebList, setMenuWebList] = useState([]);

  const [form] = Form.useForm();
  const [formAdd] = Form.useForm();
  const { Item } = Form;
  const { TreeNode } = TreeSelect;

  useEffect(() => {
    getEventData(); // 获取所有关联事件数据
    getGisPatrolObject();
    if (visible) {
      if (type === 'edit') {
        CM_Feedback_QueryPatrolFeedback({ id: formObj.id }).then(res => {
          form.setFieldsValue({ ...res.data });
          console.log(res.data);
          if (!res.data.businessGroup) {
            form.setFieldsValue({
              businessGroup: '区域巡检',
              gisLayer: res.data.gisServerName
                ? `${res.data.gisServerName}&${res.data.gisLayer}`
                : res.data.gisLayer,
            });
          } else {
            form.setFieldsValue({
              businessGroup: res.data.businessGroup.split(','),
              gisLayer: res.data.gisServerName
                ? `${res.data.gisServerName}&${res.data.gisLayer}`
                : res.data.gisLayer,
            });
          }
          let aa = JSON.parse(res.data.mappingFields);
          getGetTaskSyncField(aa); // 获取字段名数据

          onChangeEvent(res.data.relationEvent, aa); // 改变关联事件类型
          getFeedbackTable();
          getRoles();
          getFields(res.data.tableName);
        });
      } else {
        form.setFieldsValue({ businessGroup: '区域巡检' });
        getGetTaskSyncField();
        getFeedbackTable();
        getRoles();
      }
    } else {
      formAdd.resetFields();
      form.resetFields();
      setKeepTree([]);
      setKeepData('');
    }
  }, [visible]);

  // 获取字段名数据
  const getGetTaskSyncField = e => {
    GetTaskSyncField().then(res => {
      if (res.code === '0') {
        // 编辑时处理数据为下拉框过滤调已选数据
        if (e) {
          let datalist = [...e];
          datalist.map(i => {
            res.data.map(j => {
              if (j.value === i.fromField) {
                i.fromField = j.key;
              }
            });
          });
          formAdd.setFieldsValue({ parmars: datalist }); // 处理数据让下拉框回显title值
          let aa = e;
          let from = [];
          aa.map(i => {
            if (i && i.fromField) {
              from.push(i.fromField);
            }
          });
          let lastFrom = [];
          res.data.map(j => {
            if (from.indexOf(j.key) == -1) {
              lastFrom.push(j);
            }
          });
          setKeepData(lastFrom);
        } else {
          setKeepData(res.data);
        }
        setkeep(res.data);
      }
    });
  };

  const getGisPatrolObject = () => {
    GetGisPatrolObject().then(res => {
      if (res.code === '0') {
        setMenuWebList(res.data);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
      console.log(res);
    });
  };

  const getReloadTableField = (e, i) => {
    reloadTableFields({
      tableName: e,
    }).then(res => {
      if (res.msg === 'Ok') {
        console.log(res.data.root);
        console.log(i);
        setKeepAll(res.data.root);
        // 编辑时过滤下l拉框初始数据
        if (i) {
          let aa = i;
          let to = [];
          aa.map(j => {
            if (j && j.toField) {
              to.push(j.toField);
            }
          });
          let lastTo = [];
          res.data.root.map(b => {
            if (to.indexOf(b.name) == -1) {
              lastTo.push(b);
            }
          });
          console.log(lastTo);
          setKeepTree(lastTo);
        } else {
          setKeepTree(res.data.root);
        }

        let arrlist = [];
        let data = {};
        let listArr = [];
        res.data.root.map(i => {
          arrlist.push(i.name);
        });
        data.TableFieldNames = arrlist;
        data.TableName = e;
        listArr.push(data);
        let arr = formateArrDataA2(res.data.root, 'group');
        let newArr = [];
        Object.keys(arr).map((item, index) => {
          newArr.push({ type: item, key: index, id: index });
        });
        let aa = [];
        let bb = [];
        Object.keys(arr).forEach((item, index) => {
          aa.push({ name: item, key: index, ID: index, children: arr[item] });
          bb.push(item);
        });
        console.log(aa, 'aaaaaaaaaaaaa');
        // setKeepTree(aa);
        // setKeepAll(aa);
        // all.current = aa;
      }
    });
  };

  const formateArrDataA2 = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    // eslint-disable-next-line no-restricted-syntax
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    return tempObj;
  };

  // 获取关联事件数据
  const getEventData = () => {
    GetCM_Event_LoadEventTable().then(res => {
      if (res.code === 0) {
        let aa = [];
        let bb = [];
        res.data.map(i => {
          i.root.map(j => {
            aa.push(j.name);
            bb.push(j);
          });
        });
        setKeepAllData(bb);
        setEventData(aa);
      }
    });
  };

  const getFeedbackTable = () => {
    CM_Feedback_LoadFeedbackTables().then(res => {
      if (res.code === 0) {
        setFeedbackTable(res.data);
      }
    });
    CM_Feedback_LoadFeedbackEvent().then(res => {
      if (res.code === 0) {
        setFeedbackEvent(res.data);
        if (type == 'add') {
          form.setFieldsValue({ eventName: res.data[0].Name });
        }
      }
    });
  };

  const getFields = e => {
    CM_Feedback_LoadFields(e).then(res => {
      if (res.code === 0) {
        setNu(res.data);
        setFiled(formateArrDataA(res.data, 'groupName'));
      }
    });
  };

  const getRoles = () => {
    CM_Event_LoadDepartmentAndRoles().then(res => {
      if (res.code === 0) {
        setNu1(res.data);
        // setFiled1(formateArrDataA1(res.data, 'groupType'));
        setKeepFiled(groupArr(res.data, 'groupType'));
      }
    });
  };

  const groupArr = (initialArr, name) => {
    let list = {};
    initialArr.data.map(i => {
      let ar = [];
      i.root.map(j => {
        let ss = {};
        ss.label = j.Name;
        ss.value = j.ID.toString();
        ar.push(ss);
      });
      list[i.groupType] = ar;
    });
    return list;
  };

  const onSubmit = () => {
    formAdd.validateFields().then(validate1 => {
      if (validate1) {
        form.validateFields().then(validate => {
          if (validate) {
            let obj = form.getFieldsValue();
            let objaa = formAdd.getFieldValue('parmars');
            objaa &&
              objaa.map(i => {
                keep.map(j => {
                  if (j.key === i.fromField) {
                    i.fromField = j.value;
                  }
                });
              });
            obj.businessGroup = obj.businessGroup.toString();
            let list = [];
            let groupNameSever = '';
            if (obj.gisLayer && obj.gisLayer.indexOf('&') !== -1) {
              list = obj.gisLayer.split('&');
              obj.gisLayer = list[1];
              groupNameSever = list[0];
            }
            if (type == 'add') {
              CM_Feedback_OperatePatrolFeedback({
                ...obj,
                gisServerName: groupNameSever,
                mappingFields: objaa && JSON.stringify(objaa),
              }).then(res => {
                if (res.msg == '') {
                  form.resetFields();
                  callBackSubmit();
                  notification.success({
                    message: '提示',
                    duration: 3,
                    description: type == 'add' ? '添加成功' : '编辑成功',
                  });
                } else {
                  notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                  });
                }
              });
            } else {
              CM_Feedback_OperatePatrolFeedback({
                ...obj,
                gisServerName: groupNameSever,
                id: formObj.id,
                mappingFields: objaa && JSON.stringify(objaa),
              }).then(res => {
                if (res.msg == '') {
                  form.resetFields();
                  callBackSubmit();
                  notification.success({
                    message: '提示',
                    duration: 3,
                    description: type == 'add' ? '添加成功' : '编辑成功',
                  });
                } else {
                  notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                  });
                }
              });
            }
          }
        });
      }
    });
  };

  const pickFiled = fileds => {
    if (form.getFieldsValue().tableName) {
      let pp = formateArrDataA(nu, 'groupName');
      if (form.getFieldValue(fileds)) {
        let ab = form.getFieldValue(fileds).split(',');
        let arr = Object.keys(pp);
        let b = [];
        let a = [];
        arr.map((item, index) => {
          pp[item].map((i, j) => {
            b.push(i);
          });
        });
        ab.map((item, index) => {
          if (b.includes(item) == false) {
            if (item == '') {
              a = [];
            } else {
              a.push(item);
            }
          }
        });
        if (a.length > 0) {
          pp.外部字段 = a;
          arr.push('外部字段');
        }
        setFiled(pp);
        setCheckedList1(form.getFieldValue(fileds).split(','));
        setPickItem(fileds);
        setIsVisibleFields(true);
      } else {
        setFiled(pp);
        setCheckedList1([]);
        setPickItem(fileds);
        setIsVisibleFields(true);
      }
    } else {
      notification.warning({
        message: '提示',
        duration: 3,
        description: '请先选择反馈名称',
      });
    }
  };
  const pickFiled1 = fileds => {
    if (form.getFieldValue(fileds)) {
      setCheckedList1(form.getFieldValue(fileds).split(','));
      setPickItem(fileds);
      setIsVisibleRoles(true);
    } else {
      setCheckedList1([]);
      setPickItem(fileds);
      setIsVisibleRoles(true);
    }
  };

  const onChangeTableName = e => {
    getFields(e);
  };

  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    Object.keys(tempObj).map((i, j) => {
      tempObj[i].map((k, y) => {
        tempObj[i][y] = k.fieldName;
      });
    });
    return tempObj;
  };

  const formateArrDataA1 = (initialArr, name) => {
    let aa = [];
    let a1 = [];
    let a2;
    let a3 = [];
    initialArr.data.map(i => {
      // console.log(i.groupType)
      a2 = i.groupType;
      // console.log(a2)
      // console.log(i.root)
      a1 = i.root;
      a1.map(j => {
        j.group = a2;
        // console.log(j)
      });
      aa.push(i.root);
    });
    // console.log(aa)
    aa.map(p => {
      // console.log(p)
      p.map(o => {
        // console.log(o)
        a3.push(o);
      });
    });
    console.log(a3);

    // 判定传参是否符合规则
    if (!(a3 instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    a3.map(i => {
      if (nameArr.indexOf(i.group) === -1) {
        nameArr.push(i.group);
      }
    });
    console.log(nameArr);
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in a3) {
        if (a3[j].group == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(a3[j]);
        }
      }
    }

    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.Name);
      });
    }
    console.log(tempObj);
    return tempObj;
  };

  const onOK = prop => {
    console.log(prop);
    setIsVisibleRoles(false);
    let inputText = {};
    console.log(inputText);
    console.log(inputText[prop.pickItem]);
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
  };

  const onOK1 = prop => {
    setIsVisibleFields(false);
    let inputText = {};
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
  };

  const changTable = (value, e) => {
    console.log(value);
    console.log(e.key);
  };

  // 改变关联事件类型
  const onChangeEvent = (e, i) => {
    if (!i || !e) {
      setKeepData(keep);
      formAdd.resetFields();
    }
    let aa = keepAllData.find(i => i.name === e);
    if (aa) {
      getReloadTableField(aa.tableName, i); // 找到关联事件对应事件表获取对应表的所有字段
    }
  };

  const mapTree = (org, server) => {
    const haveChildren = Array.isArray(org.items) && org.items.length > 0;
    return haveChildren ? (
      <TreeNode value={org.serverName} title={org.serverName} disabled>
        {org.items.map(item => mapTree(item, org.serverName))}
      </TreeNode>
    ) : (
      <TreeNode value={`${server}&${org.name}`} title={org.name} />
    );
  };

  const changeValue = () => {
    console.log(formAdd.getFieldsValue().parmars);
    let aa = formAdd.getFieldsValue().parmars;
    if (aa) {
      console.log(aa);
      let from = [];
      let to = [];
      aa.map(i => {
        if (i && i.fromField) {
          from.push(i.fromField);
        }
        if (i && i.toField) {
          to.push(i.toField);
        }
      });

      let lastFrom = [];
      let lastTo = [];
      console.log(from);
      console.log(keep);
      keep.map(j => {
        if (from.indexOf(j.key) == -1) {
          lastFrom.push(j);
        }
      });
      console.log(lastFrom);
      setKeepData(lastFrom);

      keepAll.map(j => {
        if (to.indexOf(j.name) == -1) {
          lastTo.push(j);
        }
      });
      console.log(lastTo);
      setKeepTree(lastTo);
    }

    // let data = keepAll;
    // data.map(k => {
    //   console.log(k);
    //   k.children.map((j, h) => {
    //     console.log(j);
    //     if (to.indexOf(j.name) != -1) {
    //       console.log(j);
    //       k.children.splice(h, 1);
    //     }
    //   });
    // });
    // console.log(data);
    // setKeepTree(data);
  };

  const treeSelectOnchange = e => {
    setTreeSelectValue(e);
  };

  return (
    <Drawer
      title="反馈配置"
      visible={visible}
      destroyOnClose
      width="550px"
      {...props}
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
        <Row>
          <Col span={23}>
            <Item
              label="巡检对象"
              name="layerName"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    let aa = form.getFieldValue().layerName;
                    if (type === 'add' && keepTableData.indexOf(aa) != -1) {
                      return Promise.reject('巡检对象已存在');
                    } else if (
                      type === 'edit' &&
                      keepTableData.indexOf(aa) != -1 &&
                      aa != formObj.layerName
                    ) {
                      return Promise.reject('巡检对象已存在');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <Input placeholder="巡检对象名称不可重复" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="业务划分" name="businessGroup" labelCol={{ span: 4 }}>
              <Select placeholder="请选择业务划分" showSearch mode="multiple" allowClear>
                <Option key="区域巡检" value="区域巡检">
                  区域巡检
                </Option>
                <Option key="DMA巡检" value="DMA巡检">
                  DMA巡检
                </Option>
              </Select>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="分组" name="groupType" labelCol={{ span: 4 }}>
              <Input placeholder="请输入分组名称" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="GIS图层" name="gisLayer" labelCol={{ span: 4 }}>
              <TreeSelect
                showSearch
                value={treeSelectValue}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="请选择映射字段名 "
                allowClear
                treeDefaultExpandAll
                showCheckedStrategy
                onChange={treeSelectOnchange}
              >
                {menuWebList ? (
                  menuWebList.map(i => mapTree(i))
                ) : (
                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                )}
              </TreeSelect>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="GIS条件" name="gisFilterValue" labelCol={{ span: 4 }}>
              <Input placeholder="示例：设备级别 = '小区阀门'  （设备级别来自图层表字段）" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="反馈表" name="tableName" labelCol={{ span: 4 }}>
              <Select placeholder="选择反馈表" onChange={onChangeTableName} showSearch>
                {feedbackTable
                  ? feedbackTable.map((item, index) => (
                      <Option key={index} value={item.text}>
                        {item.text}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="字段集" name="fields" labelCol={{ span: 4 }}>
              <div style={{ display: 'flex' }}>
                <Item name="fields" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择字段集" allowClear />
                </Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('fields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          {/* <Col span={23}>
            <Item label="异常值" name="exceptionValue" labelCol={{ span: 4 }}>
              <Input placeholder="请输入异常值" />
            </Item>
          </Col> */}
          {/* <Col span={23}>
            <Item label="触发事件" name="eventName" labelCol={{ span: 4 }}>
              <Select placeholder="选择触发事件" showSearch>
                {feedbackEvent
                  ? feedbackEvent.map((item, index) => (
                      <Option key={index} value={item.Name}>
                        {item.Name}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col> */}
          <Col span={23}>
            <Item label="权限" name="roles" labelCol={{ span: 4 }}>
              <div style={{ display: 'flex' }}>
                <Item name="roles" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择字段集" allowClear />
                </Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled1('roles')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="关联事件" name="relationEvent" labelCol={{ span: 4 }}>
              <Select
                placeholder="选择关联事件类型"
                onChange={e => onChangeEvent(e)}
                showSearch
                allowClear
              >
                {eventData
                  ? eventData.map((item, index) => (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
          <Col span={23}>
            <span style={{ fontSize: '12px', color: '#bfbcbc', marginLeft: '80px' }}>
              当配置了关联事件后，可配置字段映射规则
            </span>
            <br />
            <span style={{ fontSize: '12px', color: '#bfbcbc', marginLeft: '80px' }}>
              配置后，管网巡检发起的工单，可以传递该巡检任务信息
            </span>
          </Col>
          <Col span={4} />
          <Col span={19}>
            <Item style={{ marginTop: '20px' }}>
              <Form name="form" form={formAdd} onFieldsChange={changeValue}>
                <Form.List name="parmars">
                  {(fields, { add, remove }) => (
                    <>
                      {fields.map(({ key, name, fieldKey, ...restField }) => (
                        <Space
                          key={key}
                          style={{
                            display: 'flex',
                            marginBottom: '5px',
                            justifyContent: 'center',
                          }}
                          align="baseline"
                        >
                          <Form.Item
                            {...restField}
                            style={{ marginBottom: '5px' }}
                            name={[name, 'fromField']}
                            fieldKey={[fieldKey, 'key']}
                            validateTrigger={['onChange', 'onBlur']}
                            rules={[{ required: true, message: '请填写字段名' }]}
                          >
                            <Select
                              placeholder="选择字段名"
                              // onSelect={changTable}
                              // optionLabelProp="key"
                              showSearch
                              style={{ width: '159px' }}
                            >
                              {keepData
                                ? keepData.map((item, index) => (
                                    <Option key={item.key} value={item.key}>
                                      {item.key}
                                    </Option>
                                  ))
                                : ''}
                            </Select>
                          </Form.Item>
                          <img src={logo} style={{ height: '24px' }} alt="" />
                          <Form.Item
                            {...restField}
                            style={{ marginBottom: '5px' }}
                            name={[name, 'toField']}
                            fieldKey={[fieldKey, 'key']}
                            rules={[{ required: true, message: '请填写映射字段名' }]}
                          >
                            <Select
                              placeholder="选择映射字段名"
                              showSearch
                              style={{ width: '159px' }}
                            >
                              {keepTree.length > 0
                                ? keepTree.map((item, index) => (
                                    <>
                                      <Option key={item.name} value={item.name}>
                                        {item.name}
                                      </Option>
                                    </>
                                  ))
                                : ''}
                            </Select>
                          </Form.Item>
                          <MinusCircleOutlined
                            onClick={() => remove(name)}
                            style={{ marginLeft: '10px', fontSize: '20px' }}
                          />
                        </Space>
                      ))}
                      <Form.Item>
                        <Button
                          type="dashed"
                          onClick={() => add()}
                          block
                          icon={<PlusOutlined />}
                          style={{ marginLeft: '-2px' }}
                          disabled={keepData && !(keepData.length > 0)}
                        >
                          添加映射
                        </Button>
                      </Form.Item>
                    </>
                  )}
                </Form.List>
              </Form>
            </Item>
          </Col>
          {/* <Col span={23}>
            <Item label="分组" name="groupType" labelCol={{ span: 4 }}>
              <Input placeholder="请输入分组" />
            </Item>
          </Col> */}
        </Row>
      </Form>
      <ChangeFields
        visible={isVisibleFields}
        callBackSubmit={onOK1}
        onCancel={() => setIsVisibleFields(false)}
        newCheckedList={checkedList1}
        filed={filed}
        pickItem={pickItem}
        formObj={formObj}
      />
      {/* <ChangeRoles
        visible={isVisibleRoles}
        onCancel={() => setIsVisibleRoles(false)}
        callBackSubmit={onOK}
        newCheckedList={checkedList1}
        filed11={filed1}
        pickItem={pickItem}
      /> */}
      <RMSComponents
        visible={isVisibleRoles}
        onCancel={() => setIsVisibleRoles(false)}
        callBackSubmit={onOK}
        newCheckedList={checkedList1} // 单选框中的值
        pickItem={pickItem}
        groupName={groupName} // 打开组件展示的分组名，用来首次获取数据
        chooseGroupName={chooseGroupName} // 可选分组名
        keepFiled={keepFiled}
        dataType="name"
      />
    </Drawer>
  );
};
export default AddModal;
