/* 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,
  message,
  Space,
  Row,
  Col,
  Select,
  Checkbox,
  Radio,
  Dropdown,
  Menu,
  Button,
} from 'antd';
import {
  GetCM_Event_LoadEventTypeTable,
  LoadEventFields,
  CM_Event_LoadDepartmentAndRoles,
  CM_Event_EditEventTable,
  GetCM_Event_QueryEventType,
  CM_Event_AddEventTable,
} from '@/services/standingBook/api';
import styles from './incident.less';
import ChangeAdd from './changeAdd';
import ChangeEdit from './changeEdit';
import ChangeImage from './ChangeImage';
import ModalDrag from '../maintenance/ModalDrag';
import { PlusOutlined, DownOutlined } from '@ant-design/icons';
import { set } from 'immutable';
import { getRoleGroup } from '@/services/userCenter/roleManage/api';

const { Option } = Select;
const AddModal = props => {
  const [inputValue, setInputValue] = useState({
    SummaryFields: '',
    ReportFields: '',
    DisplayFields: '',
    EditableFields: '',
    TransitFields: '',
    Roles: '',
    RelatedEventFields: '',
    pictureFields: '',
  });
  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 CheckboxGroup = Checkbox.Group;
  const defaultCheckedList = ['前端', '手持'];
  // const plainOptions = ['前端', '手持']

  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [checkedList1, setCheckedList1] = useState([]);
  const [checkedList2, setCheckedList2] = useState([]);
  const [checkedList3, setCheckedList3] = useState([]);
  const [checkedList4, setCheckedList4] = 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 [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(true);
  const [pickItem, setPickItem] = useState('');
  const [prefixName, setPrefixName] = useState('');
  const [selectValue, setSelectValue] = useState('');
  const [loading, setLoading] = useState(false);

  const [standingTable, setStandingTable] = useState([]);
  const [filed, setFiled] = useState({}); // 传给子组件列表数据
  const [filed1, setFiled1] = useState({}); // 传给子组件列表数据

  const [flag, setFlag] = useState(0);

  const [value, setValue] = useState(1); // 单选
  const [types, setTypes] = useState(''); // 弹窗类型
  const [Order, setOrder] = useState(''); // 弹窗类型
  const [Type1, setType1] = useState('');
  const [number, setNumber] = useState('');

  const [isVisible, setIsVisible] = useState(false); // 事件权限弹窗
  const [isVisibleEdit, setIsVisibleEdit] = useState(false); // 字段弹框
  const [isVisible1, setIsVisible1] = useState(false); // 弹窗
  const [characterValue, setCharacterValue] = useState('');
  const [form] = Form.useForm();
  const { Item } = Form;

  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        obj.Code = obj.Code.toString();
        console.log(obj);
        console.log(obj.Reportable);
        console.log(obj.ReportFromWeb);
        console.log(obj.ReportFromMobile);
        if (obj.BusinessType === undefined) {
          obj.BusinessType = rember1;
        }
        if (obj.TableName === undefined) {
          console.log(selectValue);
          obj.TableName = selectValue;
        }
        if (obj.CreateMode === undefined) {
          console.log(1111);
          obj.CreateMode = 0;
        }
        if (obj.CreateMode === 0 || 1) {
          console.log(2222);
          obj.CreateMode = obj.CreateMode.toString();
        }
        if (editable != true) {
          inputValue.Editable = false;
        } else {
          inputValue.Editable = editable;
        }
        if (checkedList3 === true && checkedList4 === true) {
          obj.Reportable = '均可';
          obj.ReportFromMobile = '手持';
          obj.ReportFromWeb = '前端';
        } else if (checkedList3 === true) {
          obj.Reportable = '前端';
          obj.ReportFromMobile = '';
          obj.ReportFromWeb = '前端';
        } else if (checkedList4 === true) {
          obj.Reportable = '手持';
          obj.ReportFromMobile = '手持';
          obj.ReportFromWeb = '';
        } else {
          obj.Reportable = '否';
          obj.ReportFromMobile = '';
          obj.ReportFromWeb = '';
        }
        if (ReportFromWeb === true && ReportFromMobile === true) {
          inputValue.Reportable = '均可';
          inputValue.ReportFromMobile = '手持';
          inputValue.ReportFromWeb = '前端';
        } else if (ReportFromWeb === true) {
          inputValue.Reportable = '前端';
          inputValue.ReportFromMobile = '';
          inputValue.ReportFromWeb = '前端';
        } else if (ReportFromMobile === true) {
          inputValue.Reportable = '手持';
          inputValue.ReportFromMobile = '手持';
          inputValue.ReportFromWeb = '';
        } else {
          inputValue.Reportable = '否';
          inputValue.ReportFromMobile = '';
          inputValue.ReportFromWeb = '';
        }
        console.log(obj.BusinessType);
        console.log(ReportFromWeb);
        console.log(ReportFromMobile);
        console.log(obj);
        console.log(inputValue);
        let data = { ...obj, ...inputValue, Order: maxLength };
        if (inputValue.Roles == '' && inputValue.Reportable != '否') {
          notification.warning({
            message: '提示',
            description: '当允许客户端上报时，须填写事件权限',
          });
        } else {
          if (type == 'edit') {
            CM_Event_EditEventTable({
              ...inputValue,
              ID: formObj.ID,
              Name: obj.Name,
              Code: obj.Code,
              BusinessType: obj.BusinessType,
              TableName: obj.TableName,
              Reportable: inputValue.Reportable,
              ReportFromWeb: inputValue.ReportFromWeb,
              ReportFromMobile: inputValue.ReportFromMobile,
              Editable: inputValue.Editable,
              CreateMode: obj.CreateMode,
              TopWhere: obj.TopWhere,
              ReportPage: obj.ReportPage,
              DealPage: obj.DealPage,
              RelatedEvents: obj.RelatedEvents,
              InterfaceConfig: obj.InterfaceConfig,
            })
              .then(res => {
                setLoading(false);
                if (res.msg === 'Ok') {
                  form.resetFields();
                  callBackSubmit();
                  notification.success({
                    message: '提示',
                    duration: 3,
                    description: '编辑成功',
                  });
                } else {
                  notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                  });
                }
              })
              .catch(error => {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: '编辑失败',
                });
                setLoading(false);
              });
            setFlag(0);
          }
          if (type == 'add') {
            CM_Event_AddEventTable(data)
              .then(res => {
                setLoading(false);
                if (res.msg === 'Ok') {
                  form.resetFields();
                  callBackSubmit();
                  notification.success({
                    message: '提示',
                    duration: 3,
                    description: '新增成功',
                  });
                } else {
                  notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                  });
                }
              })
              .catch(error => {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: '新增失败',
                });
                setLoading(false);
              });
            setFlag(0);
          }
        }
      }
    });
  };

  useEffect(() => {
    console.log(rember1);
    console.log(selectData);
    getRole();
    if (type === 'add') {
      setType1(rember1);
      form.setFieldsValue({ BusinessType: rember1 });
      console.log(Type1);
      setReportFromWeb(true);
      setCheckedList3(true);
      setChee(0);
      setValue(0);
      getEventData();
      setSelectValue(selectData[0]);
      setInputValue({
        SummaryFields: '',
        ReportFields: '',
        DisplayFields: '',
        EditableFields: '',
        TransitFields: '',
        Roles: '',
        RelatedEventFields: '',
        pictureFields: '',
      });
      setFiled({});
      setFiled1({});
      form.resetFields();
      setEditable(false);
      setReportFromMobile(false);
      // setReportFromWeb(false)
    } else if (type === 'edit') {
      getEventData1();
      GetCM_Event_QueryEventType({ eventTypeId: formObj.ID }).then(res => {
        res.data.root && form.setFieldsValue({ ...res.data.root });
        console.log(res.data.root);
        console.log(res.data.root.Editable);
        setEditable(res.data.root.Editable);
        setReportFromMobile(res.data.root.ReportFromMobile);
        setReportFromWeb(res.data.root.ReportFromWeb);
        setInputValue({ ...res.data.root });
        setOrder(res.data.root.Order);
        setType1(res.data.root.BusinessType);
        changTable(res.data.root.TableName);
      });
    }
    setFlag(0);
  }, [visible]);

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

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

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

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

  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);
    //新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"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]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    console.log(tempObj);
    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.fieldName);
      });
    }
    return tempObj;
  };
  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]);
        }
      }
    }
    console.log(tempObj);
    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.Name);
      });
    }
    return tempObj;
  };
  const onChange = list => {
    console.log(list);
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < ['前端', '手持'].length);
    setCheckAll(list.length === ['前端', '手持'].length);
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? ['前端', '手持'] : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onChange1 = e => {
    console.log(e.target.checked);
    setEditable(e.target.checked);
    setCheckedList2(e.target.checked); //true
  };
  const onChange2 = e => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
  const onChange3 = e => {
    console.log(e.target.checked);
    setReportFromWeb(e.target.checked);
    setCheckedList3(e.target.checked); //true
  };
  const onChange4 = e => {
    console.log(e.target.checked);
    setReportFromMobile(e.target.checked);
    setCheckedList4(e.target.checked); //true
  };
  const onOK = prop => {
    console.log(prop.isType);
    console.log(prop.stt);
    console.log(prop.filed22);
    console.log(prop.title);
    setIsVisible(false);
    let inputText = { ...inputValue };
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    setInputValue(inputText);
    // if (prop.isType == 'app') {
    //   let title = prop.title;
    //   let selectData = prop.stt;
    //   let ff = prop.filed22;
    //   let aa = [];
    //   let bb = 0;
    //   title.map((item, index) => {
    //     console.log(ff[item]);
    //     aa = [];
    //     selectData.map((item1, index1) => {
    //       console.log(item1);
    //       if (ff[item].indexOf(item1) != -1) {
    //         aa.push(item1);
    //       }
    //     });
    //     console.log(aa);
    //     if (item == '外部字段' && aa.length == 0) {
    //       bb = 0;
    //     } else {
    //       // eslint-disable-next-line no-lonely-if
    //       if (aa.length == 0) {
    //         bb = 1;
    //       }
    //     }
    //   });
    //   console.log(aa);
    //   if (bb == 1) {
    //     notification.error({
    //       message: '提示',
    //       description: '部门站点角色必须都选至少一项',
    //     });
    //   } else {
    //     setIsVisible(false);
    //     let inputText = { ...inputValue };
    //     console.log(inputText);
    //     console.log(prop.str);
    //     inputText[prop.pickItem] = prop.str;
    //     setCheckedList1(prop.stt);
    //     setInputValue(inputText);
    //   }
    // } else {
    //   setIsVisible(false);
    //   let inputText = { ...inputValue };
    //   inputText[prop.pickItem] = prop.str;
    //   setCheckedList1(prop.stt);
    //   setInputValue(inputText);
    // }
  };
  const onOK1 = prop => {
    console.log(prop.isType);
    console.log(prop.stt);
    console.log(prop.title);
    setIsVisibleEdit(false);
    let inputText = { ...inputValue };
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    setInputValue(inputText);
  };
  const oKK = prop => {
    setIsVisible1(false);
  };
  const pickFiled = fileds => {
    let pp = formateArrDataA(nu, 'group');
    let ab = inputValue[fileds].split(',');
    console.log(pp);
    let arr = Object.keys(pp);
    let b = [];
    let a = [];
    arr.map((item, index) => {
      pp[item].map((i, j) => {
        b.push(i);
      });
    });
    console.log(ab);
    ab.map((item, index) => {
      if (b.includes(item) == false) {
        if (item == '') {
          a = [];
        } else {
          a.push(item);
        }
      }
    });
    if (a.length > 0) {
      pp.外部字段 = a;
      console.log(pp);
      arr.push('外部字段');
    }
    console.log(a);
    console.log(pp);
    setFiled(pp);
    setTypes('add');
    setCharacterValue(inputValue[fileds]);
    setCheckedList1(inputValue[fileds].split(','));
    setPickItem(fileds);
    setIsVisibleEdit(true);
  };
  const pickFiled1 = fileds => {
    let pp = formateArrDataA1(nu1, 'group');
    let ab = inputValue[fileds].split(',');
    console.log(pp);
    let arr = Object.keys(pp);
    let b = [];
    let a = [];
    arr.map((item, index) => {
      pp[item].map((i, j) => {
        b.push(i);
      });
    });
    console.log(ab);
    ab.map((item, index) => {
      if (b.includes(item) == false) {
        if (item == '') {
          a = [];
        } else {
          a.push(item);
        }
      }
    });
    // if (a.length > 0) {
    //   pp.外部字段 = a;
    //   console.log(pp);
    //   arr.push('外部字段');
    // }
    console.log(a);
    console.log(pp);
    setFiled1(pp);
    setTypes('app');
    setCharacterValue(inputValue[fileds]);
    setCheckedList1(inputValue[fileds].split(','));
    setPickItem(fileds);
    setIsVisible(true);
  };
  const pickFiled2 = fileds => {
    // setCharacterValue(inputValue[fileds])
    // setCheckedList1(inputValue[fileds].split(','))
    // setPickItem(fileds)
    setIsVisible1(true);
  };
  const changeText = (e, type) => {
    let inputText = { ...inputValue };
    inputText[type] = e.target.value;
    setInputValue(inputText);
  };
  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))
    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);
        }
      }
    }
    return arrRslt;
  };

  const inputType = e => {
    setType1(e.target.value);
    form.setFieldsValue({ BusinessType: e.target.value });
  };
  const onCancel = () => {
    setIsVisible(false);
  };
  const onCancel11 = () => {
    setIsVisibleEdit(false);
  };
  const onCancel1 = () => {
    setIsVisible1(false);
  };
  // const title = <ModalDrag title={type === 'add' ? '添加事件类型' : '编辑事件类型'} />
  return (
    <Drawer
      title={type === 'add' ? '添加事件类型' : '编辑事件类型'}
      width="600px"
      destroyOnClose
      {...props}
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
      // confirmLoading={loading}
    >
      <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
        <Row>
          <Col span={13}>
            <Item
              label="事件名称"
              name="Name"
              rules={[
                {
                  required: true,
                  message: '请输入事件名称',
                },
              ]}
            >
              <Input onChange={prefix} placeholder="请输入事件名称" />
            </Item>
          </Col>
          <Col span={10}>
            <Item
              label="编码前缀"
              labelCol={{ span: 14 }}
              name="Code"
              rules={[
                {
                  required: true,
                  message: '请输入事件名称',
                },
              ]}
            >
              <Input value={prefixName} placeholder="请输入编码前缀" />
            </Item>
          </Col>
          <Col span={23}>
            {/* <Item
                            label="业务类型"
                            name="BusinessType"
                            labelCol={{ span: 4 }}
                            rules={[
                                {
                                    required: true,
                                    message: '请选择业务类型',
                                },
                            ]}
                        >
                            <Select
                                style={{ width: '580px' }}
                                placeholder="选择业务类型"
                                showSearch
                            >
                                {treeData ? treeData.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
                            </Select>
                        </Item> */}
            <span
              style={{
                position: 'absolute',
                left: '1%',
                top: '9%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              label="业务类型"
              name="BusinessType"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    if (form.getFieldsValue().BusinessType == '') {
                      return Promise.reject('业务类型必填');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div>
                <Input
                  className="ue-editable-select-input"
                  onChange={inputType}
                  value={Type1}
                />
                <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>
            </Item>
          </Col>
          <Col span={23}>
            <Item
              label="事件主表"
              name="TableName"
              labelCol={{ span: 4 }}
              rules={[
                {
                  required: true,
                  message: '请选择事件主表',
                },
              ]}
            >
              <Select
                placeholder="选择事件主表"
                onChange={changTable}
                // defaultValue={selectValue}
              >
                {standingTable
                  ? standingTable.map((item, index) => (
                      <Option key={index} value={item.text}>
                        {item.text}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
          <Col span={4}>
            <Item />
          </Col>
          <Col span={20}>
            <Item>
              <span>客户端上报和配单(需配置事件权限、受理流程)</span>
            </Item>
          </Col>
          <Col span={4}>
            <Item />
          </Col>
          <Col span={4}>
            {/* <Item
                            name="Reportable"
                        >
                            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
                                客户端上报和配单(需配置事件权限、受理流程)
                            </Checkbox>
                             <CheckboxGroup value={checkedList} onChange={onChange}/> 
                            <CheckboxGroup value={checkedList} onChange={onChange}>
                                <Checkbox value={'前端'}>前端</Checkbox>
                                <Checkbox value={'手持'}>手持</Checkbox>
                            </CheckboxGroup>
                        </Item> 
                        */}
            {/* <Item
                            name="Reportable"
                        > */}
            {/* <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
                                客户端上报和配单(需配置事件权限、受理流程)
                            </Checkbox> */}
            <Item name="ReportFromWeb">
              <Checkbox onChange={onChange3} checked={ReportFromWeb}>
                前端
              </Checkbox>
            </Item>
          </Col>
          <Col span={16}>
            <Item name="ReportFromMobile">
              <Checkbox onChange={onChange4} checked={ReportFromMobile}>
                手持
              </Checkbox>
            </Item>

            {/* </Item> */}
          </Col>
          <Col span={4}>
            <Item />
          </Col>
          <Col span={20}>
            <Item name="Editable">
              <Checkbox onChange={onChange1} checked={editable}>
                上报后可以编辑(需配置编辑字段)
              </Checkbox>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="上报方式" name="CreateMode" labelCol={{ span: 4 }}>
              <Radio.Group
                onChange={onChange2}
                value={value}
                defaultValue={chee}
              >
                <Radio value={0} style={{ marginLeft: '5px' }}>
                  仅上报
                </Radio>
                <Radio value={1} style={{ marginLeft: '100px' }}>
                  工单分派
                </Radio>
              </Radio.Group>
            </Item>
          </Col>
          <Col span={23}>
            <span
              style={{
                position: 'absolute',
                left: '1%',
                top: '5%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              label="摘要字段"
              name="SummaryFields"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    if (inputValue.SummaryFields == '') {
                      return Promise.reject('摘要字段必选');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择摘要字段"
                  onChange={e => changeText(e, 'SummaryFields')}
                  value={inputValue.SummaryFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('SummaryFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <span
              style={{
                position: 'absolute',
                left: '1%',
                top: '5%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              label="上报字段"
              name="ReportFields"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    if (inputValue.ReportFields == '') {
                      return Promise.reject('上报字段必选');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择上报字段"
                  onChange={e => changeText(e, 'ReportFields')}
                  value={inputValue.ReportFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('ReportFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <span
              style={{
                position: 'absolute',
                left: '1%',
                top: '5%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              label="显示字段"
              name="DisplayFields"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    if (inputValue.DisplayFields == '') {
                      return Promise.reject('显示字段必选');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择显示字段"
                  onChange={e => changeText(e, 'DisplayFields')}
                  value={inputValue.DisplayFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('DisplayFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <span
              style={{
                position: 'absolute',
                left: '1%',
                top: '5%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              label="编辑字段"
              name="EditableFields"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    if (inputValue.EditableFields == '') {
                      return Promise.reject('编辑字段必选');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择编辑字段"
                  onChange={e => changeText(e, 'EditableFields')}
                  value={inputValue.EditableFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('EditableFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="转单字段" name="TransitFields" labelCol={{ span: 4 }}>
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择转单字段"
                  onChange={e => changeText(e, 'TransitFields')}
                  value={inputValue.TransitFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('TransitFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="事件权限" name="Roles" labelCol={{ span: 4 }}>
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择事件权限"
                  onChange={e => changeText(e, 'Roles')}
                  value={inputValue.Roles}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled1('Roles')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="置顶条件" name="TopWhere" labelCol={{ span: 4 }}>
              <Input placeholder="请输入置顶条件" allowClear />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="上报视图" name="ReportPage" labelCol={{ span: 4 }}>
              <Input placeholder="请输入上报视图" allowClear />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="处理视图" name="DealPage" labelCol={{ span: 4 }}>
              <Input placeholder="请输入处理视图" allowClear />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="关联事件" name="RelatedEvents" labelCol={{ span: 4 }}>
              <Input placeholder="请输入关联事件" allowClear />
            </Item>
          </Col>
          <Col span={23}>
            <Item
              label="关联字段"
              name="RelatedEventFields"
              labelCol={{ span: 4 }}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择关联字段"
                  onChange={e => changeText(e, 'RelatedEventFields')}
                  value={inputValue.RelatedEventFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled('RelatedEventFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
          <Col span={23}>
            <Item
              label="接口配置"
              name="InterfaceConfig"
              labelCol={{ span: 4 }}
            >
              <Input placeholder="请输入接口配置" />
            </Item>
          </Col>
          <Col span={23}>
            <Item
              label="图片表达"
              name="ImageExpression"
              labelCol={{ span: 4 }}
            >
              <div className={styles.filed_listItem}>
                <Input
                  style={{ width: '83%' }}
                  placeholder="请选择图片表达"
                  onChange={e => changeText(e, 'pictureFields')}
                  value={inputValue.pictureFields}
                  allowClear
                />
                <Button
                  type="dashed"
                  onClick={() => pickFiled2('pictureFields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '0.5rem', width: '4rem' }}
                />
              </div>
            </Item>
          </Col>
        </Row>
      </Form>
      <ChangeAdd
        visible={isVisible}
        onCancel={onCancel}
        callBackSubmit={onOK}
        newCheckedList={checkedList1}
        isType={types}
        filed={filed}
        flag={flag}
        filed11={filed1}
        pickItem={pickItem}
        characterValue={characterValue}
        formObj={formObj}
      />
      <ChangeEdit
        visible={isVisibleEdit}
        onCancel={onCancel11}
        callBackSubmit={onOK1}
        newCheckedList={checkedList1}
        filed={filed}
        flag={flag}
        filed11={filed1}
        pickItem={pickItem}
        characterValue={characterValue}
        formObj={formObj}
      />
      <ChangeImage
        visible={isVisible1}
        callBackSubmit={oKK}
        onCancel={onCancel1}
      />
    </Drawer>
  );
};

export default AddModal;
