/* 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,
} from 'antd';

import {
  getField,
  loadTableFields,
  LoadEventFields,
  LoadEventType,
  UpdateFields,
} from '@/services/tablemanager/tablemanager';
import styles from './index.less';
import ChangeAdd from './changeAdd';
import VerifyModal from './VerifyModal';
import { PlusSquareOutlined, UnorderedListOutlined, FontColorsOutlined } from '@ant-design/icons';
import Tree from '@/components/ExpendableTree';
import { shape } from 'prop-types';
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 [characteristics, setCharacteristics] = useState([
    '文本',
    '数值',
    '唯一值文本',
    '多行文本',
    '编码',
    '地址',
    '本人部门',
    '本人姓名',
    '本人ID',
    '选择器',
    '搜索选择器',
    '值选择器',
    '值复选器',
    '业务选择器',
    '可编辑值选择器',
    '平铺值选择器',
    '站点选择器',
    '人员选择器',
    '人员选择器新',
    '城市选择器',
    '台账选择器',
    '附件',
    '可预览附件',
    '图片',
    '可预览图片',
    '录音',
    '视频',
    '日期时间',
    '日期',
    '日期月份',
    '日期年份',
    '日期周',
    '时分秒',
    '设备选择',
    '坐标控件',
    '区域控件',
    '路径控件',
    '智能抄表',
    '二维码识别',
    '设备二维码',
    '位置坐标',
  ]);
  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 { TextArea } = Input;
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  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,
            },
          ];

          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;
            default:
              data[0].Config = obj.Config;
          }
          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(() => {
    console.log(isVisible);
    if (keepTreeFirst.indexOf(itemData.name) != -1) {
      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);
          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;
          }
          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 (pramData.RowSpan) {
              form.setFieldsValue({ RowSpan: res[0].data.root.RowSpan });
            }
            form.setFieldsValue({ RowSpan: 1 });
          }
          console.log(pramData);
          // 清空表单数据
          if (isVisible == false) {
            console.log(123);
            setPramData([]);
            form.resetFields();
          }
          let index = res[2].data.root.find(item => {
            return item.Name == res[0].data.root.ExceptionEvent;
          });
          console.log(index);
          getFieldData(index.TableName);
        }
      });
    }
  }, [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 = type => {
    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(type);
    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 => {
    console.log(value);
    if (
      value == '多行文本' ||
      value == '附件' ||
      value == '可预览附件' ||
      value == '图片' ||
      value == '可预览图片' ||
      value == '录音' ||
      value == '视频'
    ) {
      form.setFieldsValue({ RowSpan: 6 });
    } 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) {
      console.log(111);
      setShow('none');
    } else {
      console.log(222);
      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) {
        console.log(34353535);
        let aa = valueData.find(i => i.ID == e.node.org.ID);
        console.log(aa);
        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);
            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;
            }
            console.log(aa);
            setPramData({ ...aa, coordinates, must, picture });
            let index = res[2].data.root.find(item => {
              return item.Name == aa.ExceptionEvent;
            });
            console.log('index', index);
            getFieldData(index.TableName);
          }
        });
      } else {
        console.log(1212122);
        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;
            }
            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;
          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]);
          }
        }
        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,
              });
            }
          });
        }
      }
    });
  };
  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}>
                          <Select
                            style={{ width: '95%' }}
                            value={Shape}
                            onChange={handleCharacteristics}
                            showSearch
                          >
                            {characteristics.length
                              ? characteristics.map((item, index) => {
                                  return (
                                    <Select.Option key={index} value={item}>
                                      {item}
                                    </Select.Option>
                                  );
                                })
                              : ''}
                          </Select>
                          {/* <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>
                  {(() => {
                    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 '值复选器':
                      case '可编辑值选择器':
                      case '平铺值选择器':
                        return (
                          <>
                            {' '}
                            <Item label="可选值" name="Config" labelCol={{ span: 3 }}>
                              <TextArea allowClear style={{ width: '93%' }} />
                            </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 '图片':
                      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 '日期时间':
                      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>
                        );
                      default:
                        return (
                          <Item label="配置" name="Config" labelCol={{ span: 3 }}>
                            <TextArea allowClear style={{ width: '93%' }} />
                          </Item>
                        );
                    }
                  })()}
                  {Shape === '图片' || Shape === '可预览图片' ? (
                    ''
                  ) : (
                    <Item label="预设值" labelCol={{ span: 3 }}>
                      <div className={styles.listEvent}>
                        <Input
                          style={{ width: '42%', height: '1.8rem' }}
                          value={pramData.Preset}
                          onChange={e => handleInput(e, 'Preset')}
                          placeholder=""
                          allowClear
                        />
                        <Item
                          style={{ marginLeft: '1rem' }}
                          label="验证"
                          labelCol={{ span: 4 }}
                          name="ValidationRule"
                          style={{ margin: '0 0 0 1rem' }}
                        >
                          <Input style={{ width: '97%' }} placeholder="" allowClear />
                        </Item>
                        <Tooltip title="选择验证规则">
                          <PlusSquareOutlined
                            onClick={() => add('rule')}
                            style={{
                              fontSize: '24px',
                              color: '#1890FF',
                              display: 'flex',
                              alignItems: 'center',
                            }}
                          />
                        </Tooltip>
                      </div>
                    </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;
