/* eslint-disable radix */
/* eslint-disable camelcase */
import React, { useState, useEffect, useRef, useCallback } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import {
  Form,
  Input,
  notification,
  Select,
  Checkbox,
  message,
  Button,
  Card,
  Row,
  Col,
  TreeSelect,
  Empty,
  Switch as Switchs,
  Image,
} from 'antd';
import BaseForm from '@/components/BaseForm/index';
import { Switch } from 'react-router';
import { iteratee } from 'lodash';
import v from 'voca';

import {
  UsergroupDeleteOutlined,
  IdcardOutlined,
  DesktopOutlined,
  FolderFilled,
  FileOutlined,
  MobileOutlined,
  DeleteOutlined,
  PictureOutlined,
} from '@ant-design/icons';
import moment from 'moment';
import { useHistory } from 'react-router-dom';
import VisibleRoleModal from '../projectManage/components/RolseSelect/VisibleRoleModal';
import VisibleIISAgentConfig from '../projectManage/components/IISAgentConfig/VisibleIISAgentConfig';
import RoleModal from '../projectManage/components/RolseSelect/RoleModal';
import {
  GetMessageTemplate,
  UpdateMessageConfig,
  InsertMessageConfig,
  AddIISAgentConfig,
  GetMessageIcon,
  // eslint-disable-next-line import/no-duplicates
} from '@/services/messagemanage/messagemanage';

import { getWebModuleTree, getWebMenuInfo } from '@/services/webConfig/api';
import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api';

import styles from './schemeDetail.less';
import PreviewModal from './PreviewModal';
const { Item } = Form;
const { TextArea } = Input;
const EditModal = props => {
  const history = useHistory();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [plan, setPlan] = useState('');
  const [isStart, setIsStart] = useState(false);
  const [IISConfig, setIISConfig] = useState(null);
  const [isUse, setIsUse] = useState(null);
  const [btnType, setBtnType] = useState('自定义');
  const { template, confirmModal, currentPage, nameList } = props.location.state;
  const [currentTrench, setCurrentTrench] = useState({
    isMessageShow: false,
    isAPPShow: false,
    isWEBShow: false,
    isWXShow: false,
    isEnterpriseWXShow: false,
  });
  const [showRoleModal, setShowRoleModal] = useState(false); // 推送组选择角色弹窗
  // eslint-disable-next-line camelcase
  const [APP_ITEMS, setAPP_ITEMS] = useState([]);
  const [WEB_ITEMS, setWEB_ITEMS] = useState([]);
  const [WX_ITEMS, setWX_ITEMS] = useState([]);
  const [MES_ITEMS, setMES_ITEMS] = useState([]);
  const [EN_ITEMS, setEN_ITEMS] = useState([]);
  const [listType, setListType] = useState([
    {
      title: '自定义',
      desc: '根据用户需求,自定义消息内容与各类推送方式。',
    },
    {
      title: '定时推送',
      desc: '用于周期性简报的定时推送,如智能巡检、运行周报。',
    },
    {
      title: '监控报警',
      desc: '设备硬件故障,阈值超限,状态突变,采集超时等异常情况报警。',
    },
    {
      title: '工单办理',
      desc: '针对工单办理人员的通知,包括工作办理、回退、审核等操作。',
    },
    {
      title: '平台公告',
      desc: '由运维人员向所有用户或特定用户发送的事务公告,如系统升级、维护。',
    },
  ]);
  const [menuWebList, setMenuWebList] = useState([]);
  const [menuMoblieList, setMenuMoblieList] = useState([]);
  const { TreeNode } = TreeSelect;
  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
  const [treeSelectValueMoblie, setTreeSelectValueMoblie] = useState(undefined);
  const [imgDataList, setImgDataList] = useState([]);
  const [show, setShow] = useState('hidden');
  const [imageUrl, setImageUrl] = useState();
  const [keepImgeUrl, setKeepImgeUrl] = useState('');
  const [im, setIm] = useState();
  const [previewModal, setPreviewModal] = useState(false);
  const [type, setType] = useState('');
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    getMessageIcon();
    getTreeWeb();
    getTreeMoblie();
    GetMessageTemplate().then(res => {
      if (res.code === 0) {
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        let arr5 = [];
        // eslint-disable-next-line array-callback-return
        res.data.map((item, index) => {
          if (item.Type === '公众号') {
            arr1.push(item);
          }
          if (item.Type === '短信') {
            arr2.push(item);
          }
          if (item.Type === 'APP') {
            arr3.push(item);
          }
          if (item.Type === 'WEB') {
            arr4.push(item);
          }
          if (item.Type === '企业微信') {
            arr5.push(item);
          }
        });
        setAPP_ITEMS(arr3);
        setMES_ITEMS(arr2);
        setWX_ITEMS(arr1);
        setWEB_ITEMS(arr4);
        setEN_ITEMS(arr5);
      }
    });
  }, []);
  useEffect(() => {
    getTreeWeb();
    getTreeMoblie();
    console.log('template', template);
    console.log(template.WorkWeiXinTemplateId);
    let aa;
    if (template.WorkWeiXinTemplateId == null || template.WorkWeiXinTemplateId === '') {
      aa = '';
    } else {
      // eslint-disable-next-line radix
      aa = parseInt(template.WorkWeiXinTemplateId);
    }
    // 编辑
    if (template.ThemeName) {
      if (
        template.MsgType === '通用报警' ||
        template.MsgType === '工单提醒' ||
        template.MsgType === '系统通知'
      ) {
        setHidden(true);
      } else {
        setHidden(false);
      }
      setType('edit');
      form.setFieldsValue({
        name: template.MsgType,
        isStart: template.IsStarted === '0' ? '关闭' : '开启',
        to_person: template.PushGroup,
        push_mode: template.PushMode === null ? '' : template.PushMode.split(','),
        webIcon: template.WebIcon,
        Title: template.Title,
        app_template: template.AppTemplateID,
        app_path: template.AppFunctionPath,
        wx_template: template.PublicTemplateID ? parseInt(template.PublicTemplateID) : '',
        h5_path: template.PublicPath,
        miniprogram_path: template.MiniAppRoute,
        web_template: template.WebTemplateID,
        web_path: template.WebFunctionPath,
        message_template: template.MsgTemplateID,
        enterprise_template: aa,
      });
      setImageUrl(template.WebIcon ? `${window.location.origin}/${template.WebIcon}` : '');
      setIm(template.WebIcon ? template.WebIcon : '');
      setPlan(template.MsgType);
      setBtnType(template.type);
      setIsUse(template.IsStarted === null ? '0' : template.IsStarted);
      setCurrentTrench({
        isAPPShow: !!(template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1),
        isWXShow: !!(template.PushMode && template.PushMode.split(',').indexOf('公众号推送') > -1),
        isWEBShow: !!(template.PushMode && template.PushMode.split(',').indexOf('平台弹框') > -1),
        isMessageShow: !!(
          template.PushMode && template.PushMode.split(',').indexOf('短信推送') > -1
        ),
        isEnterpriseWXShow: !!(
          template.PushMode && template.PushMode.split(',').indexOf('企业微信推送') > -1
        ),
      });
    } else {
      setIsUse('1');
      setType('add');
      setImageUrl('');
      setIm('');
      console.log(111);
      setBtnType('自定义');
    }
  }, [props]);

  const getMessageIcon = () => {
    GetMessageIcon().then(res => {
      console.log(res.data);
      setImgDataList(res.data);
    });
  };

  const getTreeWeb = () => {
    getWebModuleTree('super')
      .then(res => {
        setLoading(false);
        const { code, data } = res;
        if (code === 0) {
          let list = [];
          let arr = data.filter(item => item.id === 'Web4SingleStation');
          let datalist = arr[0].children;
          console.log(datalist);
          datalist.map((i, j) => {
            let aa = [];
            i.children.map(k => {
              if (k.text === '菜单管理') {
                aa = k.children;
              }
            });
            let a = {};
            a.value = `praent${j}`;
            a.text = i.text;
            a.children = aa;
            a.menuID = `praent${j}`;
            a.key = `praent${j}`;
            a.item = 'father';
            list.push(a);
          });
          console.log(list);
          setMenuWebList(list);
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  const getTreeMoblie = () => {
    getMiniAppModuleTree({
      userMode: 'super',
    })
      .then(res => {
        if (res.code === 0) {
          let array = (res.data[0].children.length > 0 && [...res.data[0].children]) || [];
          console.log(array);
          let list = [];
          array.map((i, j) => {
            let aa = [];
            i.children.map(k => {
              if (k.text === '菜单管理') {
                aa = k.children;
              }
            });
            let a = {};
            a.value = `praent${j}`;
            a.text = i.text;
            a.children = aa;
            a.menuID = `praent${j}`;
            a.key = `praent${j}`;
            list.push(a);
          });
          console.log(list);
          setMenuMoblieList(list);
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  const onNameChange = e => {
    setPlan(e.target.value);
  };

  const onSubmit = () => {
    let fv = form.getFieldValue();
    console.log(fv.enterprise_template);
    let aa;
    if (fv.enterprise_template === undefined) {
      aa = '';
    } else {
      aa = fv.enterprise_template.toString();
    }
    console.log(fv);

    let push_mode = [];
    Object.keys(currentTrench).forEach(key => {
      console.log(key, 'key');
      switch (key) {
        case 'isAPPShow':
          if (currentTrench[key]) {
            push_mode.push('平台弹框');
          }
          break;
        // case 'isWEBShow':
        //   if (currentTrench[key]) {
        //     push_mode.push('平台弹框');
        //   }
        //   break;
        case 'isWXShow':
          if (currentTrench[key]) {
            push_mode.push('公众号推送');
          }
          break;
        case 'isMessageShow':
          if (currentTrench[key]) {
            push_mode.push('短信推送');
          }
          break;
        case 'isEnterpriseWXShow':
          if (currentTrench[key]) {
            push_mode.push('企业微信推送');
          }
          break;
        default:
          break;
      }
    });

    if (template.ThemeName) {
      let a = {
        ID: template.ID,
        ThemeName: btnType,
        MsgType: fv.name,
        PublicTemplateID: fv.wx_template.toString() ? fv.wx_template.toString() : WX_ITEMS[0].Id,
        PublicConfig: template.PublicConfig,
        PublicPath: fv.h5_path,
        MsgTemplateName: template.MsgTemplateName,
        MsgTemplateCode: template.MsgTemplateCode,
        MsgConfig: template.MsgConfig,
        MiniAppRoute: fv.miniprogram_path,
        AppFunctionPath: fv.app_path,
        AppConfig: template.AppConfig,
        WebFunctionPath: fv.web_path,
        WebConfig: template.WebConfig,
        IsDelete: template.IsDelete,
        InputTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        Pusher: template.Pusher,
        PushMode: push_mode.join(','),
        PushPath: template.PushPath,
        IsStarted: isUse,
        MsgTemplateID: fv.message_template ? fv.message_template : MES_ITEMS[0].Id,
        AppTemplateID: fv.app_template ? fv.app_template : APP_ITEMS[0].Id,
        WebTemplateID: fv.web_template ? fv.web_template : WEB_ITEMS[0].Id,
        PushGroup: fv.to_person ? fv.to_person.toString() : '',
        WorkWeiXinTemplateId: aa,
        WebIcon: fv.webIcon,
        Title: fv.Title,
      };

      UpdateMessageConfig(a).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            // eslint-disable-next-line no-shadow
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
                back();
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
          } else {
            back();
            message.success('保存成功');
          }
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      });
    } else {
      let bb;
      if (fv.enterprise_template === undefined) {
        bb = '';
      } else {
        bb = fv.enterprise_template.toString();
      }
      console.log(fv.enterprise_template);
      let b = {
        ThemeName: btnType,
        MsgType: fv.name,
        PublicTemplateID: fv.wx_template ? fv.wx_template.toString() : WX_ITEMS[0].Id,
        PublicConfig: template.PublicConfig,
        PublicPath: fv.h5_path,
        MsgTemplateName: template.MsgTemplateName,
        MsgTemplateCode: template.MsgTemplateCode,
        MsgConfig: template.MsgConfig,
        MiniAppRoute: fv.miniprogram_path,
        AppFunctionPath: fv.app_path,
        AppConfig: template.AppConfig,
        WebFunctionPath: fv.web_path,
        WebConfig: template.WebConfig,
        IsDelete: template.IsDelete,
        InputTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        Pusher: template.Pusher,
        PushMode: push_mode.join(','),
        PushPath: template.PushPath,
        IsStarted: isUse,
        MsgTemplateID: fv.message_template ? fv.message_template : MES_ITEMS[0].Id,
        AppTemplateID: fv.app_template ? fv.app_template : APP_ITEMS[0].Id,
        WebTemplateID: fv.web_template ? fv.web_template : WEB_ITEMS[0].Id,
        PushGroup: fv.to_person ? fv.to_person.toString() : '',
        WorkWeiXinTemplateId: bb,
        WebIcon: fv.webIcon,
        Title: fv.Title,
      };
      InsertMessageConfig(b).then(res => {
        if (res.code === 0) {
          if (IISConfig) {
            // eslint-disable-next-line no-shadow
            AddIISAgentConfig(IISConfig).then(res => {
              if (res.code === 0) {
                message.success('保存成功');
                back();
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            });
          } else {
            back();
            message.success('保存成功');
          }
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      });
    }
  };

  const onIISAgentSubmit = value => {
    console.log('value', value);
    setIISConfig(value);
  };

  const onPushSubmit = value => {
    console.log(value, 'onPushSubmit');
  };
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 2,
    },
    wrapperCol: {
      span: 24,
    },
  };
  const onChange = value => {
    setIsUse(value ? '1' : '0');
  };
  const back = () => {
    history.push({
      pathname: '/platform/notification',
      query: {
        currentPage,
      },
    });
  };
  const tailLayout = {
    wrapperCol: { offset: 21, span: 24 },
  };
  const onTypeChange = (value, type) => {
    let data = { ...currentTrench };
    if (type === 'isWEBShow' || type === 'isAPPShow') {
      data.isWEBShow = value;
      data.isAPPShow = value;
    } else {
      data[type] = value;
    }
    setCurrentTrench(data);
  };
  // 推送组选择角色
  const rolCallBack = useCallback(list => {
    console.log(list, 'list');
    let strList = [];
    if (list.length > 0) {
      list.forEach(item => {
        console.log(item, 'item');
        item.checkedList.forEach(ele => {
          strList.push(ele);
        });
      });
      form.setFieldsValue({ to_person: strList.join(',') });
      setShowRoleModal(false);
      console.log(strList.join(','));
    }
  });

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

  const treeSelectOnchange = e => {
    form.setFieldsValue({ web_path: '' });
    getWebMenuInfo({
      menuID: e,
      _dc: Date.now(),
    })
      .then(res => {
        if (res.code === 0) {
          let symbol = res.data.pageUrl.indexOf('|');
          let widget = res.data.pageUrl.indexOf('widget');
          if (symbol == -1) {
            form.setFieldsValue({ web_path: `${res.data.pageUrl}|widget=${e}`.replace(/\s/g, '') });
            setTreeSelectValue(`${res.data.pageUrl}|widget=${e}`.replace(/\s/g, ''));
          } else if (widget == -1) {
            form.setFieldsValue({ web_path: `${res.data.pageUrl}&widget=${e}`.replace(/\s/g, '') });
            setTreeSelectValue(`${res.data.pageUrl}&widget=${e}`.replace(/\s/g, ''));
          } else {
            form.setFieldsValue({ web_path: res.data.pageUrl });
            setTreeSelectValue(res.data.pageUrl);
          }
        } else {
          notification.error({
            message: '提示',
            duration: 10,
            description: res.msg || '获取失败',
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const treeSelectOnchangeMoblie = e => {
    form.setFieldsValue({ app_path: '' });
    getMenuInfo({
      menuID: e,
    })
      .then(res => {
        if (res.code === 0) {
          form.setFieldsValue({ app_path: res.data.pageUrl });
          setTreeSelectValueMoblie(res.data.pageUrl);
        } else {
          notification.error({
            message: '提示',
            duration: 10,
            description: res.msg || '获取失败',
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    // console.log(org);
    if (org.key) {
      if (haveChildren) {
        return (
          <TreeNode
            value={org.menuID}
            title={org.text}
            icon={org.key ? <DesktopOutlined /> : <FolderFilled />}
            disabled
          >
            {org.children.map(item => mapTree(item))}
          </TreeNode>
        );
      }
      return <TreeNode value={org.menuID} title={org.text} icon={<DesktopOutlined />} disabled />;
    }
    return haveChildren ? (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={org.key ? <DesktopOutlined /> : <FolderFilled />}
        disabled
      >
        {org.children.map(item => mapTree(item))}
      </TreeNode>
    ) : (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={
          org.menuType == 'Web4MenuGroup' ? (
            <FolderFilled />
          ) : (
            <FileOutlined style={{ color: '#1890ff' }} />
          )
        }
        disabled={org.menuType == 'Web4MenuGroup'}
      />
    );
  };

  const mapTreeMoblie = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    if (org.key) {
      if (haveChildren) {
        return (
          <TreeNode
            value={org.menuID}
            title={org.text}
            icon={org.key ? <MobileOutlined /> : <FolderFilled />}
            disabled
          >
            {org.children.map(item => mapTreeMoblie(item))}
          </TreeNode>
        );
      }
      return <TreeNode value={org.menuID} title={org.text} icon={<MobileOutlined />} disabled />;
    }
    return haveChildren ? (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={org.key ? <MobileOutlined /> : <FolderFilled />}
        disabled
      >
        {org.children.map(item => mapTreeMoblie(item))}
      </TreeNode>
    ) : (
      <TreeNode
        value={org.menuID}
        title={org.text}
        icon={
          org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo' ? (
            <FolderFilled />
          ) : (
            <FileOutlined style={{ color: '#1890ff' }} />
          )
        }
        disabled={org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo'}
      />
    );
  };

  const filterTreeNode11 = (inputValue, treeNode) => treeNode.title.indexOf(inputValue) > -1;

  const onSearchApp = e => {
    console.log(e);
    if (e) {
      form.setFieldsValue({ app_path: e });
    }
  };

  const onSearchWeb = e => {
    console.log(e);
    if (e) {
      form.setFieldsValue({ web_path: e });
    }
  };

  const onOk = props => {
    console.log(props);
    if (props) {
      setImageUrl(`${window.location.origin}/${props}`);
      setIm(props);
      setKeepImgeUrl(props);
      form.setFieldsValue({ webIcon: `${props}` });
    }
    setShow('hidden');
  };
  return (
    <div className={styles.editModal_container}>
      <Form form={form} onFinish={onSubmit}>
        <div className={styles.content}>
          <Card title="方案" style={{ width: '100%' }}>
            <Row>
              <Col span={11}>
                <Item
                  label="方案名称"
                  name="name"
                  labelAlign="right"
                  rules={[
                    {
                      required: true,
                      message: '请输入方案名称',
                    },
                    {
                      validator: (rule, value) => {
                        let aa = form.getFieldValue().name;
                        if (!template.ThemeName && nameList.indexOf(aa) != -1) {
                          return Promise.reject('方案名称重复');
                        }
                        if (
                          template.ThemeName &&
                          nameList.indexOf(aa) != -1 &&
                          aa != template.name
                        ) {
                          return Promise.reject('方案名称重复');
                        }
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <Input
                    style={{ width: '25rem' }}
                    placeholder="请输入方案名称"
                    disabled={!!template.ThemeName}
                    onChange={onNameChange}
                  />
                </Item>
              </Col>
              <Col span={12}>
                <Item label="消息标题" name="Title" labelCol={{ span: 5 }}>
                  <Input placeholder="请输入标题" style={{ width: '25rem' }} />
                </Item>
              </Col>
            </Row>
            <Item label="方案类型" labelAlign="right" style={{ marginLeft: '12px' }}>
              <div className={styles.cardList}>
                {listType.map(item => (
                  <div key={item.title} className={styles.cardListItem}>
                    {item.title != '自定义' && item.title != '定时推送' ? (
                      <span
                        style={{
                          display: 'inline-block',

                          width: '88px',
                          marginLeft: '16px',
                        }}
                      >
                        {item.title}:
                      </span>
                    ) : (
                      <Button
                        type={item.title === btnType ? 'primary' : 'default'}
                        style={{ marginRight: '1rem', width: '88px' }}
                        onClick={() => {
                          setBtnType(item.title);
                        }}
                        disabled={hidden}
                      >
                        {item.title}
                      </Button>
                    )}

                    <span>{item.desc}</span>
                  </div>
                ))}
              </div>
            </Item>
            <Item label="是否启用" labelAlign="right" style={{ marginLeft: '12px' }}>
              <Switchs checked={isUse !== '0'} onChange={onChange} />
            </Item>
          </Card>
          {btnType === '定时推送' ? (
            <Card title="推送计划" style={{ width: '100%', marginTop: '1rem' }}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Item labelCol={{ span: 5 }}>
                  <div style={{ display: 'flex' }}>
                    <Item
                      label="推送组"
                      name="to_person"
                      style={{ marginTop: '50px', marginLeft: '32px' }}
                    >
                      <Input disabled />
                    </Item>
                    <IdcardOutlined
                      onClick={() => {
                        setShowRoleModal(true);
                      }}
                      style={{
                        marginTop: '58px',
                        marginLeft: '10px',
                        fontSize: '22px',
                        color: '#1890FF',
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                  {/* <VisibleRoleModal
                    style={{
                      display: 'flex',
                      width: '35rem',
                      alignItems: 'center',
                    }}
                    onSubmit={onPushSubmit}
                    selectValue={
                      template && template.PushGroup ? template.PushGroup : []
                    }
                    title={
                      <UsergroupDeleteOutlined style={{ fontSize: '18px' }} />
                    }
                  /> */}
                </Item>

                <div
                  style={{
                    display: 'flex',
                    width: '30rem',
                    margin: '0 2rem',
                    alignItems: 'center',
                  }}
                >
                  定时任务:{' '}
                  <VisibleIISAgentConfig
                    agentConfig={template.item && template.item.AgentConfig}
                    value={plan}
                    onIISAgentSubmit={onIISAgentSubmit}
                  />
                </div>
              </div>
            </Card>
          ) : (
            <></>
          )}
          <div className={styles.push_trench}>
            <Row>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>WEB</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isWEBShow')}
                        checked={currentTrench.isWEBShow}
                      />
                    </div>
                    <div className={styles.card_body}>
                      <Item label="模板" name="web_template" labelCol={{ span: 5 }}>
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWEBShow}>
                          {WEB_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>

                      <Item
                        label="图标"
                        name="WebIcon"
                        style={{ height: '82px' }}
                        labelCol={{ span: 5 }}
                      >
                        {imageUrl ? (
                          <div
                            style={{
                              width: '74px',
                              height: '74px',
                              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: '#bfbfbf',
                              }}
                            />

                            {show == 'visible' && currentTrench.isWEBShow ? (
                              <>
                                <div className={styles.imgg} />
                                <DeleteOutlined
                                  onClick={() => {
                                    setImageUrl('');
                                    setIm('');
                                    setKeepImgeUrl('');
                                    form.setFieldsValue({ webIcon: '' });
                                  }}
                                  style={{
                                    position: 'absolute',
                                    fontSize: '18px',
                                    left: '12px',
                                    top: '25px',
                                    color: 'white',
                                    zIndex: '999',
                                  }}
                                />
                                <PictureOutlined
                                  onClick={pictruePreview}
                                  style={{
                                    position: 'absolute',
                                    fontSize: '18px',
                                    left: '40px',
                                    top: '25px',
                                    color: 'white',
                                    zIndex: '999',
                                  }}
                                />
                              </>
                            ) : (
                              <></>
                            )}
                          </div>
                        ) : (
                          <Image
                            width="74px"
                            // height={100}
                            src="error"
                            onClick={
                              currentTrench.isWEBShow
                                ? () => {
                                  pictruePreview();
                                  }
                                : ''
                            }
                            fallback="data:image/png;base64,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"
                          />
                        )}
                      </Item>

                      <Item label="功能路径" name="web_path" labelCol={{ span: 5 }}>
                        {/* <TextArea
                          rows={1}
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWEBShow}
                          placeholder="请输入功能路径"
                        /> */}
                        <TreeSelect
                          showSearch
                          treeNodeFilterProp="title"
                          // filterTreeNode={filterTreeNode11}
                          style={{ width: '97%' }}
                          value={treeSelectValue}
                          disabled={!currentTrench.isWEBShow}
                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                          placeholder="请选择功能路径"
                          allowClear
                          treeDefaultExpandAll
                          treeIcon
                          onChange={treeSelectOnchange}
                          onSearch={onSearchWeb}
                        >
                          {menuWebList ? (
                            menuWebList.map(i => mapTree(i))
                          ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                          )}
                        </TreeSelect>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>APP</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isAPPShow')}
                        checked={currentTrench.isAPPShow}
                      />
                    </div>
                    <div className={styles.card_body}>
                      <Item label="模板" name="app_template" labelCol={{ span: 5 }}>
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isAPPShow}>
                          {APP_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
                      <Item label="功能路径" name="app_path" labelCol={{ span: 5 }}>
                        {/* <TextArea
                          rows={1}
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isAPPShow}
                          placeholder="请输入功能路径"
                        /> */}
                        <TreeSelect
                          showSearch
                          treeNodeFilterProp="title"
                          style={{ width: '97%' }}
                          value={treeSelectValueMoblie}
                          disabled={!currentTrench.isAPPShow}
                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                          placeholder="请选择功能路径"
                          allowClear
                          treeDefaultExpandAll
                          treeIcon
                          onSearch={onSearchApp}
                          onChange={treeSelectOnchangeMoblie}
                        >
                          {menuMoblieList ? (
                            menuMoblieList.map(i => mapTreeMoblie(i))
                          ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                          )}
                        </TreeSelect>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>公众号</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isWXShow')}
                        checked={currentTrench.isWXShow}
                      />
                    </div>
                    <div className={styles.card_body}>
                      <Item label="模板" name="wx_template" labelCol={{ span: 5 }}>
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isWXShow}>
                          {WX_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
                      <Item label="H5路由" name="h5_path" labelCol={{ span: 5 }}>
                        <Input
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWXShow}
                          placeholder="请输入功能路径"
                        />
                      </Item>
                      <Item label="小程序路由" name="miniprogram_path" labelCol={{ span: 5 }}>
                        <Input
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isWXShow}
                          placeholder="请输入功能路径"
                        />
                      </Item>
                    </div>
                  </div>
                }
              </Col>

              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>短信推送</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isMessageShow')}
                        checked={currentTrench.isMessageShow}
                      />
                    </div>
                    <div className={styles.card_body}>
                      <Item label="模板" name="message_template" labelCol={{ span: 5 }}>
                        <Select style={{ width: '97%' }} disabled={!currentTrench.isMessageShow}>
                          {MES_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
              <Col xxl={8} xl={12} sm={24} xs={24}>
                {
                  <div className={styles.trench_card}>
                    <div className={styles.card_title}>
                      <div className={styles.lable}>企业微信</div>
                      <Switchs
                        onChange={e => onTypeChange(e, 'isEnterpriseWXShow')}
                        checked={currentTrench.isEnterpriseWXShow}
                      />
                    </div>
                    <div className={styles.card_body}>
                      <Item label="模板" name="enterprise_template" labelCol={{ span: 5 }}>
                        <Select
                          style={{ width: '97%' }}
                          disabled={!currentTrench.isEnterpriseWXShow}
                        >
                          {EN_ITEMS.map((item, idx) => (
                            <Select.Option value={item.Id} key={idx}>
                              {item.LikeName}
                            </Select.Option>
                          ))}
                        </Select>
                      </Item>
                    </div>
                  </div>
                }
              </Col>
            </Row>
          </div>
        </div>
        <Row>
          <Col span={24}>
            <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
              <Button htmlType="button" onClick={back} style={{ marginRight: '20px' }}>
                返回
              </Button>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </div>
          </Col>
        </Row>
      </Form>
      <div />
      <PreviewModal
        visible={previewModal}
        onCancel={() => {
          setPreviewModal(false);
        }}
        imageUrl={im}
        keepImgeUrl={keepImgeUrl}
        type={type}
        imgDataList={imgDataList}
        callBackSubmit={onOk}
      />
      <RoleModal
        selectValue={form.getFieldValue('to_person')}
        visible={showRoleModal}
        rolCallBack={roleList => rolCallBack(roleList)}
        onCancel={() => {
          setShowRoleModal(false);
        }}
      />
    </div>
  );
};
export default EditModal;