/* eslint-disable react/jsx-boolean-value */
/* eslint-disable indent */
/* eslint-disable prettier/prettier */
/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable block-scoped-var */
/* eslint-disable no-var */
/* eslint-disable vars-on-top */
/* eslint-disable no-plusplus */
/* eslint-disable no-array-constructor */
/* eslint-disable prefer-destructuring */
/* eslint-disable array-callback-return */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable spaced-comment */
/* eslint-disable no-shadow */
/* eslint-disable no-unused-expressions */
/* eslint-disable eqeqeq */
/* eslint-disable camelcase */
/* eslint-disable import/no-unresolved */
/* eslint-disable no-dupe-keys */
import React, { useEffect, useState } from 'react';
import {
  Modal,
  Drawer,
  Form,
  Input,
  notification,
  Space,
  Row,
  Col,
  Select,
  Checkbox,
  Radio,
  Dropdown,
  Menu,
  Button,
  Tooltip,
  Upload,
  Image,
  Switch,
  message,
  Spin,
} from 'antd';
import {
  GetCM_Event_LoadEventTypeTable,
  LoadEventFields,
  CM_Event_LoadDepartmentAndRoles,
  CM_Event_EditEventTable,
  GetCM_Event_QueryEventType,
  CM_Event_AddEventTable,
  GetCM_Event_LoadEvenFlows,
} from '@/services/standingBook/api';
import {
  PlusOutlined,
  DownOutlined,
  InfoCircleOutlined,
  DeleteOutlined,
  PictureOutlined,
} from '@ant-design/icons';
import styles from './incident.less';
import ChangeAdd from './changeAdd';
import ChangeEdit from './changeEdit';
import RMSComponents from '@/components/RolePmSite/index';
import PreviewModal from './PreviewModal';
import EditTypeModal from './EditTypeModal';
import eventImg from '@/assets/images/workOptions/事件.png';
import caseImg from '@/assets/images/workOptions/工单.png';
import caseChooseImg from '@/assets/images/workOptions/工单发起选中.png';
import eventChooseImg from '@/assets/images/workOptions/事件选中.png';

const { Option } = Select;
const AddModal = props => {
  const {
    callBackSubmit = () => {},
    visible,
    type,
    formObj,
    treeData,
    maxLength,
    selectData,
    rember1,
  } = props;
  const [strChineseFirstPY, setStrChineseFirstPY] = useState(
    ' ',
  );
  const [oMultiDiff, setOMultiDiff] = useState({
    '19969': 'DZ',
    '19975': 'WM',
    '19988': 'QJ',
    '20048': 'YL',
    '20056': 'SC',
    '20060': 'NM',
    '20094': 'QG',
    '20127': 'QJ',
    '20167': 'QC',
    '20193': 'YG',
    '20250': 'KH',
    '20256': 'ZC',
    '20282': 'SC',
    '20285': 'QJG',
    '20291': 'TD',
    '20314': 'YD',
    '20340': 'NE',
    '20375': 'TD',
    '20389': 'YJ',
    '20391': 'CZ',
    '20415': 'PB',
    '20446': 'YS',
    '20447': 'SQ',
    '20504': 'TC',
    '20608': 'KG',
    '20854': 'QJ',
    '20857': 'ZC',
    '20911': 'PF',
    '20504': 'TC',
    '20608': 'KG',
    '20854': 'QJ',
    '20857': 'ZC',
    '20911': 'PF',
    '20985': 'AW',
    '21032': 'PB',
    '21048': 'XQ',
    '21049': 'SC',
    '21089': 'YS',
    '21119': 'JC',
    '21242': 'SB',
    '21273': 'SC',
    '21305': 'YP',
    '21306': 'QO',
    '21330': 'ZC',
    '21333': 'SDC',
    '21345': 'QK',
    '21378': 'CA',
    '21397': 'SC',
    '21414': 'XS',
    '21442': 'SC',
    '21477': 'JG',
    '21480': 'TD',
    '21484': 'ZS',
    '21494': 'YX',
    '21505': 'YX',
    '21512': 'HG',
    '21523': 'XH',
    '21537': 'PB',
    '21542': 'PF',
    '21549': 'KH',
    '21571': 'E',
    '21574': 'DA',
    '21588': 'TD',
    '21589': 'O',
    '21618': 'ZC',
    '21621': 'KHA',
    '21632': 'ZJ',
    '21654': 'KG',
    '21679': 'LKG',
    '21683': 'KH',
    '21710': 'A',
    '21719': 'YH',
    '21734': 'WOE',
    '21769': 'A',
    '21780': 'WN',
    '21804': 'XH',
    '21834': 'A',
    '21899': 'ZD',
    '21903': 'RN',
    '21908': 'WO',
    '21939': 'ZC',
    '21956': 'SA',
    '21964': 'YA',
    '21970': 'TD',
    '22003': 'A',
    '22031': 'JG',
    '22040': 'XS',
    '22060': 'ZC',
    '22066': 'ZC',
    '22079': 'MH',
    '22129': 'XJ',
    '22179': 'XA',
    '22237': 'NJ',
    '22244': 'TD',
    '22280': 'JQ',
    '22300': 'YH',
    '22313': 'XW',
    '22331': 'YQ',
    '22343': 'YJ',
    '22351': 'PH',
    '22395': 'DC',
    '22412': 'TD',
    '22484': 'PB',
    '22500': 'PB',
    '22534': 'ZD',
    '22549': 'DH',
    '22561': 'PB',
    '22612': 'TD',
    '22771': 'KQ',
    '22831': 'HB',
    '22841': 'JG',
    '22855': 'QJ',
    '22865': 'XQ',
    '23013': 'ML',
    '23081': 'WM',
    '23487': 'SX',
    '23558': 'QJ',
    '23561': 'YW',
    '23586': 'YW',
    '23614': 'YW',
    '23615': 'SN',
    '23631': 'PB',
    '23646': 'ZS',
    '23663': 'ZT',
    '23673': 'YG',
    '23762': 'TD',
    '23769': 'ZS',
    '23780': 'QJ',
    '23884': 'QK',
    '24055': 'XH',
    '24113': 'DC',
    '24162': 'ZC',
    '24191': 'GA',
    '24273': 'QJ',
    '24324': 'NL',
    '24377': 'TD',
    '24378': 'QJ',
    '24439': 'PF',
    '24554': 'ZS',
    '24683': 'TD',
    '24694': 'WE',
    '24733': 'LK',
    '24925': 'TN',
    '25094': 'ZG',
    '25100': 'XQ',
    '25103': 'XH',
    '25153': 'PB',
    '25170': 'PB',
    '25179': 'KG',
    '25203': 'PB',
    '25240': 'ZS',
    '25282': 'FB',
    '25303': 'NA',
    '25324': 'KG',
    '25341': 'ZY',
    '25373': 'WZ',
    '25375': 'XJ',
    '25384': 'A',
    '25457': 'A',
    '25528': 'SD',
    '25530': 'SC',
    '25552': 'TD',
    '25774': 'ZC',
    '25874': 'ZC',
    '26044': 'YW',
    '26080': 'WM',
    '26292': 'PB',
    '26333': 'PB',
    '26355': 'ZY',
    '26366': 'CZ',
    '26397': 'ZC',
    '26399': 'QJ',
    '26415': 'ZS',
    '26451': 'SB',
    '26526': 'ZC',
    '26552': 'JG',
    '26561': 'TD',
    '26588': 'JG',
    '26597': 'CZ',
    '26629': 'ZS',
    '26638': 'YL',
    '26646': 'XQ',
    '26653': 'KG',
    '26657': 'XJ',
    '26727': 'HG',
    '26894': 'ZC',
    '26937': 'ZS',
    '26946': 'ZC',
    '26999': 'KJ',
    '27099': 'KJ',
    '27449': 'YQ',
    '27481': 'XS',
    '27542': 'ZS',
    '27663': 'ZS',
    '27748': 'TS',
    '27784': 'SC',
    '27788': 'ZD',
    '27795': 'TD',
    '27812': 'O',
    '27850': 'PB',
    '27852': 'MB',
    '27895': 'SL',
    '27898': 'PL',
    '27973': 'QJ',
    '27981': 'KH',
    '27986': 'HX',
    '27994': 'XJ',
    '28044': 'YC',
    '28065': 'WG',
    '28177': 'SM',
    '28267': 'QJ',
    '28291': 'KH',
    '28337': 'ZQ',
    '28463': 'TL',
    '28548': 'DC',
    '28601': 'TD',
    '28689': 'PB',
    '28805': 'JG',
    '28820': 'QG',
    '28846': 'PB',
    '28952': 'TD',
    '28975': 'ZC',
    '29100': 'A',
    '29325': 'QJ',
    '29575': 'SL',
    '29602': 'FB',
    '30010': 'TD',
    '30044': 'CX',
    '30058': 'PF',
    '30091': 'YSP',
    '30111': 'YN',
    '30229': 'XJ',
    '30427': 'SC',
    '30465': 'SX',
    '30631': 'YQ',
    '30655': 'QJ',
    '30684': 'QJG',
    '30707': 'SD',
    '30729': 'XH',
    '30796': 'LG',
    '30917': 'PB',
    '31074': 'NM',
    '31085': 'JZ',
    '31109': 'SC',
    '31181': 'ZC',
    '31192': 'MLB',
    '31293': 'JQ',
    '31400': 'YX',
    '31584': 'YJ',
    '31896': 'ZN',
    '31909': 'ZY',
    '31995': 'XJ',
    '32321': 'PF',
    '32327': 'ZY',
    '32418': 'HG',
    '32420': 'XQ',
    '32421': 'HG',
    '32438': 'LG',
    '32473': 'GJ',
    '32488': 'TD',
    '32521': 'QJ',
    '32527': 'PB',
    '32562': 'ZSQ',
    '32564': 'JZ',
    '32735': 'ZD',
    '32793': 'PB',
    '33071': 'PF',
    '33098': 'XL',
    '33100': 'YA',
    '33152': 'PB',
    '33261': 'CX',
    '33324': 'BP',
    '33333': 'TD',
    '33406': 'YA',
    '33426': 'WM',
    '33432': 'PB',
    '33445': 'JG',
    '33486': 'ZN',
    '33493': 'TS',
    '33507': 'QJ',
    '33540': 'QJ',
    '33544': 'ZC',
    '33564': 'XQ',
    '33617': 'YT',
    '33632': 'QJ',
    '33636': 'XH',
    '33637': 'YX',
    '33694': 'WG',
    '33705': 'PF',
    '33728': 'YW',
    '33882': 'SR',
    '34067': 'WM',
    '34074': 'YW',
    '34121': 'QJ',
    '34255': 'ZC',
    '34259': 'XL',
    '34425': 'JH',
    '34430': 'XH',
    '34485': 'KH',
    '34503': 'YS',
    '34532': 'HG',
    '34552': 'XS',
    '34558': 'YE',
    '34593': 'ZL',
    '34660': 'YQ',
    '34892': 'XH',
    '34928': 'SC',
    '34999': 'QJ',
    '35048': 'PB',
    '35059': 'SC',
    '35098': 'ZC',
    '35203': 'TQ',
    '35265': 'JX',
    '35299': 'JX',
    '35782': 'SZ',
    '35828': 'YS',
    '35830': 'E',
    '35843': 'TD',
    '35895': 'YG',
    '35977': 'MH',
    '36158': 'JG',
    '36228': 'QJ',
    '36426': 'XQ',
    '36466': 'DC',
    '36710': 'JC',
    '36711': 'ZYG',
    '36767': 'PB',
    '36866': 'SK',
    '36951': 'YW',
    '37034': 'YX',
    '37063': 'XH',
    '37218': 'ZC',
    '37325': 'ZC',
    '38063': 'PB',
    '38079': 'TD',
    '38085': 'QY',
    '38107': 'DC',
    '38116': 'TD',
    '38123': 'YD',
    '38224': 'HG',
    '38241': 'XTC',
    '38271': 'ZC',
    '38415': 'YE',
    '38426': 'KH',
    '38461': 'YD',
    '38463': 'AE',
    '38466': 'PB',
    '38477': 'XJ',
    '38518': 'YT',
    '38551': 'WK',
    '38585': 'ZC',
    '38704': 'XS',
    '38739': 'LJ',
    '38761': 'GJ',
    '38808': 'SQ',
    '39048': 'JG',
    '39049': 'XJ',
    '39052': 'HG',
    '39076': 'CZ',
    '39271': 'XT',
    '39534': 'TD',
    '39552': 'TD',
    '39584': 'PB',
    '39647': 'SB',
    '39730': 'LG',
    '39748': 'TPB',
    '40109': 'ZQ',
    '40479': 'ND',
    '40516': 'HG',
    '40536': 'HG',
    '40583': 'QJ',
    '40765': 'YQ',
    '40784': 'QJ',
    '40840': 'YK',
    '40863': 'QJG',
  });
  const [checkedList1, setCheckedList1] = useState([]);
  const [nu, setNu] = useState([]);
  const [nu1, setNu1] = useState([]);
  const [editable, setEditable] = useState(false);
  const [ReportFromMobile, setReportFromMobile] = useState(false);
  const [ReportFromWeb, setReportFromWeb] = useState(false);
  const [chee, setChee] = useState('');
  const [pickItem, setPickItem] = useState('');
  const [prefixName, setPrefixName] = useState('');
  const [selectValue, setSelectValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [modalLoading, setModalLoading] = useState(true);
  const [standingTable, setStandingTable] = useState([]);
  const [filed, setFiled] = useState({}); // 传给子组件列表数据
  const [filed1, setFiled1] = useState({}); // 传给子组件列表数据
  const [flag, setFlag] = useState(0);
  const [value, setValue] = useState(''); // 单选
  const [Order, setOrder] = useState(''); // 弹窗类型
  const [Type1, setType1] = useState('');
  const [isVisible, setIsVisible] = useState(false); // 事件权限弹窗
  const [isVisibleEdit, setIsVisibleEdit] = useState(false); // 字段弹框
  const [form] = Form.useForm();
  const [summaryIsShow, setSummaryIsShow] = useState('none'); // 摘要字段外部字段是否显示
  const [reportIsShow, setReportIsShow] = useState('none'); // 上报字段外部字段是否显示
  const [displayIsShow, setDisplayIsShow] = useState('none'); // 显示字段外部字段是否显示
  const [editableIsShow, setEditableIsShow] = useState('none'); // 编辑字段外部字段是否显示
  const [transitIsShow, setTransitIsShow] = useState('none'); // 转单字段外部字段是否显示
  const [relatedEventIsShow, setRelatedEventIsShow] = useState('none'); // 关联字段外部字段是否显示
  const [summaryValue, setSummaryValue] = useState(); // 保存摘要字段外部字段
  const [reportValue, setReportValue] = useState(); // 保存上报字段外部字段
  const [displayValue, setDisplayValue] = useState(); // 保存显示字段外部字段
  const [editableValue, setEditableValue] = useState(); // 保存编辑字段外部字段
  const [displayColumns, setDisplayColumns] = useState(); // 保存显示列字段外部字段
  const [relatedEventValue, setRelatedEventValue] = useState(); // 保存关联字段外部字段
  const [groupName, setGroupName] = useState('角色');
  const [chooseGroupName, setChooseGroupName] = useState(['角色', '部门', '站点']);
  const [keepFiled, setKeepFiled] = useState([]);
  const { Item } = Form;
  const [imageUrl, setImageUrl] = useState();
  const [keepImgeUrl, setKeepImgeUrl] = useState('');
  const [im, setIm] = useState();
  const [previewModal, setPreviewModal] = useState(false);
  const [editTypeModal, setEditTypeModal] = useState(false);
  const [flowTableData, setFlowTableData] = useState([]);
  const [eventFlowId, setEventFlowId] = useState(0);
  const [show, setShow] = useState('hidden');
  const [visibleChecked, setVisibleChecked] = useState(true);
  const [initWay, setInitWay] = useState(); // 初始上报方式
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        obj.Code = obj.Code.toString();
        if (obj.BusinessType === undefined) {
          obj.BusinessType = rember1;
        }
        if (obj.TableName === undefined) {
          obj.TableName = selectValue;
        }
        if (obj.CreateMode === undefined) {
          obj.CreateMode = 1;
        }
        // eslint-disable-next-line no-constant-condition
        if (obj.CreateMode === 0 || 1) {
          obj.CreateMode = obj.CreateMode.toString();
        }
        obj.CreateMode = value;
        if (editable != true) {
          obj.Editable = false;
        } else {
          obj.Editable = editable;
        }
        if (ReportFromWeb === true && ReportFromMobile === true) {
          // obj.Reportable = '均可';
          obj.ReportFromMobile = '手持';
          obj.ReportFromWeb = '前端';
        } else if (ReportFromWeb === true) {
          // obj.Reportable = '前端';
          obj.ReportFromMobile = '';
          obj.ReportFromWeb = '前端';
        } else if (ReportFromMobile === true) {
          // obj.Reportable = '手持';
          obj.ReportFromMobile = '手持';
          obj.ReportFromWeb = '';
        } else {
          // obj.Reportable = '否';
          obj.ReportFromMobile = '';
          obj.ReportFromWeb = '';
        }
        if (visibleChecked) {
          obj.Reportable = true;
        } else {
          obj.Reportable = false;
        }
        // if ((obj.Roles == '' || obj.Roles == undefined) && obj.CreateMode === '0' ) {
        if ((obj.Roles == '' || obj.Roles == undefined) && value === 0) {
          console.log(obj.CreateMode);
          notification.warning({
            message: '提示',
            description: '事件权限必填',
          });
        } else {
          if (type == 'edit') {
            CM_Event_EditEventTable({
              ID: formObj.ID,
              ...obj,
              Order,
              EventFlowId: eventFlowId,
            }).then(res => {
              setLoading(false);
              if (res.msg === 'Ok') {
                form.resetFields();
                setValue('');
                callBackSubmit();
                setChee('');
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: '编辑成功',
                });
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
            setFlag(0);
          }
          if (type == 'add') {
            if (obj.DisplayColumns == undefined) {
              obj.DisplayColumns = '';
            }
            if (obj.Roles == undefined) {
              obj.Roles = '';
            }
            CM_Event_AddEventTable({ ...obj, Order: maxLength }).then(res => {
              setLoading(false);
              if (res.msg === 'Ok') {
                form.resetFields();
                setValue('');
                setChee('');
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: '新增成功',
                });
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
            setFlag(0);
          }
        }
      }
    });
  };

  useEffect(() => {
    setValue('');
    setModalLoading(true)
    // 关闭时不会调用
    if (visible) {
      getRole();
      if (type === 'add') {
        setType1(rember1);
        form.setFieldsValue({ BusinessType: rember1 });
        setReportFromWeb(true);
        setChee(1);
        setValue(1);
        getEventData();
        setSelectValue(selectData[0]);
        setFiled({});
        setFiled1({});
        form.resetFields();
        setEditable(false);
        setReportFromMobile(true);
        form.setFieldsValue({
          ImageExpression: 'assets/images/caseCenter/events/通用问题1.png',
        });
        setImageUrl(
          `${window.location.origin}/civweb4/assets/images/caseCenter/events/通用问题1.png`,
        );
        setIm('assets/images/caseCenter/events/通用问题1.png');
        setModalLoading(false)
      } else if (type === 'edit') {
        setChee();
        getEventData1();
        GetCM_Event_QueryEventType({ eventTypeId: formObj.ID }).then(res => {
          if (res.data.root) {
            setEditable(res.data.root.Editable);
            setInitWay(res.data.root.CreateMode);
            setValue(res.data.root.CreateMode);
            setReportFromMobile(res.data.root.ReportFromMobile);
            setReportFromWeb(res.data.root.ReportFromWeb);
            if (res.data.root.Reportable === false) {
              setVisibleChecked(false);
            } else {
              setVisibleChecked(true);
            }
            setType1(res.data.root.BusinessType);
            setOrder(res.data.root.Order);
            form.setFieldsValue({ ...res.data.root });
            if (res.data.root.ImageExpression) {
              setImageUrl(`${window.location.origin}/civweb4/${res.data.root.ImageExpression}`);
              setIm(res.data.root.ImageExpression);
            } else {
              form.setFieldsValue({
                ImageExpression: 'assets/images/caseCenter/events/通用问题1.png',
              });
              setImageUrl(
                `${window.location.origin}/civweb4/assets/images/caseCenter/events/通用问题1.png`,
              );
              setIm('assets/images/caseCenter/events/通用问题1.png');
            }
            LoadEventFields({
              eventTableName: res.data.root.TableName,
              distinctFields: '',
            }).then(res => {
              if (res.data.root) {
                setNu(res.data.root);
                setFiled(formateArrDataA(res.data.root, 'group'));
                setModalLoading(false)
              }
            });
            // 外部字段逻辑处理
            setSummaryValue(res.data.root.outSummaryFields);
            if (res.data.root.outSummaryFields != 0) {
              setSummaryIsShow('inline');
            } else {
              setSummaryIsShow('none');
            }
            setReportValue(res.data.root.outReportFields);
            if (res.data.root.outReportFields != 0) {
              setReportIsShow('inline');
            } else {
              setReportIsShow('none');
            }
            setDisplayValue(res.data.root.outDisplayFields);
            if (res.data.root.outDisplayFields != 0) {
              setDisplayIsShow('inline');
            } else {
              setDisplayIsShow('none');
            }
            setEditableValue(res.data.root.outEditableFields);
            if (res.data.root.outEditableFields != 0) {
              setEditableIsShow('inline');
            } else {
              setEditableIsShow('none');
            }
            setDisplayColumns(res.data.root.outDisplayColumns);
            if (res.data.root.outDisplayColumns != 0) {
              setTransitIsShow('inline');
            } else {
              setTransitIsShow('none');
            }
            setRelatedEventValue(res.data.root.outRelatedEventFields);
            if (res.data.root.outRelatedEventFields != 0) {
              setRelatedEventIsShow('inline');
            } else {
              setRelatedEventIsShow('none');
            }
          }
          // setModalLoading(false)
        });
      }
      setFlag(0);
    } else if (type == 'edit' || type == 'add') {
      setInitWay(null);
      setEditable(false);
      setReportFromMobile(false);
      setReportFromWeb(false);
      form.resetFields();
      setImageUrl('');
      setIm('');
      setKeepImgeUrl('');
      setValue('');
      setChee('');
      setSummaryIsShow('none');
      setReportIsShow('none');
      setDisplayIsShow('none');
      setEditableIsShow('none');
      setTransitIsShow('none');
      setRelatedEventIsShow('none');
    }
  }, [visible]);

  const getRole = () => {
    CM_Event_LoadDepartmentAndRoles().then(res => {
      if (res.msg === 'Ok') {
        setNu1(res.data);
        // setFiled1(formateArrDataA1(res.data, 'groupType'));
        setKeepFiled(groupArr(res.data, 'groupType'));
      }
    });
  };

  const getEventData = () => {
    GetCM_Event_LoadEventTypeTable().then(res => {
      if (res.msg === 'Ok') {
        setStandingTable(res.data);
        let arr = [];
        res.data.map((item, index) => {
          arr.push(item.text);
        });
        // setSelectValue(arr[0])
        // changTable(arr[0])
      }
    });
  };

  const getEventData1 = () => {
    setType1('');
    GetCM_Event_LoadEventTypeTable().then(res => {
      if (res.msg === 'Ok') {
        setStandingTable(res.data);
      }
    });
  };

  const changTable = value => {
    setFlag(flag + 1);
    LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
      if (res.data.root) {
        setNu(res.data.root);
        console.log(res.data.root);
        setFiled(formateArrDataA(res.data.root, 'group'));
        ExternalSummaryField(res.data.root);
        ExternalReportField(res.data.root);
        ExternalDisplayField(res.data.root);
        ExternalEditableField(res.data.root);
        ExternalTransitField(res.data.root);
        ExternalRelatedEventField(res.data.root);
      }
    });
  };

  // 摘要字段外部字段
  const ExternalSummaryField = e => {
    if (form.getFieldValue().SummaryFields) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().SummaryFields.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setSummaryValue(a.length);
      if (a.length != 0) {
        setSummaryIsShow('inline');
      } else {
        setSummaryIsShow('none');
      }
    } else {
      setSummaryIsShow('none');
    }
  };
  // 上报字段外部字段
  const ExternalReportField = e => {
    if (form.getFieldValue().ReportFields) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().ReportFields.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setReportValue(a.length);
      if (a.length != 0) {
        setReportIsShow('inline');
      } else {
        setReportIsShow('none');
      }
    } else {
      setReportIsShow('none');
    }
  };
  // 显示字段外部字段
  const ExternalDisplayField = e => {
    if (form.getFieldValue().DisplayFields) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().DisplayFields.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setDisplayValue(a.length);
      if (a.length != 0) {
        setDisplayIsShow('inline');
      } else {
        setDisplayIsShow('none');
      }
    } else {
      setDisplayIsShow('none');
    }
  };
  // 编辑字段外部字段
  const ExternalEditableField = e => {
    if (form.getFieldValue().EditableFields) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().EditableFields.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setEditableValue(a.length);
      if (a.length != 0) {
        setEditableIsShow('inline');
      } else {
        setEditableIsShow('none');
      }
    } else {
      setEditableIsShow('none');
    }
  };
  // 显示列字段外部字段
  const ExternalTransitField = e => {
    if (form.getFieldValue().DisplayColumns) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().DisplayColumns.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setDisplayColumns(a.length);
      if (a.length != 0) {
        setTransitIsShow('inline');
      } else {
        setTransitIsShow('none');
      }
    } else {
      setTransitIsShow('none');
    }
  };
  // 关联字段外部字段
  const ExternalRelatedEventField = e => {
    if (form.getFieldValue().RelatedEventFields) {
      let pp = formateArrDataA(e, 'group');
      let ab = form.getFieldValue().RelatedEventFields.split(',');
      let arr = Object.keys(pp);
      let b = [];
      let a = [];
      arr.map((item, index) => {
        pp[item].map((i, j) => {
          b.push(i);
        });
      });
      ab.map((item, index) => {
        if (b.includes(item) == false) {
          if (item == '') {
            a = [];
          } else {
            a.push(item);
          }
        }
      });
      setRelatedEventValue(a.length);
      if (a.length != 0) {
        setRelatedEventIsShow('inline');
      } else {
        setRelatedEventIsShow('none');
      }
    } else {
      setRelatedEventIsShow('none');
    }
  };

  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}`]);
      }
    }
    console.log(nameArr);
    console.log(initialArr);
    //新建一个包含多个list的结果对象
    let tempObj = {};
    let aa = [];
    // 根据不同的"name"生成多个数组
    // eslint-disable-next-line guard-for-in
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          if (initialArr[j].isDefaultField == false) {
            tempObj[nameArr[k]].push(initialArr[j]);
          } else {
            aa.push(initialArr[j].fieldName);
          }
        }
      }
    }

    console.log(aa);
    // tempObj.内置字段 = aa;
    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.fieldName);
      });
    }
    if (aa.length > 0) {
      tempObj.内置字段 = [...aa];
    }
    let list = {};
    Object.keys(tempObj).forEach(i => {
      console.log(i);
      if (tempObj[i].length > 0) {
        console.log(tempObj[i]);
        list[i] = [...tempObj[i]];
      }
    });
    console.log(list);
    return list;
  };

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

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

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

  const onChange1 = e => {
    setEditable(e.target.checked);
  };
  const onChange2 = e => {
    if (e === 1 && initWay === 0) {
      // message.warning('事件模型切换为工单模型流程会清空，请谨慎修改');
      GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
        if (res.msg === 'Ok') {
          if (res.data.length && res.data.length === 1) {
            setEventFlowId(res.data[0].ID);
          } else {
            setEventFlowId(0);
            setFlowTableData(res.data);
            setEditTypeModal(true);
          }
        }
      });
    }
    setValue(e);
  };
  const onChange3 = e => {
    setReportFromWeb(e.target.checked);
  };
  const onChange4 = e => {
    setReportFromMobile(e.target.checked);
  };
  const onOK = prop => {
    setIsVisible(false);
    let inputText = {};
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
  };
  const onOK1 = prop => {
    setIsVisibleEdit(false);
    let inputText = {};
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
    // 外部字段提示
    if (prop.pickItem == 'SummaryFields') {
      setSummaryValue(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setSummaryIsShow('inline');
      } else {
        setSummaryIsShow('none');
      }
    }
    if (prop.pickItem == 'ReportFields') {
      setReportValue(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setReportIsShow('inline');
      } else {
        setReportIsShow('none');
      }
    }
    if (prop.pickItem == 'DisplayFields') {
      setDisplayValue(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setDisplayIsShow('inline');
      } else {
        setDisplayIsShow('none');
      }
    }
    if (prop.pickItem == 'EditableFields') {
      setEditableValue(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setEditableIsShow('inline');
      } else {
        setEditableIsShow('none');
      }
    }
    if (prop.pickItem == 'DisplayColumns') {
      setDisplayColumns(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setTransitIsShow('inline');
      } else {
        setTransitIsShow('none');
      }
    }
    if (prop.pickItem == 'RelatedEventFields') {
      setRelatedEventValue(prop.valueArr.length);
      if (prop.valueArr.length != 0) {
        setRelatedEventIsShow('inline');
      } else {
        setRelatedEventIsShow('none');
      }
    }
  };

  const chooseFlowOk = prop => {
    setEventFlowId(prop);
    setEditTypeModal(false);
  };

  const pickFiled = fileds => {
    if (form.getFieldsValue().TableName) {
      setFlag(flag + 1);
      let pp = formateArrDataA(nu, 'group');
      if (form.getFieldValue(fileds)) {
        let ab = form.getFieldValue(fileds).split(',');
        let arr = Object.keys(pp);
        let b = [];
        let a = [];
        arr.map((item, index) => {
          pp[item].map((i, j) => {
            b.push(i);
          });
        });
        ab.map((item, index) => {
          if (b.includes(item) == false) {
            if (item == '') {
              a = [];
            } else {
              a.push(item);
            }
          }
        });
        if (a.length > 0) {
          pp.外部字段 = a;
          arr.push('外部字段');
        }
        setFiled(pp);
        setCheckedList1(form.getFieldValue(fileds).split(','));
        setPickItem(fileds);
        setIsVisibleEdit(true);
      } else {
        setFiled(pp);
        setCheckedList1([]);
        setPickItem(fileds);
        setIsVisibleEdit(true);
      }
    } else {
      notification.warning({
        message: '提示',
        duration: 3,
        description: '请先选择事件主表',
      });
    }
  };

  const pickFiled1 = fileds => {
    console.log(nu1);
    // let pp = formateArrDataA1(nu1, 'group');
    setKeepFiled(groupArr(nu1, 'group'));
    if (form.getFieldValue(fileds)) {
      // setFiled1(pp);
      setCheckedList1(form.getFieldValue(fileds).split(','));
      setPickItem(fileds);
      setIsVisible(true);
    } else {
      // setFiled1(pp);
      setCheckedList1([]);
      setPickItem(fileds);
      setIsVisible(true);
    }
  };

  const prefix = e => {
    let str = e.target.value;
    if (typeof str != 'string') {
      throw new Error(
        -1,
        '\u51fd\u6570makePy\u9700\u8981\u5b57\u7b26\u4e32\u7c7b\u578b\u53c2\u6570!',
      );
    }
    let arrResult = new Array(); //保存中间结果的数组
    for (let i = 0, len = str.length; i < len; i++) {
      //获得unicode码
      let ch = str.charAt(i);
      //检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理
      arrResult.push(checkCh(ch));
    }
    // setPrefixName(mkRslt(arrResult))
    console.log(mkRslt(arrResult));
    form.setFieldsValue({ Code: mkRslt(arrResult) });
  };

  const checkCh = ch => {
    let uni = ch.charCodeAt(0);
    //如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
    if (uni > 40869 || uni < 19968) {
      return ch;
    } //dealWithOthers(ch);
    //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
    return oMultiDiff[uni] ? oMultiDiff[uni] : strChineseFirstPY.charAt(uni - 19968);
  };

  const mkRslt = arr => {
    let arrRslt = [''];
    for (let i = 0, len = arr.length; i < len; i++) {
      let str = arr[i];
      let strlen = str.length;
      if (strlen == 1) {
        for (var k = 0; k < arrRslt.length; k++) {
          arrRslt[k] += str;
          console.log(str);
        }
      } else {
        let tmpArr = arrRslt.slice(0);
        arrRslt = [];
        for (k = 0; k < strlen; k++) {
          //复制一个相同的arrRslt
          let tmp = tmpArr.slice(0);
          //把当前字符str[k]添加到每个元素末尾
          for (let j = 0; j < tmp.length; j++) {
            tmp[j] += str.charAt(k);
          }
          //把复制并修改后的数组连接到arrRslt上
          arrRslt = arrRslt.concat(tmp);
        }
      }
    }
    let data = arrRslt.toString().slice(0, 6);
    console.log(arrRslt.toString().slice(0, 6));
    return data;
  };

  const inputType = value => {
    console.log(value);
    if (value) {
      form.setFieldsValue({ BusinessType: value });
    }
  };
  const onCancel = () => {
    setIsVisible(false);
  };
  const onCancel11 = () => {
    setIsVisibleEdit(false);
  };

  // 搜索框监听
  const onSearch = value => {
    if (value) {
      form.setFieldsValue({ TableName: value });
    }
  };

  const pictruePreview = () => {
    setPreviewModal(true);
  };

  const uploadButton = (
    <div>
      <div
        style={{
          marginTop: 8,
        }}
      >
        请从图片库中选择
      </div>
    </div>
  );

  const onOk = props => {
    if (props) {
      setImageUrl(`${window.location.origin}/civweb4/${props}`);
      setIm(props);
      setKeepImgeUrl(props);
      form.setFieldsValue({ ImageExpression: `${props}` });
    }
    setShow('hidden');
  };

  const change = e => {
    setVisibleChecked(e);
  };

  return (
    <Drawer
      title={type === 'add' ? '添加事件类型' : '编辑事件类型'}
      width="600px"
      destroyOnClose
      {...props}
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
      // confirmLoading={loading}
    >
      <Spin tip="loading..." spinning={modalLoading}>
        {modalLoading ? null : <Form form={form}>
        <Row>
          {/* <Col span={24}>
            <Item
              label={
                <div style={{ display: 'flex', alignItems: 'center', fontWeight: 'bold' }}>
                  <Tooltip title="选择仅上报时，事件权限必填">
                    <InfoCircleOutlined
                      style={{
                        color: '#1890ff',
                      }}
                    />
                  </Tooltip>
                  <span>上报方式</span>
                </div>
              }
              name="CreateMode"
              labelCol={{ span: 5 }}
            >
              <Radio.Group onChange={onChange2} value={value} defaultValue={chee}>
                <Radio value={1}>立即发起（工单模型）</Radio>
                <Radio value={0}>仅上报（事件模型）</Radio>
              </Radio.Group>
            </Item>
          </Col> */}
          <Col span={24}>
            <Item name="CreateMode" labelCol={{ span: 5 }}>
              <div
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                className={styles.eventType}
              >
                <Tooltip title="直接发起工单，上报权限使用工作流首节点字段配置和权限">
                  <img
                    onClick={() => onChange2(1)}
                    style={{
                      width: '100%',
                      flex: 1
                    }}
                    src={value === 1 ? caseChooseImg : caseImg}
                    alt=""
                  />
                </Tooltip>
                <Tooltip title="事件填报后仅上报，进入调度箱进行办理，事件上报权限单独管理">
                  <img
                    onClick={() => onChange2(0)}
                    style={{ 
                      flex: 1,
                      width: '100%'
                     }}
                    src={value === 0 ? eventChooseImg : eventImg}
                    alt=""
                  />
                </Tooltip>
              </div>
            </Item>
          </Col>
          <Col span={15}>
            <Item
              label="事件类型"
              labelCol={{ span: 8 }}
              name="Name"
              rules={[
                {
                  required: true,
                  message: '请输入事件类型',
                },
              ]}
            >
              <Input
                onChange={prefix}
                placeholder="请输入事件类型"
                style={{ marginLeft: '-3px' }}
              />
            </Item>
          </Col>
          <Col span={9}>
            <Item
              label="编码前缀"
              labelCol={{ span: 12 }}
              name="Code"
              rules={[
                {
                  required: true,
                  message: '请输入编码前缀',
                },
                {
                  validator: (rule, value) => {
                    let regex = new RegExp(/^[A-Z]{2,6}$/g);
                    if (!regex.test(value)) {
                      return Promise.reject('编码只能输入2-6位纯大写英文！');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <Input
                value={prefixName}
                placeholder="请输入编码前缀"
                style={{ marginLeft: '-3px' }}
                maxLength={6}
              />
            </Item>
          </Col>
          <Col span={24}>
            <Item
              label="业务类型"
              name="BusinessType"
              labelCol={{ span: 5 }}
              rules={[
                {
                  required: true,
                  validator: (rule, value) => {
                    if (form.getFieldsValue().BusinessType == '') {
                      return Promise.reject('业务类型必填');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              {/* <div>
                <Input
                  className="ue-editable-select-input"
                  onChange={inputType}
                  value={Type1}
                  style={{ marginLeft: '-3px' }}
                />
                <Dropdown
                  placement="bottomRight"
                  style={{ width: '430px' }}
                  overlay={
                    <Menu>
                      {treeData.length
                        ? treeData.map((item, index) => (
                            <Menu.Item
                              onClick={() => {
                                setType1(item);
                                form.setFieldsValue({ BusinessType: item });
                              }}
                              style={{ width: '430px', marginLeft: '-8px' }}
                              key={index}
                            >
                              {item}
                            </Menu.Item>
                          ))
                        : ''}
                    </Menu>
                  }
                >
                  <div
                    onClick={e => e.preventDefault()}
                    style={{
                      position: 'absolute',
                      left: '94%',
                      width: '1rem',
                      top: '0',
                      marginTop: '6px',
                    }}
                  >
                    <DownOutlined style={{ fontSize: '12px', color: 'rgba(0, 0, 0, 0.25)' }} />
                  </div>
                </Dropdown>
              </div> */}

              <Select
                placeholder="选择业务类型"
                // onChange={inputType}
                onSearch={inputType}
                showSearch
                style={{ marginLeft: '-3px' }}
              >
                {treeData
                  ? treeData.map((item, index) => (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
          <Col span={24}>
            <Item
              label="事件主表"
              name="TableName"
              labelCol={{ span: 5 }}
              rules={[
                {
                  required: true,
                  message: '请选择事件主表',
                },
              ]}
            >
              <Select
                placeholder="选择事件主表"
                onChange={changTable}
                // onSearch={onSearch}
                showSearch
                style={{ marginLeft: '-3px' }}
              >
                {standingTable
                  ? standingTable.map((item, index) => (
                      <Option key={index} value={item.text}>
                        {item.text}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
        </Row>
        {/* </Item> */}

        {/* <Col span={5}>
            <Item />
          </Col>
          <Col span={19}>
            <Item name="Editable">
              <Checkbox onChange={onChange1} checked={editable}>
                上报后可以编辑(需配置编辑字段)
              </Checkbox>
            </Item>
          </Col> */}
        <Row>
          {/* <Col span={24}>
            <Item
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip title="选择仅上报时，事件权限必填">
                    <InfoCircleOutlined
                      style={{
                        color: '#1890ff',
                      }}
                    />
                  </Tooltip>
                  <span>上报方式</span>
                </div>
              }
              name="CreateMode"
              labelCol={{ span: 5 }}
            >
              <Radio.Group onChange={onChange2} value={value} defaultValue={chee}>
                <Radio value={1}>立即发起（工单模型）</Radio>
                <Radio value={0}>仅上报（事件模型）</Radio>
              </Radio.Group>
            </Item>
          </Col> */}
          <Col span={24}>
            <Item
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip title={`存在${summaryValue}个外部字段`}>
                    <InfoCircleOutlined
                      style={{
                        color: 'red',
                        display: summaryIsShow,
                      }}
                    />
                  </Tooltip>

                  <span>摘要字段</span>
                </div>
              }
              name="SummaryFields"
              labelCol={{ span: 5 }}
              rules={[
                {
                  validator: (rule, value) => {
                    console.log(checkedList1);
                    let aa = form.getFieldValue().SummaryFields;
                    let bb = [];
                    console.log(aa.split(','));
                    aa.split(',').map(i => {
                      if (i != '') {
                        bb.push(i);
                      }
                    });
                    console.log(bb);
                    if (aa == '') {
                      return Promise.reject('摘要字段必选');
                    }
                    // if (bb.length < 1 || aa.split(',').length > 5) {
                    //   return Promise.reject('最少配置一个字段，最多配置五个字段');
                    // }
                    if (bb.length < 1) {
                      return Promise.reject('最少配置一个字段');
                    }
                    return Promise.resolve();
                  },
                },
                {
                  required: true,
                  message: '请选择摘要字段',
                },
              ]}
            >
              <div style={{ display: 'flex' }}>
                <Form.Item name="SummaryFields" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择摘要字段" allowClear />
                </Form.Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('SummaryFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          {value === 0 ? (
            <Col span={24}>
              <Item
                label={
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Tooltip title={`存在${reportValue}个外部字段`}>
                      <InfoCircleOutlined
                        style={{
                          color: 'red',

                          display: reportIsShow,
                        }}
                      />
                    </Tooltip>

                    <span>上报字段</span>
                  </div>
                }
                name="ReportFields"
                labelCol={{ span: 5 }}
                rules={[
                  {
                    validator: (rule, value) => {
                      if (form.getFieldValue().ReportFields == '') {
                        return Promise.reject('上报字段必选');
                      }
                      return Promise.resolve();
                    },
                  },
                  {
                    required: true,
                    message: '请选择上报字段',
                  },
                ]}
              >
                <div style={{ display: 'flex' }}>
                  <Form.Item name="ReportFields" style={{ marginBottom: 0, width: '100%' }}>
                    <Input placeholder="请选择上报字段" allowClear />
                  </Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => pickFiled('ReportFields')}
                    icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                    style={{ marginLeft: '10px', width: '70px' }}
                  />
                </div>
              </Item>
            </Col>
          ) : null}
          {value === 0 ? (
            <Col span={24}>
              <Item
                label={
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Tooltip title={`存在${displayValue}个外部字段`}>
                      <InfoCircleOutlined
                        style={{
                          color: 'red',

                          display: displayIsShow,
                        }}
                      />
                    </Tooltip>

                    <span>显示字段</span>
                  </div>
                }
                name="DisplayFields"
                labelCol={{ span: 5 }}
                rules={[
                  {
                    validator: (rule, value) => {
                      if (form.getFieldValue().DisplayFields == '') {
                        return Promise.reject('显示字段必选');
                      }
                      return Promise.resolve();
                    },
                  },
                  {
                    required: true,
                    message: '请选择显示字段',
                  },
                ]}
              >
                <div style={{ display: 'flex' }}>
                  <Form.Item name="DisplayFields" style={{ marginBottom: 0, width: '100%' }}>
                    <Input placeholder="请选择显示字段" allowClear />
                  </Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => pickFiled('DisplayFields')}
                    icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                    style={{ marginLeft: '10px', width: '70px' }}
                  />
                </div>
              </Item>
            </Col>
          ) : null}
          {/* <Col span={24}>
            <Item
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip title={`存在${editableValue}个外部字段`}>
                    <InfoCircleOutlined
                      style={{
                        color: 'red',

                        display: editableIsShow,
                      }}
                    />
                  </Tooltip>

                  <span>编辑字段</span>
                </div>
              }
              name="EditableFields"
              labelCol={{ span: 5 }}
              // rules={[
              //   {
              //     validator: (rule, value) => {
              //       if (form.getFieldValue().EditableFields == '') {
              //         return Promise.reject('编辑字段必选');
              //       }
              //       return Promise.resolve();
              //     },
              //   },
              //   {
              //     required: true,
              //     message: '请选择编辑字段',
              //   },
              // ]}
            >
              <div style={{ display: 'flex' }}>
                <Form.Item name="EditableFields" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择编辑字段" allowClear />
                </Form.Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('EditableFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col> */}
          <Col span={24}>
            <Item
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip title={`存在${displayColumns}个外部字段`}>
                    <InfoCircleOutlined
                      style={{
                        color: 'red',
                        marginRight: '2px',
                        display: transitIsShow,
                      }}
                    />
                  </Tooltip>
                  <span>显示列字段</span>
                </div>
              }
              name="DisplayColumns"
              labelCol={{ span: 5 }}
            >
              <div style={{ display: 'flex' }}>
                <Form.Item name="DisplayColumns" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择显示列字段" allowClear />
                </Form.Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('DisplayColumns')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          {/* <Col span={24}>
            <Item label="置顶条件" name="TopWhere" labelCol={{ span: 5 }}>
              <Input placeholder="请输入置顶条件" allowClear />
            </Item>
          </Col> */}
          {/* <Col span={24}>
            <Item label="上报视图" name="ReportPage" labelCol={{ span: 5 }}>
              <Input placeholder="请输入上报视图" allowClear />
            </Item>
          </Col>
          <Col span={24}>
            <Item label="处理视图" name="DealPage" labelCol={{ span: 5 }}>
              <Input placeholder="请输入处理视图" allowClear />
            </Item>
          </Col> */}

          {/* <Col span={24}>
            <Item label="关联事件" name="RelatedEvents" labelCol={{ span: 5 }}>
              <Input placeholder="请输入关联事件" allowClear />
            </Item>
          </Col> */}
          {/* <Col span={24}>
            <Item
              label={
                <div>
                  <Tooltip title={`存在${relatedEventValue}个外部字段`}>
                    <InfoCircleOutlined
                      style={{
                        color: 'red',
                        marginRight: '2px',
                        display: relatedEventIsShow,
                      }}
                    />
                  </Tooltip>
                  <span>关联字段</span>
                </div>
              }
              name="RelatedEventFields"
              labelCol={{ span: 5 }}
            >
              <div style={{ display: 'flex' }}>
                <Form.Item name="RelatedEventFields" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择关联字段" allowClear />
                </Form.Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('RelatedEventFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col> */}
          <Col span={24}>
            <Item
              name="Reportable"
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip
                  title = {<div>标准使用，使用标准工单系统，可通过勾选 前端/手持，来控制是否展示事件的填报入口，勾选及展示；<br/>内置使用，使用第三方完整功能，仅调用接口、表结构和流程，工单系统中无法使用</div>}
                    // title="标准使用，使用标准工单系统，可通过勾选 前端/手持，来控制是否展示事件的填报入口，勾选及展示；
                    // 内置使用，使用第三方完整功能，仅调用接口、表结构和流程，工单系统中无法使用。"
                  >
                    <InfoCircleOutlined
                      style={{
                        color: '#1890ff',
                        marginRight: '2px',
                      }}
                    />
                  </Tooltip>
                  <span>使用方式</span>
                </div>
              }
              labelCol={{ span: 5 }}
            >
              <div style={{ display: 'flex' }}>
                {/* <span style={{ marginRight: '5px' }}>内置使用</span> */}
                <Switch
                  checkedChildren="标准用法"
                  unCheckedChildren="内置用法"
                  checked={visibleChecked}
                  onChange={change}
                />
              </div>
            </Item>
          </Col>
          <div style={{ display: 'inline-block', marginLeft: '112px', marginRight: '50px' }}>
            <Item name="ReportFromWeb">
              <Checkbox
                onChange={onChange3}
                checked={ReportFromWeb && visibleChecked}
                disabled={!visibleChecked}
              >
                前端
              </Checkbox>
            </Item>
          </div>
          <div style={{ display: 'inline-block' }}>
            <Item name="ReportFromMobile">
              <Checkbox
                onChange={onChange4}
                checked={ReportFromMobile && visibleChecked}
                disabled={!visibleChecked}
              >
                手持
              </Checkbox>
            </Item>
          </div>
          {value === 0 ? (
            <Col span={24}>
              <Item
                label="上报权限"
                name="Roles"
                labelCol={{ span: 5 }}
                rules={[
                  {
                    required: true,
                    message: '请选择上报权限',
                  },
                ]}
              >
                <div style={{ display: 'flex' }}>
                  <Form.Item name="Roles" style={{ marginBottom: 0, width: '100%' }}>
                    <Input placeholder="请选择上报权限" allowClear />
                  </Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => pickFiled1('Roles')}
                    icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                    style={{ marginLeft: '10px', width: '70px' }}
                  />
                </div>
              </Item>
            </Col>
          ) : null}
          <Col span={24}>
            <Item label="接口配置" name="InterfaceConfig" labelCol={{ span: 5 }}>
              <Input placeholder="请输入接口配置" />
            </Item>
          </Col>
        </Row>
        {/* <Item style={{ marginBottom: '0px' }}>
          <span style={{ marginLeft: '112px' }}>客户端上报（需配置事件权限、受理流程）</span>
        </Item> */}
        <Row>
          <Col span={10}>
            <Item
              label="图标"
              name="ImageExpression"
              style={{ height: '112px' }}
              labelCol={{ span: 12 }}
            >
              {imageUrl ? (
                <div
                  style={{
                    width: '104px',
                    height: '104px',
                    border: '1px solid #d9d9d9',
                    borderRadius: '2px',
                    padding: '8px',
                    position: 'relative',
                  }}
                  onMouseEnter={() => setShow('visible')}
                  onMouseLeave={() => setShow('hidden')}
                >
                  <img
                    src={imageUrl}
                    alt="singleFile"
                    style={{
                      width: '100%',
                      backgroundColor: '#2881a1',
                    }}
                  />

                  {show == 'visible' ? (
                    <>
                      <div className={styles.imgg} />
                      <DeleteOutlined
                        onClick={() => {
                          setImageUrl('');
                          setIm('');
                          setKeepImgeUrl('');
                          form.setFieldsValue({ ImageExpression: '' });
                        }}
                        style={{
                          position: 'absolute',
                          fontSize: '18px',
                          left: '24px',
                          top: '45px',
                          color: 'white',
                          zIndex: '999',
                        }}
                      />
                      <PictureOutlined
                        onClick={pictruePreview}
                        style={{
                          position: 'absolute',
                          fontSize: '18px',
                          left: '54px',
                          top: '45px',
                          color: 'white',
                          zIndex: '999',
                        }}
                      />
                    </>
                  ) : (
                    <></>
                  )}
                </div>
              ) : (
                <Image
                  width="104px"
                  // height={100}
                  src="error"
                  onClick={pictruePreview}
                  fallback="data:image/png;base64,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"
                />
              )}
            </Item>
          </Col>
          {/* <Col span={12}>
            <Item>
              <Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
                从图片库中选择
              </Button>
            </Item>
          </Col> */}
        </Row>
      </Form>}
      
      </Spin>
      {/* <ChangeAdd
        visible={isVisible}
        onCancel={onCancel}
        callBackSubmit={onOK}
        newCheckedList={checkedList1}
        filed11={filed1}
        pickItem={pickItem}
      /> */}
      <PreviewModal
        visible={previewModal}
        onCancel={() => {
          setPreviewModal(false);
        }}
        imageUrl={im}
        keepImgeUrl={keepImgeUrl}
        type={type}
        callBackSubmit={onOk}
      />
      <EditTypeModal
        visible={editTypeModal}
        tableData={flowTableData}
        onCancel={() => {
          setEditTypeModal(false);
          setValue(0);
        }}
        callBackSubmit={chooseFlowOk}
      />
      <RMSComponents
        visible={isVisible}
        onCancel={onCancel}
        callBackSubmit={onOK}
        newCheckedList={checkedList1} // 单选框中的值
        pickItem={pickItem}
        groupName={groupName} // 打开组件展示的分组名，用来首次获取数据
        chooseGroupName={chooseGroupName} // 可选分组名
        keepFiled={keepFiled} // 分组数据
        dataType="name"
      />
      <ChangeEdit
        visible={isVisibleEdit}
        onCancel={onCancel11}
        callBackSubmit={onOK1}
        newCheckedList={checkedList1}
        filed={filed}
        flag={flag}
        pickItem={pickItem}
        formObj={formObj}
      />
    </Drawer>
  );
};

export default AddModal;
