/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable prettier/prettier */
/* eslint-disable guard-for-in */
/* eslint-disable eqeqeq */
/* eslint-disable no-lonely-if */
/* eslint-disable no-restricted-syntax */
/* eslint-disable indent */
/* eslint-disable prefer-destructuring */
/* eslint-disable import/order */
/* eslint-disable default-case */
/* eslint-disable one-var */
/* eslint-disable no-unused-expressions */
/* eslint-disable no-case-declarations */
import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Input,
  Select,
  Radio,
  Checkbox,
  notification,
  Tooltip,
  Drawer,
  Space,
  Button,
  Empty,
  Col,
  Row,
  TreeSelect,
} from 'antd';

import {
  getField,
  loadTableFields,
  LoadEventFields,
  LoadEventType,
  UpdateFields,
} from '@/services/tablemanager/tablemanager';
import styles from './index.less';
import VerifyModal from './VerifyModal';
import { PlusSquareOutlined, UnorderedListOutlined, FontColorsOutlined } from '@ant-design/icons';
import Tree from '@/components/ExpendableTree';
const AddModal = props => {
  const {
    callBackSubmit = () => {},
    isType,
    itemData,
    isVisible,
    formObj1,
    onCancel,
    treeData,
    keepTreeFirst,
  } = props;
  const [loading, setLoading] = useState(false);
  const [fieldName, setFieldName] = useState([]); // 弹窗
  const [eventList, setEventList] = useState([]); // 事件
  const [filed, setFiled] = useState({}); // 事件
  const [treeValue, setTreeValue] = useState([]);
  const [verification, setVerification] = useState([]);
  const [Shape, setShape] = useState('');
  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
  const [characteristics, setCharacteristics] = useState([
    '文本',
    '数值',
    '唯一值文本',
    '多行文本',
    '编码',
    '地址',
    '本人部门',
    '本人姓名',
    '本人ID',
    '选择器',
    '搜索选择器',
    '值选择器',
    '值复选器',
    '业务选择器',
    '可编辑值选择器',
    '平铺值选择器',
    '站点选择器',
    '人员选择器',
    // '人员选择器新',
    '城市选择器',
    '台账选择器',
    '部门选择器',
    '附件',
    '可预览附件',
    '图片',
    '可预览图片',
    '录音',
    '视频',
    '日期时间',
    '日期',
    '日期月份',
    '日期年份',
    '日期周',
    '时分秒',
    '设备选择',
    '坐标控件',
    '区域控件',
    '路径控件',
    '智能抄表',
    '二维码识别',
    '设备二维码',
    '位置坐标',
    '富文本',
  ]);

  const [characteristics1, setCharacteristics1] = useState([
    {
      name: '文本类',
      ID: 0,
      children: [
        '文本',
        '唯一值文本',
        '多行文本',
        '本人部门',
        '本人姓名',
        '数值',
        '地址',
        '设备二维码',
        '本人ID',
        '富文本',
      ],
    },
    {
      name: '选择器类',
      ID: 1,
      children: [
        '选择器',
        '搜索选择器',
        '值选择器',
        '值复选器',
        '可编辑值选择器',
        '平铺值选择器',
        '站点选择器',
        '人员选择器',
        '城市选择器',
        '台账选择器',
        '业务选择器',
        '部门选择器',
      ],
    },
    {
      name: '附件类',
      ID: 2,
      children: ['附件', '可预览附件', '图片', '可预览图片', '录音', '视频'],
    },
    {
      name: '时间类',
      ID: 3,
      children: ['日期时间', '日期', '日期月份', '日期年份', '日期周', '时分秒'],
    },
    {
      name: '地图类',
      ID: 4,
      children: ['坐标控件', '设备选择', '区域控件', '路径控件', '位置坐标'],
    },
    {
      name: '台账专有类',
      ID: 5,
      children: ['编码', '智能抄表'],
    },
  ]);
  const [visible, setVisible] = useState(false); // 弹窗
  const [isShow, setIsShow] = useState(false); // 弹窗
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
  const [characterValue, setCharacterValue] = useState('');
  const [show, setShow] = useState('block');
  const [pramData, setPramData] = useState({
    Unit: '',
    ExceptionEvent: '',
    Group: '',
    RowSpan: '',
    ColSpan: '',
    ReadOnly: '',
    EditableLater: '',
    ExceptionValue: '',
    Preset: '',
    picture: '',
    must: '',
    coordinates: '',
  });
  const [currentSelectOrg, setCurrentSelectOrg] = useState([]);
  const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
  const [valueData, setValueData] = useState([]); // 保存所有修改数据
  const [keep, setKeep] = useState();
  const [chee, setChee] = useState('');
  const [radio, setRadio] = useState('');
  const [radio1, setRadio1] = useState('');
  const [radio3, setRadio3] = useState('');
  const [detail, setDetail] = useState('');
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const { Item } = Form;
  const { TreeNode } = TreeSelect;
  // 提交
  const onSubmit = () => {
    // 不切换树
    if (valueData.length == 0) {
      console.log(pramData);
      form.validateFields().then(validate => {
        if (validate) {
          setLoading(true);
          let obj = form.getFieldsValue();
          let data = [
            {
              Unit: obj.Unit || '',
              StoreType: 'nvarchar(255)',
              Group: pramData.Group || '',
              Shape,
              ExceptionEvent: pramData.ExceptionEvent || '',
              RowSpan: Number(obj.RowSpan) || 0,
              ColSpan: pramData.ColSpan || 0,
              ReadOnly: pramData.ReadOnly || false,
              EditableLater: pramData.EditableLater || false,
              ExceptionValue: pramData.ExceptionValue || '',
              Preset: pramData.Preset || '',
              ID: pramData.ID,
              Order: pramData.Order,
              Name: obj.Name,
              Alias: obj.Alias,
              SyncEvent: obj.SyncEvent,
              ValidationRule: obj.ValidationRule,
              ExceptionEventFields: characterValue,
            },
          ];
          console.log(radio);
          switch (Shape) {
            case '编码':
              data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
              break;
            case '坐标控件':
              pramData.coordinates ? (data[0].Config = '当前坐标') : (data[0].Config = '');
              break;
            case '图片':
            case '可预览图片':
              data[0].Preset = pramData.picture ? '拍照相册' : '';
              data[0].ValidationRule = pramData.must ? 'required' : '';
              break;
            case '平铺值选择器':
            case '搜索选择器':
              if (obj.Config.endsWith('.n')) {
                data[0].Config = obj.Config;
              } else {
                data[0].Config = radio == 0 ? `${obj.Config}` : `${obj.Config}.n`;
              }
              break;
            case '部门选择器':
              if (obj.check == 0) {
                data[0].Config = '';
              } else {
                data[0].Config = '.n';
              }
              break;
            case '唯一值文本':
              data[0].Config = obj.fieldName
                ? `${obj.tableName}.${obj.fieldName}`
                : `${obj.tableName}`;
              break;
            case '业务选择器':
              if (obj.fieldName.endsWith('.n')) {
                data[0].Config = obj.fieldName
                  ? `${obj.tableName}.${obj.fieldName}`
                  : `${obj.tableName}`;
              } else {
                if (obj.fieldName) {
                  data[0].Config =
                    radio == 0
                      ? `${obj.tableName}.${obj.fieldName}`
                      : `${obj.tableName}.${obj.fieldName}.n`;
                } else {
                  data[0].Config = radio == 0 ? `${obj.tableName}` : `${obj.tableName}.n`;
                }
              }
              break;
            case '台账选择器':
              if (obj.fieldName.endsWith('.n')) {
                data[0].Config = `${obj.standingBook}.${obj.fieldName}`;
              } else {
                if (obj.fieldName) {
                  data[0].Config =
                    radio == 0
                      ? `${obj.standingBook}.${obj.fieldName}`
                      : `${obj.standingBook}.${obj.fieldName}.n`;
                } else {
                  data[0].Config = radio == 0 ? `${obj.standingBook}` : `${obj.standingBook}.n`;
                }
              }
              if (obj.filterName && obj.filterValue) {
                data[0].Config = `${data[0].Config}?${obj.filterName}='${obj.filterValue}'`;
              }
              break;
            case '人员选择器':
              if (radio1 == '全部') {
                if (radio3 == '全部ID') {
                  if (obj.ConfigName) {
                    let str =
                      radio == 0 ? `全部ID.${obj.ConfigName}` : `全部ID.${obj.ConfigName}.n`;
                    data[0].Config = str;
                  } else {
                    let str = radio == 0 ? `全部ID` : `全部ID.n`;
                    data[0].Config = str;
                  }
                } else {
                  if (obj.ConfigName) {
                    let str = radio == 0 ? `全部.${obj.ConfigName}` : `全部.${obj.ConfigName}.n`;
                    data[0].Config = str;
                  } else {
                    let str = radio == 0 ? `全部` : `全部.n`;
                    data[0].Config = str;
                  }
                }
              } else {
                let str = radio == 0 ? `${obj.Config}` : `${obj.Config}.n`;
                console.log(str);
                data[0].Config = str;
              }
              break;
            default:
              data[0].Config = obj.Config;
          }
          console.log(data);
          UpdateFields(data).then(res => {
            setLoading(false);
            if (res.msg === 'Ok' || res.msg === '') {
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: '修改成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          });
        }
      });
    } else {
      onSelect(1.14, keep);
    }
  };

  useEffect(() => {
    if (isVisible) {
      // 用于判断分组名与字段名重复时提示当前未选中字段
      if (keepTreeFirst.indexOf(itemData.name) != -1 && itemData.children) {
        setShow('none');
      } else {
        setShow('block');
      }
      setTreeValue(treeData);
      setValueData([]);
      setExpendKey(itemData.ID);
      setCurrentSelectOrg(itemData.ID);
      console.log(treeData);
      if (isType != '') {
        let req1 = getField({ fieldID: itemData.ID });
        let req2 = loadTableFields({ tableName: formObj1 });
        let req3 = LoadEventType({});
        Promise.all([req1, req2, req3]).then(res => {
          res[1].msg === 'Ok' && setFieldName(res[1].data.root);
          res[2].msg === 'Ok' && setEventList(res[2].data.root);
          if (res[0].msg === 'Ok') {
            form.setFieldsValue({ ...res[0].data.root });
            if (res[0].data.root.ExceptionEventFields === '') {
              setCharacterValue('');
              setCheckedList([]);
              setIsShow(false);
            } else {
              setIsShow(true);
              setCharacterValue(res[0].data.root.ExceptionEventFields);
              setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
            }
            setShape(res[0].data.root.Shape);
            console.log(res[0].data.root.Shape);
            if (res[0].data.root.Shape == '文本') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (res[0].data.root.Shape == '多行文本') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (res[0].data.root.Shape == '数值') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (res[0].data.root.Shape == '设备二维码') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (res[0].data.root.Shape == '选择器') {
              setDetail('数据字典名称');
            } else if (
              res[0].data.root.Shape == '值选择器' ||
              res[0].data.root.Shape == '值复选择器'
            ) {
              setDetail('用英文逗号分隔自定义的值，可设置初始值');
            } else if (res[0].data.root.Shape == '可编辑值选择器') {
              setDetail('用英文逗号分隔自定义的值，可编辑，可设置初始值');
            } else if (res[0].data.root.Shape == '平铺值选择器') {
              setDetail('用英文逗号分隔自定义的值，勾选，可设置初始值值后加.n可调整为复选');
            } else {
              setDetail('');
            }

            let coordinates = false,
              picture = false,
              must = false;
            switch (res[0].data.root.Shape) {
              case '坐标控件':
                res[0].data.root.Config === '当前坐标'
                  ? (coordinates = true)
                  : (coordinates = false);
                break;
              case '图片':
              case '可预览图片':
                res[0].data.root.Preset === '拍照相册' ? (picture = true) : (picture = false);
                res[0].data.root.ValidationRule === 'required' ? (must = true) : (must = false);
                break;
              case '编码':
                let code = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  code: code[0] || '',
                  prefix: code[1] === 'undefined' ? '' : code[1],
                });
                break;
              case '平铺值选择器':
              case '搜索选择器':
                let data = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  Config: data[0] || '',
                });
                if (res[0].data.root.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '唯一值文本':
                let arr = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  tableName: arr[0] || '',
                  fieldName: arr[1] || '',
                });
                break;
              case '业务选择器':
                let list = res[0].data.root.Config.split('.');
                console.log(list);
                form.setFieldsValue({
                  tableName: list[0] || '',
                  fieldName: list[1] || '',
                });
                if (res[0].data.root.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '部门选择器':
                let department = res[0].data.root.Config;
                console.log(department);
                if (department == '.n') {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '台账选择器':
                let book = res[0].data.root.Config.split('.');
                let bb = book[1].split('?');
                form.setFieldsValue({
                  standingBook: book[0] || '',
                  fieldName: bb[0] || '',
                });
                let book1 = res[0].data.root.Config.split('?');
                if (book1[1]) {
                  let aa = book1[1].split('=');
                  form.setFieldsValue({
                    filterName: aa[0],
                    filterValue: aa[1].substring(1, aa[1].length - 1),
                  });
                }
                if (book1[0].endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '人员选择器':
                let pepole = res[0].data.root.Config.split('.');
                console.log(pepole);
                form.setFieldsValue({ ShowConfig: res[0].data.root.Config });
                if (pepole[0] == '全部') {
                  setRadio1('全部');
                  setRadio3('0');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      // Config: pepole[0],
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      // Config: pepole[0],
                      ConfigName: '',
                    });
                  }
                } else if (pepole[0] == '全部ID') {
                  setRadio1('全部');
                  setRadio3('全部ID');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      // Config: pepole[0],
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      // Config: pepole[0],
                      ConfigName: '',
                    });
                  }
                } else {
                  setRadio1('0');
                  setRadio3('0');
                  form.setFieldsValue({
                    All: '0',
                    AllID: '0',
                    Config: pepole[0],
                  });
                }
                if (res[0].data.root.Config.endsWith('.n')) {
                  console.log(111);
                  form.setFieldsValue({ check: 1 });
                  setRadio(1);
                } else {
                  console.log(222);
                  form.setFieldsValue({ check: 0 });
                  setRadio(0);
                }
                break;
            }
            setPramData({ ...res[0].data.root, coordinates, must, picture });
            if (
              res[0].data.root.Shape == '多行文本' ||
              res[0].data.root.Shape == '附件' ||
              res[0].data.root.Shape == '可预览附件' ||
              res[0].data.root.Shape == '图片' ||
              res[0].data.root.Shape == '可预览图片' ||
              res[0].data.root.Shape == '录音' ||
              res[0].data.root.Shape == '视频'
            ) {
              form.setFieldsValue({ RowSpan: 6 });
            } else {
              if (res[0].data.root.RowSpan !== 0) {
                form.setFieldsValue({ RowSpan: res[0].data.root.RowSpan });
              } else {
                form.setFieldsValue({ RowSpan: 1 });
              }
            }
            // 清空表单数据
            let index = res[2].data.root.find(item => {
              return item.Name == res[0].data.root.ExceptionEvent;
            });
            console.log(index);
            getFieldData(index.TableName);
          }
        });
      }
    } else {
      setPramData([]);
      form.resetFields();
      setChee('');
      setRadio('');
      setRadio1('');
      setRadio3('');
    }
  }, [isVisible]);

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 3,
    },
    wrapperCol: {
      span: 30,
    },
  };

  const handleChange = value => {
    form.setFieldsValue({ schemename: value });
  };

  const onOK = prop => {
    console.log(prop, 'prop');
    setVisible(false);
    if (type === 'rule') {
      form.setFieldsValue({ ValidationRule: prop });
    } else {
      setCheckedList(prop.checkedList);
      setCharacterValue(prop.str);
    }
  };
  const add = aa => {
    let obj = form.getFieldsValue();
    let data = { numerical: '', rule: [] };
    console.log(obj.ValidationRule, 'ValidationRule');
    if (obj.ValidationRule) {
      let arr = obj.ValidationRule.split(',');
      arr.forEach(item => {
        let value;
        if (item.indexOf('maxLength') !== -1) {
          value = 'maxLength';
        } else {
          value = item;
        }
        switch (value) {
          case 'required':
            data.rule.push(item);
            break;
          case 'emphasis':
            data.rule.push(item);
            break;
          case 'sensitive':
            data.rule.push(item);
            break;
          case 'maxLength':
            data.rule.push(item);
            break;
          default:
            data.numerical = item;
        }
      });
    } else {
      data = { rule: [], numerical: '' };
    }
    setType(aa);
    setFormObj(data);
    setVisible(true);
  };

  const handleEvent = (value, e) => {
    let data = { ...pramData };
    data.ExceptionEvent = e.name;
    if (e.tablename) {
      getFieldData(e.tablename);
      setPramData(data);
    } else {
      setIsShow(false);
      setFiled({});
      setCharacterValue('');
      setCheckedList([]);
    }
  };
  const getFieldData = value => {
    LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
      if (res.msg === 'Ok') {
        setFiled(formateArrDataA(res.data.root, 'group'));
        setIsShow(true);
      }
    });
  };

  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 key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.fieldName);
      });
    }
    return tempObj;
  };
  const handleCharacteristics = value => {
    form.setFieldsValue({
      Config: '',
      tableName: '',
      fieldName: '',
      filterName: '',
      filterValue: '',
      standingBook: '',
      check: 0,
      AllID: '0',
      All: '0',
      ShowConfig: '',
    });
    setRadio(0);
    setRadio3('0');
    setRadio1('0');
    console.log(value);
    if (value == '文本') {
      setDetail('输入内容将显示在前端输入框提示信息中');
    } else if (value == '多行文本') {
      setDetail('输入内容将显示在前端输入框提示信息中');
    } else if (value == '数值') {
      setDetail('输入内容将显示在前端输入框提示信息中');
    } else if (value == '设备二维码') {
      setDetail('输入内容将显示在前端输入框提示信息中');
    } else if (value == '选择器') {
      setDetail('数据字典名称');
    } else if (value == '值选择器' || value == '值复选择器') {
      setDetail('用英文逗号分隔自定义的值，可设置初始值');
    } else if (value == '可编辑值选择器') {
      setDetail('用英文逗号分隔自定义的值，可编辑，可设置初始值');
    } else if (value == '平铺值选择器') {
      setDetail('用英文逗号分隔自定义的值，勾选，可设置初始值值后加.n可调整为复选');
    } else {
      setDetail('');
    }

    if (
      value == '多行文本' ||
      value == '附件' ||
      value == '可预览附件' ||
      value == '图片' ||
      value == '可预览图片' ||
      value == '录音' ||
      value == '视频'
    ) {
      form.setFieldsValue({ RowSpan: 6 });
    } else if (value == '站点选择器') {
      form.setFieldsValue({ Config: '全局.n' });
    } else {
      if (pramData.RowSpan) {
        form.setFieldsValue({ RowSpan: pramData.RowSpan });
      }
      form.setFieldsValue({ RowSpan: 1 });
    }
    let data = { ...pramData };
    setShape(value);
    data.must = false;
    data.coordinates = false;
    data.picture = false;
    data.Preset = '';
    setPramData(data);
    form.setFieldsValue({ ValidationRule: '' });
    if (value.indexOf('日期') != -1 || value === '时分秒') {
      form.setFieldsValue({ Config: undefined });
    }
  };
  const onCharacterValue = e => {
    setCharacterValue(e.target.value);
  };
  const onChangeReady = (e, str) => {
    let data = { ...pramData };
    switch (str) {
      case 'ReadOnly':
        data.ReadOnly = e.target.checked;
        break;
      case 'EditableLater':
        data.EditableLater = e.target.checked;
        break;
      case 'must':
        data.must = e.target.checked;
        break;
      case 'picture':
        data.picture = e.target.checked;
        break;
      case 'coordinates':
        data.coordinates = e.target.checked;
        break;
    }
    setPramData(data);
  };
  const handleInput = (e, str) => {
    let data = { ...pramData };
    switch (str) {
      case 'Unit':
        data.Unit = e.target.value;
        break;
      case 'RowSpan':
        data.RowSpan = e.target.value;
        break;
      case 'Preset':
        data.Preset = e.target.value;
        break;
      case 'ExceptionValue':
        data.ExceptionValue = e.target.value;
        break;
      default:
        break;
    }
    setPramData(data);
  };
  const handleSeparator = value => {
    let data = { ...pramData };
    switch (value) {
      case '6':
        data.Preset = '是';
        form.setFieldsValue({ Config: '是,否' });
        break;
      case '7':
        data.Preset = '否';
        form.setFieldsValue({ Config: '是,否' });
        break;
      case '8':
        data.Preset = '否';
        form.setFieldsValue({ Config: '否,是' });
        break;
    }
    setPramData(data);
  };

  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    return {
      title: (
        <span className={styles.titleText}>
          {org.children ? (
            <UnorderedListOutlined style={{ color: '#1890FF' }} />
          ) : (
            <FontColorsOutlined style={{ color: '#1890FF' }} />
          )}
          <span style={{ marginLeft: '5px' }}>{org.name}</span>
        </span>
      ),
      key: org.ID,
      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
      children: haveChildren ? org.children.map(i => mapTree(i)) : [],
      org,
    };
  };
  const onSelect = (i, e) => {
    console.log(e);
    setKeep(e);
    if (e.node) {
      setCurrentSelectOrg(e.node.org.ID);
    } else {
      setCurrentSelectOrg(e.ID);
    }
    if (e.node && keepTreeFirst.indexOf(e.node.org.name) != -1 && e.node.children.length > 0) {
      setShow('none');
    } else {
      setShow('block');
    }
    if (isType != '') {
      let req1 = getField({ fieldID: e.node.org.ID });
      let req2 = loadTableFields({ tableName: formObj1 });
      let req3 = LoadEventType({});
      console.log(valueData);
      let bb = [];
      valueData.map(i => {
        bb.push(i.ID.toString());
      });
      console.log(bb);
      console.log(e.node.org.ID);
      console.log(bb.indexOf(e.node.org.ID.toString()));
      if (bb.indexOf(e.node.org.ID) != -1) {
        let aa = valueData.find(i => i.ID == e.node.org.ID);
        Promise.all([req1, req2, req3]).then(res => {
          res[1].msg === 'Ok' && setFieldName(res[1].data.root);
          res[2].msg === 'Ok' && setEventList(res[2].data.root);
          if (res[0].msg === 'Ok') {
            form.setFieldsValue({ ...aa });
            if (aa.ExceptionEventFields === '') {
              setCharacterValue('');
              setCheckedList([]);
              setIsShow(false);
            } else {
              setIsShow(true);
              setCharacterValue(aa.ExceptionEventFields);
              setCheckedList(aa.ExceptionEventFields.split(','));
            }
            setShape(aa.Shape);
            if (aa.Shape == '文本') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (aa.Shape == '多行文本') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (aa.Shape == '数值') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (aa.Shape == '设备二维码') {
              setDetail('输入内容将显示在前端输入框提示信息中');
            } else if (aa.Shape == '选择器') {
              setDetail('数据字典名称');
            } else if (aa.Shape == '值选择器' || aa.Shape == '值复选择器') {
              setDetail('用英文逗号分隔自定义的值，可设置初始值');
            } else if (aa.Shape == '可编辑值选择器') {
              setDetail('用英文逗号分隔自定义的值，可编辑，可设置初始值');
            } else if (aa.Shape == '平铺值选择器') {
              setDetail('用英文逗号分隔自定义的值，勾选，可设置初始值值后加.n可调整为复选');
            } else {
              setDetail('');
            }

            let coordinates = false,
              picture = false,
              must = false;
            switch (aa.Shape) {
              case '坐标控件':
                aa.Config === '当前坐标' ? (coordinates = true) : (coordinates = false);
                break;
              case '图片':
              case '可预览图片':
                aa.Preset === '拍照相册' ? (picture = true) : (picture = false);
                aa.ValidationRule === 'required' ? (must = true) : (must = false);
                break;
              case '编码':
                let code = aa.Config.split('.');
                form.setFieldsValue({
                  code: code[0] || '',
                  prefix: code[1] === 'undefined' ? '' : code[1],
                });
                break;
              case '平铺值选择器':
              case '搜索选择器':
                let data = aa.Config.split('.');
                form.setFieldsValue({
                  Config: data[0] || '',
                });
                if (aa.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '唯一值文本':
                let arr = aa.Config.split('.');
                form.setFieldsValue({
                  tableName: arr[0] || '',
                  fieldName: arr[1] || '',
                });
                break;
              case '业务选择器':
                let list = aa.Config.split('.');
                form.setFieldsValue({
                  tableName: list[0] || '',
                  fieldName: list[1] || '',
                });
                if (aa.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '台账选择器':
                let book = aa.Config.split('.');
                let ad = book[1].split('?');
                form.setFieldsValue({
                  standingBook: book[0] || '',
                  fieldName: ad[0] || '',
                });
                let book1 = aa.Config.split('?');
                if (book1[1]) {
                  let cc = book1[1].split('=');
                  form.setFieldsValue({
                    filterName: cc[0],
                    filterValue: cc[1].substring(1, cc[1].length - 1),
                  });
                }
                if (book1[0].endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '人员选择器':
                let pepole = aa.Config.split('.');
                // form.setFieldsValue({ ShowConfig: pepole });
                if (pepole[0] == '全部') {
                  setRadio1('全部');
                  setRadio3('0');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      ConfigName: '',
                    });
                  }
                } else if (pepole[0] == '全部ID') {
                  setRadio1('全部');
                  setRadio3('全部ID');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      ConfigName: '',
                    });
                  }
                } else {
                  setRadio1('0');
                  setRadio3('0');
                  form.setFieldsValue({
                    All: '0',
                    AllID: '0',
                    Config: pepole[0],
                  });
                }
                if (aa.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
            }
            setValue1();
            setPramData({ ...aa, coordinates, must, picture });
            let index = res[2].data.root.find(item => {
              return item.Name == aa.ExceptionEvent;
            });
            getFieldData(index.TableName);
          }
        });
      } else {
        Promise.all([req1, req2, req3]).then(res => {
          res[1].msg === 'Ok' && setFieldName(res[1].data.root);
          res[2].msg === 'Ok' && setEventList(res[2].data.root);
          if (res[0].msg === 'Ok') {
            form.setFieldsValue({ ...res[0].data.root });
            if (res[0].data.root.ExceptionEventFields === '') {
              setCharacterValue('');
              setCheckedList([]);
              setIsShow(false);
            } else {
              setIsShow(true);
              setCharacterValue(res[0].data.root.ExceptionEventFields);
              setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
            }
            setShape(res[0].data.root.Shape);
            let coordinates = false,
              picture = false,
              must = false;
            switch (res[0].data.root.Shape) {
              case '坐标控件':
                res[0].data.root.Config === '当前坐标'
                  ? (coordinates = true)
                  : (coordinates = false);
                break;
              case '图片':
              case '可预览图片':
                res[0].data.root.Preset === '拍照相册' ? (picture = true) : (picture = false);
                res[0].data.root.ValidationRule === 'required' ? (must = true) : (must = false);
                break;
              case '编码':
                let code = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  code: code[0] || '',
                  prefix: code[1] === 'undefined' ? '' : code[1],
                });
                break;
              case '平铺值选择器':
              case '搜索选择器':
                let data = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  Config: data[0] || '',
                });
                if (res[0].data.root.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '唯一值文本':
                let arr = res[0].data.root.Config.split('.');
                form.setFieldsValue({
                  tableName: arr[0] || '',
                  fieldName: arr[1] || '',
                });
                break;
              case '业务选择器':
                let list = res[0].data.root.Config.split('.');
                console.log(list);
                form.setFieldsValue({
                  tableName: list[0] || '',
                  fieldName: list[1] || '',
                });
                if (res[0].data.root.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '台账选择器':
                let book = res[0].data.root.Config.split('.');
                let ab = book[1].split('?');
                form.setFieldsValue({
                  standingBook: book[0] || '',
                  fieldName: ab[0] || '',
                });
                let book1 = res[0].data.root.Config.split('?');
                if (book1[1]) {
                  let aa = book1[1].split('=');
                  form.setFieldsValue({
                    filterName: aa[0],
                    filterValue: aa[1].substring(1, aa[1].length - 1),
                  });
                }
                if (book1[0].endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
              case '人员选择器':
                let pepole = res[0].data.root.Config.split('.');
                // form.setFieldsValue({ ShowConfig: pepole });
                console.log(pepole);
                if (pepole[0] == '全部') {
                  setRadio1('全部');
                  setRadio3('全部');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      // Config: pepole[0],
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '0',
                      // Config: pepole[0],
                      ConfigName: '',
                    });
                  }
                } else if (pepole[0] == '全部ID') {
                  setRadio1('全部');
                  setRadio3('全部ID');
                  if (pepole[1] != 'n') {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      // Config: pepole[0],
                      ConfigName: pepole[1],
                    });
                  } else {
                    form.setFieldsValue({
                      All: '全部',
                      AllID: '全部ID',
                      // Config: pepole[0],
                      ConfigName: '',
                    });
                  }
                } else {
                  setRadio1('0');
                  setRadio3('0');
                  form.setFieldsValue({
                    All: '0',
                    AllID: '0',
                    Config: pepole[0],
                  });
                }
                if (res[0].data.root.Config.endsWith('.n')) {
                  form.setFieldsValue({
                    check: 1,
                  });
                  setRadio(1);
                } else {
                  form.setFieldsValue({
                    check: 0,
                  });
                  setRadio(0);
                }
                break;
            }
            setValue1();
            setPramData({ ...res[0].data.root, coordinates, must, picture });
            let index = res[2].data.root.find(item => {
              return item.Name == res[0].data.root.ExceptionEvent;
            });
            console.log('index', index);
            getFieldData(index.TableName);
          }
        });
      }
    }
    form.validateFields().then(validate => {
      console.log(pramData);
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let data = [
          {
            Unit: obj.Unit || '',
            StoreType: 'nvarchar(255)',
            Group: pramData.Group || '',
            Shape,
            ExceptionEvent: pramData.ExceptionEvent || '',
            RowSpan: Number(obj.RowSpan) || 0,
            ColSpan: pramData.ColSpan || 0,
            ReadOnly: pramData.ReadOnly || false,
            EditableLater: pramData.EditableLater || false,
            ExceptionValue: pramData.ExceptionValue || '',
            Preset: pramData.Preset || '',
            ID: pramData.ID,
            Order: pramData.Order,
            Name: obj.Name,
            Alias: obj.Alias,
            SyncEvent: obj.SyncEvent,
            ValidationRule: obj.ValidationRule,
            ExceptionEventFields: characterValue,
          },
        ];

        switch (Shape) {
          case '编码':
            data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
            break;
          case '坐标控件':
            pramData.coordinates ? (data[0].Config = '当前坐标') : (data[0].Config = '');
            break;
          case '图片':
          case '可预览图片':
            data[0].Preset = pramData.picture ? '拍照相册' : '';
            data[0].ValidationRule = pramData.must ? 'required' : '';
            break;
          case '平铺值选择器':
          case '搜索选择器':
            if (obj.Config.endsWith('.n')) {
              data[0].Config = obj.Config;
            } else {
              data[0].Config = radio == 0 ? `${obj.Config}` : `${obj.Config}.n`;
            }
            break;
          case '唯一值文本':
            data[0].Config = obj.fieldName
              ? `${obj.tableName}.${obj.fieldName}`
              : `${obj.tableName}`;
            break;
          case '业务选择器':
            if (obj.fieldName.endsWith('.n')) {
              data[0].Config = obj.fieldName
                ? `${obj.tableName}.${obj.fieldName}`
                : `${obj.tableName}`;
            } else {
              if (obj.fieldName) {
                data[0].Config =
                  radio == 0
                    ? `${obj.tableName}.${obj.fieldName}`
                    : `${obj.tableName}.${obj.fieldName}.n`;
              } else {
                data[0].Config = radio == 0 ? `${obj.tableName}` : `${obj.tableName}.n`;
              }
            }
            break;
          case '台账选择器':
            if (obj.fieldName.endsWith('.n')) {
              data[0].Config = `${obj.standingBook}.${obj.fieldName}`;
            } else {
              if (obj.fieldName) {
                data[0].Config =
                  radio == 0
                    ? `${obj.standingBook}.${obj.fieldName}`
                    : `${obj.standingBook}.${obj.fieldName}.n`;
              } else {
                data[0].Config = radio == 0 ? `${obj.standingBook}` : `${obj.standingBook}.n`;
              }
            }
            if (obj.filterName && obj.filterValue) {
              data[0].Config = `${data[0].Config}?${obj.filterName}='${obj.filterValue}'`;
            }
            break;
          case '人员选择器':
            console.log(obj.ConfigName);
            console.log(form.getFieldValue().ConfigName);
            console.log(radio1);
            console.log(radio3);
            console.log(form.getFieldValue().All);
            console.log(form.getFieldValue().AllID);
            if (radio1 == '全部') {
              if (radio3 == '全部ID') {
                if (obj.ConfigName) {
                  let str = radio == 0 ? `全部ID.${obj.ConfigName}` : `全部ID.${obj.ConfigName}.n`;
                  data[0].Config = str;
                } else {
                  let str = radio == 0 ? `全部ID` : `全部ID.n`;
                  data[0].Config = str;
                }
              } else {
                if (obj.ConfigName) {
                  let str = radio == 0 ? `全部.${obj.ConfigName}` : `全部.${obj.ConfigName}.n`;
                  data[0].Config = str;
                } else {
                  let str = radio == 0 ? `全部` : `全部.n`;
                  data[0].Config = str;
                }
              }
            } else {
              let str = radio == 0 ? `${obj.Config}` : `${obj.Config}.n`;
              console.log(str);
              data[0].Config = str;
            }
            break;
          default:
            data[0].Config = obj.Config;
        }
        console.log(data[0]);
        if (keepTreeFirst.indexOf(e.node.org.name) == -1) {
          if (valueData.length > 0) {
            let aa = [];
            valueData.map(i => {
              aa.push(i.ID);
            });
            if (aa.indexOf(data[0].ID) != -1) {
              valueData.map((i, j) => {
                if (i.ID == data[0].ID) {
                  valueData[j] = data[0];
                }
              });
            } else {
              valueData.push(data[0]);
            }
          } else {
            valueData.push(data[0]);
          }
        }
        form.setFieldsValue({
          tableName: '',
          fieldName: '',
          standingBook: '',
          filterName: '',
          filterValue: '',
          ConfigName: '',
          check: '',
          ShowConfig: '',
          All: '',
          AllID: '',
        });
        if (i == 1.14) {
          console.log(valueData);
          UpdateFields(valueData).then(res => {
            setLoading(false);
            if (res.msg === 'Ok' || res.msg === '') {
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: '修改成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          });
        }
      }
    });
  };

  const onChange2 = e => {
    setRadio(e.target.value);
    setValue1();
  };

  const inputOnChange = e => {
    setValue1();
  };

  const inputOnchange = e => {
    setValue1();
  };

  const onChange3 = e => {
    // if (e.target.value == '全部ID') {
    //   form.setFieldsValue({ Config: '全部ID' });
    // }
    // if (e.target.value == '0' && radio1 == '全部') {
    //   form.setFieldsValue({ Config: '全部' });
    // }
    setRadio3(e.target.value);
    setValue1();
  };

  const onChange1 = e => {
    let aa = form.getFieldsValue().ConfigName;
    let bb = form.getFieldsValue().Config;
    console.log(aa);
    console.log(bb);
    if (e.target.value == '全部') {
      // if (radio3 == '全部ID') {
      //   form.setFieldsValue({ Config: '全部ID' });
      // } else {
      //   form.setFieldsValue({ Config: '全部' });
      // }
      form.setFieldsValue({ ConfigName: bb });
    } else {
      form.setFieldsValue({ Config: aa, AllID: '0' });
      setRadio3('0');
    }
    setRadio1(e.target.value);
    setValue();
  };

  const setValue = () => {
    let aa = form.getFieldsValue().ConfigName;
    let bb = form.getFieldsValue().Config;
    let cc = form.getFieldsValue().All;
    let dd = form.getFieldsValue().AllID;
    let ff = form.getFieldsValue().check;
    console.log(aa);
    console.log(bb);
    console.log(ff);
    if (cc == '全部') {
      if (dd == '全部ID') {
        if (bb) {
          if (ff == 1) {
            console.log(1);
            form.setFieldsValue({ ShowConfig: `全部ID.${bb}.n` });
          } else {
            console.log(2);
            form.setFieldsValue({ ShowConfig: `全部ID.${bb}` });
          }
        } else {
          if (ff == 1) {
            console.log(3);
            form.setFieldsValue({ ShowConfig: `全部ID.n` });
          } else {
            console.log(4);
            form.setFieldsValue({ ShowConfig: `全部ID` });
          }
        }
      } else {
        if (bb) {
          if (ff == 1) {
            console.log(5);
            form.setFieldsValue({ ShowConfig: `全部.${bb}.n` });
          } else {
            console.log(6);
            form.setFieldsValue({ ShowConfig: `全部.${bb}` });
          }
        } else {
          if (ff == 1) {
            console.log(7);
            form.setFieldsValue({ ShowConfig: `全部.n` });
          } else {
            console.log(8);
            form.setFieldsValue({ ShowConfig: `全部` });
          }
        }
      }
    } else {
      if (aa) {
        if (ff == 1) {
          console.log(9);
          form.setFieldsValue({ ShowConfig: `${aa}.n` });
        } else {
          console.log(10);
          form.setFieldsValue({ ShowConfig: `${aa}` });
        }
      } else {
        if (ff == 1) {
          console.log(11);
          form.setFieldsValue({ ShowConfig: `.n` });
        } else {
          console.log(12);
          form.setFieldsValue({ ShowConfig: '' });
        }
      }
    }
  };

  const setValue1 = () => {
    let aa = form.getFieldsValue().ConfigName;
    let bb = form.getFieldsValue().Config;
    let cc = form.getFieldsValue().All;
    let dd = form.getFieldsValue().AllID;
    let ff = form.getFieldsValue().check;
    console.log(valueData);
    console.log(aa);
    console.log(bb);
    console.log(ff);
    console.log(cc);
    console.log(dd);
    if (cc == '全部') {
      if (dd == '全部ID') {
        if (aa) {
          if (ff == 1) {
            console.log(1);
            form.setFieldsValue({ ShowConfig: `全部ID.${aa}.n` });
          } else {
            console.log(2);
            form.setFieldsValue({ ShowConfig: `全部ID.${aa}` });
          }
        } else {
          if (ff == 1) {
            console.log(3);
            form.setFieldsValue({ ShowConfig: `全部ID.n` });
          } else {
            console.log(4);
            form.setFieldsValue({ ShowConfig: `全部ID` });
          }
        }
      } else {
        if (aa) {
          if (ff == 1) {
            console.log(5);
            form.setFieldsValue({ ShowConfig: `全部.${aa}.n` });
          } else {
            console.log(6);
            form.setFieldsValue({ ShowConfig: `全部.${aa}` });
          }
        } else {
          if (ff == 1) {
            console.log(7);
            form.setFieldsValue({ ShowConfig: `全部.n` });
          } else {
            console.log(8);
            form.setFieldsValue({ ShowConfig: `全部` });
          }
        }
      }
    } else {
      if (bb) {
        if (ff == 1) {
          console.log(9);
          form.setFieldsValue({ ShowConfig: `${bb}.n` });
        } else {
          console.log(10);
          form.setFieldsValue({ ShowConfig: `${bb}` });
        }
      } else {
        if (ff == 1) {
          console.log(11);
          form.setFieldsValue({ ShowConfig: `.n` });
        } else {
          console.log(12);
          form.setFieldsValue({ ShowConfig: '' });
        }
      }
    }
  };

  const mapTreeSelect = org => {
    return org.children ? (
      <TreeNode value={org.name} title={org.name} disabled>
        {org.children.map(item => mapTreeSelect(item))}
      </TreeNode>
    ) : (
      <TreeNode value={org} title={org} key={org} />
    );
  };

  return (
    <>
      <Drawer
        title="修改"
        width="900px"
        // {...props}
        visible={isVisible}
        onClose={onCancel}
        destroyOnClose
        afterClose={() => {
          form.resetFields();
        }}
        footer={
          <Space>
            <Button onClick={onSubmit} type="primary">
              保存
            </Button>
          </Space>
        }
      >
        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-start' }}>
          <div
            style={{
              width: '300px',
              overflowY: 'scroll',
              height: 'calc(100vh - 160px)',
              borderRight: '1px solid #f0eded',
            }}
          >
            <Tree
              showIcon="true"
              blockNode
              autoExpandParent
              selectedKeys={[currentSelectOrg]}
              onSelect={onSelect}
              treeData={treeValue.map(t => mapTree(t))}
              expandedKeys={expendKey}
            />
          </div>
          {show == 'block' ? (
            <div style={{ width: '600px', overflowY: 'scroll', height: 'calc(100vh - 160px)' }}>
              {isVisible && (
                <Form form={form}>
                  <Item
                    label="字段名"
                    name="Name"
                    labelCol={{ span: 3 }}
                    rules={[{ required: true, message: '请输入表名' }]}
                  >
                    <Input placeholder="请输入别名" disabled style={{ width: '93%' }} />
                  </Item>
                  <Item label="别名" name="Alias" labelCol={{ span: 3 }}>
                    <Input placeholder="请输入别名" allowClear style={{ width: '93%' }} />
                  </Item>
                  <Item name="ReadOnly" label="属性" labelCol={{ span: 3 }}>
                    <div>
                      <Checkbox
                        checked={pramData.ReadOnly}
                        onChange={e => onChangeReady(e, 'ReadOnly')}
                      >
                        只读
                      </Checkbox>
                      <Checkbox
                        checked={pramData.EditableLater}
                        onChange={e => onChangeReady(e, 'EditableLater')}
                      >
                        允许补正(事后修改)
                      </Checkbox>
                    </div>
                  </Item>
                  <Item label="同步" name="SyncEvent" labelCol={{ span: 3 }}>
                    <Radio.Group>
                      <Radio value={0} style={{ marginRight: '0.5rem' }}>
                        不同步
                      </Radio>
                      <Radio value={1} style={{ marginRight: '0.5rem' }}>
                        工单 → 事件
                      </Radio>
                      <Radio value={2}>事件（上报时） → 工单</Radio>
                    </Radio.Group>
                  </Item>
                  <Row>
                    {/* <Col span={1} /> */}
                    <Col span={12}>
                      <Item label="形态" labelCol={{ span: 6 }}>
                        <div className={styles.listEvent}>
                          <TreeSelect
                            style={{ width: '95%' }}
                            value={Shape}
                            onChange={handleCharacteristics}
                            showSearch
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            placeholder="请选择表名 "
                            allowClear
                            treeDefaultExpandAll
                            showCheckedStrategy
                          >
                            {characteristics1 ? (
                              characteristics1.map(i => mapTreeSelect(i))
                            ) : (
                              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                            )}
                          </TreeSelect>
                          {/* <div className={styles.unit}>
                        单位：
                        <Input
                          style={{ width: '5rem' }}
                          placeholder=""
                          allowClear
                          value={pramData.Unit}
                          onChange={e => handleInput(e, 'Unit')}
                        />
                      </div>
                      <div className={styles.unit}>
                        宽：
                        <Input
                          style={{ width: '3.8rem' }}
                          placeholder=""
                          allowClear
                          value={pramData.RowSpan}
                          onChange={e => handleInput(e, 'RowSpan')}
                          onkeyup="value=value.replace(/[^\d]/g,'')"
                        />
                      </div> */}
                        </div>
                      </Item>
                    </Col>
                    <Col span={6}>
                      <Item label="单位" name="Unit" labelCol={{ span: 7 }}>
                        <Input style={{ width: '95%' }} placeholder="" />
                      </Item>
                    </Col>
                    <Col span={5}>
                      <Item label="宽" name="RowSpan" labelCol={{ span: 7 }}>
                        <Input style={{ width: '87%' }} placeholder="" />
                      </Item>
                    </Col>
                  </Row>

                  {/* <div style={{ border: '1px dashed red' }}> */}
                  {(() => {
                    switch (Shape) {
                      case '编码':
                        return (
                          <>
                            <Item label="前缀" name="prefix" labelCol={{ span: 3 }}>
                              <Input style={{ width: '93%' }} placeholder="" allowClear />
                            </Item>
                            <Item label="编码方式" name="code" labelCol={{ span: 3 }}>
                              <Radio.Group>
                                <Radio value="年份编码" style={{ marginRight: '0.5rem' }}>
                                  XJ-2019-000001（前缀-年份-六位编码）
                                </Radio>
                                <Radio value="年月编码" style={{ marginRight: '0.5rem' }}>
                                  XJ-201909-000001（前缀-年份月份-六位编码）
                                </Radio>
                                <Radio value="一般编码" defaultChecked>
                                  XJ00000001（前缀 八位编码）
                                </Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '值选择器':
                      case '值复选器':
                        return (
                          <>
                            {' '}
                            <Item label="可选值" name="Config" labelCol={{ span: 3 }}>
                              <TextArea
                                allowClear
                                style={{ width: '93%' }}
                                placeholder="用英文逗号分隔自定义的值，可设置初始值"
                              />
                            </Item>
                            {/* <Item colon={false} label=" " labelCol={{ span: 3 }}>
                              {' '}
                              <div style={{ display: 'flex', alignItems: 'center' }}>
                                <span style={{ marginRight: '0.4rem' }}>
                                  以英文逗号为分隔符填写，或其他分隔符粘贴：
                                </span>
                                <Select onChange={handleSeparator} style={{ width: '30.8%' }}>
                                  <Select.Option value="0">以,分隔(英文逗号)</Select.Option>
                                  <Select.Option value="1">以/分隔(正斜杠)</Select.Option>
                                  <Select.Option value="2">以\\分隔(反斜杠)</Select.Option>
                                  <Select.Option value="3">以、分隔(中文顿号)</Select.Option>
                                  <Select.Option value="4">以;分隔(英文分号)</Select.Option>
                                  <Select.Option value="5">以；分隔(中文分号)</Select.Option>
                                  <Select.Option value="6">(是)/否</Select.Option>
                                  <Select.Option value="7">是/(否)</Select.Option>
                                  <Select.Option value="8">(否)/是</Select.Option>
                                </Select>
                              </div>
                            </Item> */}
                          </>
                        );
                      case '可编辑值选择器':
                        return (
                          <>
                            {' '}
                            <Item label="可选值" name="Config" labelCol={{ span: 3 }}>
                              <TextArea
                                allowClear
                                style={{ width: '93%' }}
                                placeholder="用英文逗号分隔自定义的值，可编辑，可设置初始值"
                              />
                            </Item>
                          </>
                        );
                      case '平铺值选择器':
                        return (
                          <>
                            {' '}
                            <Item
                              label="可选值"
                              name="Config"
                              labelCol={{ span: 3 }}
                              // rules={[{ required: true, message: '请输入表名' }]}
                            >
                              <TextArea
                                allowClear
                                style={{ width: '93%' }}
                                placeholder="用英文逗号分隔自定义的值，勾选，可设置初始值"
                              />
                            </Item>
                            <Item
                              colon={false}
                              name="check"
                              label="形态功能:"
                              labelCol={{ span: 3 }}
                            >
                              <Radio.Group onChange={onChange2} value={radio} defaultValue={chee}>
                                <Radio value={0}>单选</Radio>
                                <Radio value={1}>多选</Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '图片':
                        // case '可预览图片':
                        return (
                          <Item name="ReadOnly" label="选项" labelCol={{ span: 3 }}>
                            <div>
                              <Checkbox
                                checked={pramData.picture}
                                onChange={e => onChangeReady(e, 'picture')}
                              >
                                允许从相册选取
                              </Checkbox>
                              <Checkbox
                                checked={pramData.must}
                                onChange={e => onChangeReady(e, 'must')}
                              >
                                必填字段
                              </Checkbox>
                            </div>
                          </Item>
                        );
                      case '唯一值文本':
                        return (
                          <Row>
                            <Col span={12}>
                              <Item
                                label="表名"
                                name="tableName"
                                labelCol={{ span: 6 }}
                                rules={[{ required: true, message: '请输入表名' }]}
                              >
                                <Input style={{ width: '95%' }} placeholder="请输入表名" />
                              </Item>
                            </Col>
                            <Col span={12}>
                              <Item
                                label="字段名"
                                name="fieldName"
                                labelCol={{ span: 5 }}
                                rules={[{ required: true, message: '请输入表名' }]}
                              >
                                <Input style={{ width: '85%' }} placeholder="请输入字段名" />
                              </Item>
                            </Col>
                          </Row>
                        );
                      case '业务选择器':
                        return (
                          <>
                            <Row>
                              <Col span={12}>
                                <Item
                                  label="表名"
                                  name="tableName"
                                  labelCol={{ span: 6 }}
                                  rules={[{ required: true, message: '请输入表名' }]}
                                >
                                  <Input style={{ width: '95%' }} placeholder="请输入表名" />
                                </Item>
                              </Col>
                              <Col span={12}>
                                <Item
                                  label="字段名"
                                  name="fieldName"
                                  labelCol={{ span: 5 }}
                                  rules={[{ required: true, message: '请输入表名' }]}
                                >
                                  <Input style={{ width: '85%' }} placeholder="请输入字段名" />
                                </Item>
                              </Col>
                            </Row>
                            <Item
                              colon={false}
                              name="check"
                              label="形态功能:"
                              labelCol={{ span: 3 }}
                            >
                              <Radio.Group onChange={onChange2} value={radio} defaultValue={chee}>
                                <Radio value={0}>单选</Radio>
                                <Radio value={1}>多选</Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '选择器':
                        return (
                          <>
                            <Item
                              label="配置"
                              name="Config"
                              labelCol={{ span: 3 }}
                              // rules={[{ required: true, message: '请输入数据字典名称' }]}
                            >
                              <TextArea
                                allowClear
                                style={{ width: '92%' }}
                                placeholder="请输入数据字典名称"
                              />
                            </Item>
                          </>
                        );
                      case '搜索选择器':
                        return (
                          <>
                            <Item
                              label="数据字典名称"
                              name="Config"
                              labelCol={{ span: 5 }}
                              // rules={[{ required: true, message: '请输入数据字典名称' }]}
                            >
                              <Input
                                allowClear
                                style={{ width: '92%' }}
                                placeholder="请输入数据字典名称"
                              />
                            </Item>
                            <Item
                              colon={false}
                              name="check"
                              label="形态功能:"
                              labelCol={{ span: 3 }}
                            >
                              <Radio.Group onChange={onChange2} value={radio} defaultValue={chee}>
                                <Radio value={0}>单选</Radio>
                                <Radio value={1}>多选</Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '部门选择器':
                        return (
                          <>
                            <Item
                              colon={false}
                              name="check"
                              label="形态功能:"
                              labelCol={{ span: 3 }}
                            >
                              <Radio.Group onChange={onChange2} value={radio} defaultValue={chee}>
                                <Radio value={0}>单选</Radio>
                                <Radio value={1}>多选</Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '站点选择器':
                        return (
                          <Item
                            label="配置"
                            name="Config"
                            labelCol={{ span: 3 }}
                            rules={[{ required: true, message: '选择配置' }]}
                          >
                            <Select
                              placeholder="默认为全局.n即全局多选，.n为多选(全局时勾选由问题)"
                              style={{ width: '93%' }}
                            >
                              <Select.Option value="全局.n">全局(多选)</Select.Option>
                              <Select.Option value="全局">全局</Select.Option>
                              <Select.Option value="本人.n">本人(多选)</Select.Option>
                              <Select.Option value="本人">本人</Select.Option>
                            </Select>
                          </Item>
                        );
                      case '台账选择器':
                        return (
                          <>
                            <Row>
                              <Col span={12}>
                                <Item
                                  label="台账名"
                                  name="standingBook"
                                  labelCol={{ span: 6 }}
                                  rules={[{ required: true, message: '请输入台账名' }]}
                                >
                                  <Input style={{ width: '95%' }} placeholder="请输入台账名" />
                                </Item>
                              </Col>
                              <Col span={12}>
                                <Item
                                  label="字段名"
                                  name="fieldName"
                                  labelCol={{ span: 6 }}
                                  rules={[{ required: true, message: '请输入字段名' }]}
                                >
                                  <Input style={{ width: '85%' }} placeholder="请输入字段名" />
                                </Item>
                              </Col>
                              <Col span={12}>
                                <Item label="台账过滤条件" name="filterName" labelCol={{ span: 9 }}>
                                  <Input style={{ width: '94%' }} placeholder="请输入字段名" />
                                </Item>
                              </Col>
                              <Col span={3}>
                                <span style={{ marginLeft: '25px' }}>=</span>
                              </Col>
                              <Col span={9}>
                                <Item name="filterValue" labelCol={{ span: 5 }}>
                                  <Input style={{ width: '85%' }} placeholder="请输入过滤条件" />
                                </Item>
                              </Col>
                            </Row>
                            <Item
                              colon={false}
                              name="check"
                              label="形态功能:"
                              labelCol={{ span: 3 }}
                            >
                              <Radio.Group onChange={onChange2} value={radio} defaultValue={chee}>
                                <Radio value={0}>单选</Radio>
                                <Radio value={1}>多选</Radio>
                              </Radio.Group>
                            </Item>
                          </>
                        );
                      case '人员选择器':
                        return (
                          <>
                            <Item colon={false} label="全部:" name="All" labelCol={{ span: 3 }}>
                              <Radio.Group onChange={onChange1} value={radio1}>
                                <Radio value="0">否</Radio>
                                <Radio value="全部">是</Radio>
                              </Radio.Group>
                            </Item>
                            {(() => {
                              switch (radio1) {
                                case '全部':
                                  return (
                                    <>
                                      <Item
                                        colon={false}
                                        label="全部ID:"
                                        name="AllID"
                                        labelCol={{ span: 3 }}
                                      >
                                        <Radio.Group onChange={onChange3} value={radio3}>
                                          <Radio value="0">否</Radio>
                                          <Radio value="全部ID">是</Radio>
                                        </Radio.Group>
                                      </Item>
                                      <Item
                                        colon={false}
                                        name="check"
                                        label="形态功能:"
                                        labelCol={{ span: 3 }}
                                      >
                                        <Radio.Group onChange={onChange2} value={radio}>
                                          <Radio value={0}>单选</Radio>
                                          <Radio value={1}>多选</Radio>
                                        </Radio.Group>
                                      </Item>
                                      {/* <Row> */}
                                      {/* <Col span={10}>
                                          <Item
                                            label="配置"
                                            name="Config"
                                            labelCol={{ span: 7 }}
                                            rules={[
                                              { required: true, message: '请输入全部或全部ID' },
                                            ]}
                                          >
                                            <Input
                                              allowClear
                                              style={{ width: '100%' }}
                                              placeholder="请输入输入全部或全部ID"
                                            />
                                          </Item>
                                        </Col> */}
                                      {/* <Col span={1} /> */}
                                      {/* <Col span={18}> */}
                                      <Item
                                        label="角色或机构名称"
                                        name="ConfigName"
                                        labelCol={{ span: 5 }}
                                        rules={[
                                          {
                                            validator: (rule, value) => {
                                              let str = /[.]/g;
                                              if (str.test(form.getFieldValue().ConfigName)) {
                                                return Promise.reject('.作为分隔符,请勿输入');
                                              }
                                              return Promise.resolve();
                                            },
                                          },
                                        ]}
                                      >
                                        <Input
                                          allowClear
                                          style={{ width: '92%' }}
                                          placeholder="请输入角色或机构名称"
                                          onChange={inputOnChange}
                                        />
                                      </Item>
                                      {/* </Col>                                     
                                      </Row> */}

                                      <Item label="配置" name="ShowConfig" labelCol={{ span: 5 }}>
                                        <Input allowClear style={{ width: '92%' }} disabled />
                                      </Item>
                                    </>
                                  );
                                case '0':
                                  return (
                                    <>
                                      <Item
                                        colon={false}
                                        name="check"
                                        label="形态功能:"
                                        labelCol={{ span: 3 }}
                                      >
                                        <Radio.Group onChange={onChange2} value={radio}>
                                          <Radio value={0}>单选</Radio>
                                          <Radio value={1}>多选</Radio>
                                        </Radio.Group>
                                      </Item>
                                      <Item
                                        label="角色或机构或部门名称"
                                        name="Config"
                                        labelCol={{ span: 7 }}
                                        rules={[
                                          {
                                            required: true,
                                            message: '请输入角色或机构或部门名称',
                                          },
                                          {
                                            validator: (rule, value) => {
                                              let str = /[.]/g;
                                              if (str.test(form.getFieldValue().Config)) {
                                                return Promise.reject('.作为分隔符,请勿输入');
                                              }
                                              return Promise.resolve();
                                            },
                                          },
                                        ]}
                                      >
                                        <Input
                                          allowClear
                                          style={{ width: '93%' }}
                                          placeholder="请输入角色或机构或部门名称"
                                          onChange={inputOnchange}
                                        />
                                      </Item>
                                      <Item label="配置" name="ShowConfig" labelCol={{ span: 5 }}>
                                        <Input allowClear style={{ width: '92%' }} disabled />
                                      </Item>
                                    </>
                                  );
                              }
                            })()}
                          </>
                        );
                      // case '日期时间':
                      // case '日期':
                      // case '日期月份':
                      // case '日期年份':
                      // case '日期周':
                      // case '时分秒':
                      //   return (
                      //     <Item label="选项" name="Config" labelCol={{ span: 3 }}>
                      //       <Radio.Group style={{ marginTop: '0.3rem' }}>
                      //         <Radio
                      //           value="默认为空"
                      //           defaultChecked
                      //           style={{ width: '18rem', marginBottom: '0.5rem' }}
                      //         >
                      //           默认为空
                      //         </Radio>
                      //         <Radio value="">默认为当前时间</Radio>
                      //         <Radio value="不可选择" style={{ width: '18rem' }}>
                      //           锁定为当前时间(通过用户点击刷新)
                      //         </Radio>
                      //         <Radio value="不超过当前时间">不超过当前时间</Radio>
                      //       </Radio.Group>
                      //     </Item>
                      //   );
                      // case '坐标控件':
                      //   return (
                      //     <Item label="选项" name="Config" labelCol={{ span: 3 }}>
                      //       <div>
                      //         <Checkbox
                      //           value="当前坐标"
                      //           style={{ marginRight: '0.2rem' }}
                      //           checked={pramData.coordinates}
                      //           onChange={e => onChangeReady(e, 'coordinates')}
                      //         />
                      //         锁定为当前位置坐标
                      //       </div>
                      //     </Item>
                      //   );
                      case '位置坐标':
                        return (
                          <Item label="字段名称" name="Config" labelCol={{ span: 3 }}>
                            <Input
                              allowClear
                              style={{ width: '93%' }}
                              placeholder="请输入坐标位置"
                            />
                          </Item>
                        );
                      case '地址':
                      case '本人部门':
                      case '本人姓名':
                      case '本人ID':
                      case '城市选择器':
                      case '附件':
                      case '可预览附件':
                      case '可预览图片':
                      case '录音':
                      case '视频':
                      case '日期':
                      case '日期时间':
                      case '日期月份':
                      case '日期年份':
                      case '日期周':
                      case '时分秒':
                      case '设备选择':
                      case '坐标控件':
                      case '区域控件':
                      case '路径控件':
                      case '智能抄表':
                        // case '位置坐标':
                        return <></>;
                      default:
                        return (
                          <Item label="配置" name="Config" labelCol={{ span: 3 }}>
                            <TextArea allowClear style={{ width: '93%' }} placeholder={detail} />
                          </Item>
                        );
                    }
                  })()}
                  {/* </div> */}
                  {Shape === '图片' || Shape === '可预览图片' ? (
                    ''
                  ) : (
                    <Item label="预设值" labelCol={{ span: 3 }}>
                      {/* <div className={styles.listEvent}> */}
                      <Row>
                        <Col span={11}>
                          <Input
                            // style={{ width: '41%', height: '1.8rem' }}
                            value={pramData.Preset}
                            onChange={e => handleInput(e, 'Preset')}
                            placeholder=""
                            allowClear
                          />
                        </Col>
                        <Col span={10}>
                          <Item
                            style={{ marginLeft: '1rem' }}
                            label="验证"
                            labelCol={{ span: 5 }}
                            name="ValidationRule"
                          >
                            <Input style={{ width: '92%' }} placeholder="" allowClear />
                          </Item>
                        </Col>
                        <Col span={3}>
                          <Tooltip title="选择验证规则">
                            <PlusSquareOutlined
                              onClick={() => {
                                add('rule');
                              }}
                              style={{
                                fontSize: '24px',
                                color: '#1890FF',
                                marginTop: '8px',
                              }}
                            />
                          </Tooltip>
                        </Col>
                      </Row>
                    </Item>
                  )}
                  {/* <Item label="异常值">
              <div className={styles.listEvent}>
                <Input
                  style={{ width: '40%', height: '1.8rem' }}
                  value={pramData.ExceptionValue}
                  onChange={e => handleInput(e, 'ExceptionValue')}
                  placeholder=""
                  allowClear
                />
                <Item
                  style={{ marginLeft: '1rem' }}
                  label="触发事件"
                  name="ExceptionEvent"
                  style={{ margin: '0 0 0 1rem' }}
                >
                  <Select style={{ width: '12rem' }} onChange={handleEvent}>
                    {eventList.length
                      ? eventList.map((item, index) => {
                          return (
                            <Select.Option
                              key={index}
                              tablename={item.TableName}
                              name={item.Name}
                              value={item.ID}
                            >
                              {item.Name}
                            </Select.Option>
                          );
                        })
                      : ''}
                  </Select>
                </Item>
              </div>
            </Item>
            <Item label="字段集">
              <div className={styles.listEvent}>
                <Input
                  style={{ width: '93%' }}
                  placeholder=""
                  disabled={!isShow}
                  onChange={onCharacterValue}
                  allowClear
                  value={characterValue}
                />
                <Tooltip title={!isShow ? '' : '字符集选择'}>
                  <PlusSquareOutlined
                    onClick={() => (!isShow ? '' : add('characteristics'))}
                    style={{
                      fontSize: '24px',
                      color: !isShow ? 'gray' : '#1890FF',
                      cursor: !isShow ? 'no-drop' : 'pointer',
                      display: 'flex',
                      alignItems: 'center',
                      marginLeft: '0.5rem',
                    }}
                  />
                </Tooltip>
              </div>
            </Item> */}
                </Form>
              )}
              {/* <ChangeAdd
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onOK}
          newCheckedList={checkedList}
          isType={type}
          filed={filed}
          characterValue={characterValue}
          formObj={formObj}
        /> */}
              <VerifyModal
                visible={visible}
                onCancel={() => setVisible(false)}
                callBackSubmit={onOK}
                newCheckedList={checkedList}
                isType={type}
                filed={filed}
                characterValue={characterValue}
                formObj={formObj}
              />
            </div>
          ) : (
            <div style={{ margin: '0 auto' }}>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中字段" />
            </div>
          )}
        </div>
      </Drawer>
    </>
  );
};
export default AddModal;
