import React, { useEffect, useState, useRef } from 'react';
import {
  Drawer,
  Form,
  Space,
  Button,
  Input,
  Select,
  Divider,
  Table,
  Tooltip,
  Popconfirm,
  message,
} from 'antd';
import lodash from 'lodash';
import {
  DeleteOutlined,
  EditTwoTone,
  PlusCircleOutlined,
  PlusOutlined,
  SaveFilled,
} from '@ant-design/icons';
import RoalChoose from './nodeModalComponents/RoalChoose';
import Undertaker from './nodeModalComponents/Undertaker';
import ConfigSubprocess from './nodeModalComponents/ConfigSubprocess';

import RuleConfig from '@/components/RuleConfig';
import PeopleSelector from '@/components/PeopleSelector';

import styles from './NodeModal.less';
import { GetFormDataSource } from '@/services/workflow/workflow';

const { Option } = Select;
let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
let chnUnitChar = ['', '十', '百', '千'];
const NodeModal = props => {
  const { flowData, onSubumit, handleCancel, visible, editMsg, flowID } = props;
  const [form] = Form.useForm();
  const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
  const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
  const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
  const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
  const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
  const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
  const [ruleIndex, setRuleIndex] = useState(); // 编辑当前规则索引
  const [nodeMsg, setNodeMsg] = useState({
    NodeName: '',
    NodeType: '',
    SerialNo: '',
    aheadHandle: 1,
    NodeHandling: 1,
    roleList: [],
    nodeDetail: {},
    RuleList: {},
    CarbonCopyPeopleList: {},
  });
  // const [CarbonCopyPeopleList, setCarbonCopyPeopleList] = useState([]); // 抄送人列表
  // const [RuleList, setRuleList] = useState([]); // 规则配置列表
  const [flag, setFlag] = useState(0); // 用于刷新界面
  const [fieldList, setFieldList] = useState([]); // 当规则字段
  const allFieldList = useRef([]);
  const nextlinkNodes = useRef([]);
  const previousLinkNodes = useRef([]);
  const RuleList = useRef([]); // 规则配置列表
  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
  const talbeList = useRef([]);
  const subNodeMsg = useRef({});
  useEffect(() => {
    form.resetFields();
    nextlinkNodes.current = [];
    previousLinkNodes.current = [];
    talbeList.current = [];
    RuleList.current = [];

    CarbonCopyPeopleList.current = [];
    if (visible) {
      console.log(editMsg, 'editMsg');
      // 获取网关连接的节点
      if (editMsg.NodeType === '21' || editMsg.NodeType === '20') {
        getNextLinkNodes(editMsg.key);

        // getPreviousLinkNodes(editMsg.key);
        // setRuleList(editMsg.RuleList);
        RuleList.current = editMsg.RuleList;

        // 获取表数据
        GetFormDataSource({ flowID }).then(res => {
          let list = new Set(talbeList.current);
          allFieldList.current = [];
          res.data.forEach(item => {
            if (!allFieldList.current.some(ele => ele.TableName === item.TableName)) {
              allFieldList.current.push({
                TableFieldNames: item.TableFieldNames,
                TableName: item.TableName,
              });
            }
            list.add(item.TableName);
            // if (previousLinkNodes.current.some(ele => ele.NodeName === item.NodeName)) {
            //   list.add(item.TableName);
            // }
          });
          talbeList.current = [...list];
          console.log(nextlinkNodes.current, 'nextlinkNodes.current');
          setFlag(flag + 1);
        });
      } else {
        // setCarbonCopyPeopleList(editMsg.CarbonCopyPeopleList);
        CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
        setFlag(flag + 1);
      }

      getFormData();
      console.log(form.getFieldValue(), 'getFieldValue');
    } else {
      nextlinkNodes.current = [];
      previousLinkNodes.current = [];
      talbeList.current = [];

      RuleList.current = [];

      CarbonCopyPeopleList.current = [];
      setFlag(flag + 1);
    }
  }, [visible, editMsg]);
  const SectionToChinese = section => {
    let strIns = '';
    let chnStr = '';
    let unitPos = 0;
    let zero = true;
    while (section > 0) {
      let v = section % 10;
      if (v === 0) {
        if (!zero) {
          zero = true;
          chnStr = chnNumChar[v] + chnStr;
        }
      } else {
        zero = false;
        strIns = chnNumChar[v];
        strIns += chnUnitChar[unitPos];
        chnStr = strIns + chnStr;
      }
      // eslint-disable-next-line no-plusplus
      unitPos++;
      section = Math.floor(section / 10);
    }
    return chnStr;
  };
  const NumberToChinese = num => {
    let unitPos = 0;
    let strIns = '';
    let chnStr = '';
    let needZero = false;

    if (num === 0) {
      return chnNumChar[0];
    }

    while (num > 0) {
      let section = num % 10000;
      if (needZero) {
        chnStr = chnNumChar[0] + chnStr;
      }
      strIns = SectionToChinese(section);
      strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
      chnStr = strIns + chnStr;
      needZero = section < 1000 && section > 0;
      num = Math.floor(num / 10000);
      // eslint-disable-next-line no-plusplus
      unitPos++;
    }

    return chnStr;
  };
  // 获取被网关连接的节点
  const getNextLinkNodes = key => {
    flowData.linkDataArray.forEach(item => {
      if (item.from === key) {
        let linkNode = flowData.nodeDataArray.find(ele => ele.key === item.to);
        if (linkNode.NodeType === '20') {
          getNextLinkNodes(linkNode.key);
        } else if (!nextlinkNodes.current.some(ele => ele.key === linkNode.key)) {
          nextlinkNodes.current.push(linkNode);
        }
      }
    });
  };
  // 获取当前网关之前所有节点
  const getPreviousLinkNodes = key => {
    flowData.linkDataArray.forEach(item => {
      // 判断节点是否为第一个节点
      let isFistNode = flowData.linkDataArray.some(ele => ele.to === item.form);
      // 当前线的指向节点是当前双击节点并且不是第一节点继续往下找
      if (item.to === key && !isFistNode) {
        // 指向当前节点的节点
        let lastNode = flowData.nodeDataArray.find(ele => ele.key === item.from);
        // 已存节点是否包含指向当前节点的节点
        let hasNode = previousLinkNodes.current.some(ele => ele.key === lastNode.key);
        // 如果没有就存入
        if (!hasNode) {
          previousLinkNodes.current.push(lastNode);
          getPreviousLinkNodes(lastNode.key);
        }
      }
    });
    let list = JSON.parse(JSON.stringify(previousLinkNodes.current));
    previousLinkNodes.current = list.filter(
      item => item.NodeType !== '20' && item.NodeType !== '21',
    );
  };
  // 获取表单回显
  const getFormData = () => {
    const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
    console.log(NodeHandling, 'NodeHandling');
    form.setFieldsValue({
      NodeName,
      NodeType,
      SerialNo,
      aheadHandle: aheadHandle || aheadHandle === 0 ? aheadHandle : 1,
      NodeHandling: NodeHandling || NodeHandling === 0 ? NodeHandling : 1,
    });
    setNodeMsg(editMsg);
  };
  // 提交表单
  const onFinish = () => {
    // 规则填写校验

    for (let i = 0; i < RuleList.current.length; i++) {
      if (!RuleList.current[i].RuleName) {
        message.error('请填写规则名称');
        return;
      }
      if (!RuleList.current[i].NextNodeId && RuleList[i].NextNodeId !== 0) {
        message.error('请选择需要流转的节点');
        return;
      }
      if (!RuleList.current[i].RuleContent) {
        message.error('请填写规则');
        return;
      }
    }
    const newListLength = new Set(RuleList.current.map(item => item.NextNodeId)).size;
    if (RuleList.current.length > newListLength) {
      message.error('规则流转到的节点不能重复');
      return;
    }
    form.validateFields().then(validate => {
      console.log(validate, 'validate');
      if (validate) {
        validate.SerialNo = Number(validate.SerialNo);
        let nodeDetail = JSON.stringify({
          ...validate,
          NodeType: nodeMsg.NodeType,
          roleList: nodeMsg.roleList,
          SubFlowInfo: subNodeMsg.current,
        });
        let obj = {
          ...validate,
          NodeType: nodeMsg.NodeType,
          roleList: nodeMsg.roleList,
          nodeDetail,
          RuleList: RuleList.current,
          CarbonCopyPeopleList: CarbonCopyPeopleList.current,
          SubFlowInfo: subNodeMsg.current,
        };
        console.log(nextlinkNodes.current);
        onSubumit(obj, nextlinkNodes.current);
      }
    });
  };
  // 删除角色
  const delUser = (record, index) => {
    let roleList = [...nodeMsg.roleList];
    roleList.splice(index, 1);
    let nodeDetail = JSON.stringify({
      ...nodeMsg,
      roleList,
      RuleList: RuleList.current,
      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
    });
    setNodeMsg({
      ...nodeMsg,
      roleList,
      nodeDetail,
      RuleList: RuleList.current,
      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
    });
  };
  // 添加角色或机构
  const addUser = selectList => {
    console.log(selectList, 'selectList');
    let nodeDetail = JSON.stringify({
      ...nodeMsg,
      roleList: selectList,
      RuleList: RuleList.current,
      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
    });
    setNodeMsg({
      ...nodeMsg,
      roleList: selectList,
      nodeDetail,
      RuleList: RuleList.current,
      CarbonCopyPeopleList: CarbonCopyPeopleList.current,
    });
    setShowRoal(false);
  };
  // 添加默认承办人
  const addUnderTaker = (userName, userId) => {
    let list = JSON.parse(JSON.stringify(nodeMsg.roleList));
    console.log(list, 'list');
    console.log(editIndex, 'editIndex');
    list[editIndex].defauletUserName = userName;
    list[editIndex].defaultUserId = userId;
    let nodeDetail = JSON.stringify({ ...nodeMsg, roleList: list });
    setNodeMsg({ ...nodeMsg, roleList: list, nodeDetail });
    setShowUnderTaker(false);
  };
  // 编辑默认承办人
  const toEdit = (record, index) => {
    setEditIndex(index);
    setChooseUser(record);
    setShowUnderTaker(true);
  };
  // 添加规则
  const addRule = () => {
    console.log(fieldList, 'fieldList');
    console.log(nextlinkNodes.current, RuleList.current, 'nextlinkNodes.current');
    if (nextlinkNodes.current.length === 0) {
      message.error('请连接需要添加规则的节点');
      return;
    }
    if (RuleList.current.length === nextlinkNodes.current.length) {
      message.error('请连接需要添加规则的节点');
      return;
    }
    let list = JSON.parse(JSON.stringify(RuleList.current));
    list.push({ RuleContent: '', NextNodeId: '', TableNames: '', RuleName: '' });
    // setRuleList(list);
    RuleList.current = list;
    setFlag(flag + 1);
  };
  // 删除规则
  const deleRule = index => {
    let list = JSON.parse(JSON.stringify(RuleList.current));
    list.splice(index, 1);
    // setRuleList(list);
    RuleList.current = list;
    setFlag(flag + 1);
  };
  // 规则回填
  const saveRule = e => {
    let list = JSON.parse(JSON.stringify(RuleList.current));
    console.log(e);
    list[ruleIndex].RuleContent = e;
    console.log(list, 'listlist');
    // setRuleList(list);
    RuleList.current = list;
    setShowRule(false);
  };
  // 选择人员回填
  const savePerson = e => {
    console.log(e);
    // setCarbonCopyPeopleList(e);
    CarbonCopyPeopleList.current = e;
    setShowPersonSelect(false);
  };
  // 网关表单配置监听
  const formChage = (e, index, field) => {
    let list = lodash.cloneDeep(RuleList.current);
    if (field === 'TableNames') {
      list[index][field] = e.join(',');
    }
    if (field === 'RuleName') {
      e.persist();
      list[index][field] = e.target.value;
    } else {
      list[index][field] = e;
    }

    // setRuleList(list);
    RuleList.current = list;
    setFlag(flag + 1);
  };
  // 配置当前规则
  const editRule = (msg, index) => {
    console.log(msg, 'masgasdg');
    // let listfleld = msg.TableNames.split(',');

    let listfleld = talbeList.current;
    let list = [
      {
        TableFieldNames: [
          '上报人名称',
          '上报人部门',
          '上报站点',
          '处理站点',
          '更新时间',
          '上报时间',
        ],
        TableName: '内部字段',
      },
    ];
    console.log(listfleld, allFieldList.current, 'listfleld1111');
    listfleld.forEach(item => {
      console.log(allFieldList.current.find(ele => ele.TableName === item), 'aaaaaa');
      let obj = allFieldList.current.find(ele => ele.TableName === item);
      if (obj.TableName && obj.TableFieldNames?.length > 0) {
        list.push({
          TableFieldNames: obj.TableFieldNames,
          TableName: obj.TableName,
        });
      }
    });
    console.log(list, 'listfleld');
    setFieldList(list);
    setRuleIndex(index);
    setShowRule(true);
  };
  // 配置当前节点抄送人
  const editCC = () => {
    setShowPersonSelect(true);
  };
  const getSubNodeMsg = msg => {
    console.log(msg, 'asdgfasdg');
    subNodeMsg.current = msg;
  };
  // 定义表格
  const columns = [
    {
      title: '名称',
      dataIndex: 'roleName',
      align: 'left',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      align: 'center',
      width: 60,

      filters: [
        {
          text: '角色',
          value: 2,
        },
        {
          text: '机构',
          value: 1,
        },
      ],
      onFilter: (value, record) => record.type === value,
      render: text => (text === 2 ? '角色' : '机构'),
    },
    {
      title: '默认承办人',
      dataIndex: 'defauletUserName',
      align: 'center',
      ellipsis: {
        showTitle: false,
      },
      width: 90,
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text || '（无）'}
        </Tooltip>
      ),
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      width: 60,
      render: (text, record, index) => (
        <>
          <Space>
            <Tooltip title="编辑默认承办人">
              <EditTwoTone
                onClick={() => toEdit(record, index)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
            <Tooltip title="删除角色或机构">
              <DeleteOutlined
                onClick={() => delUser(record, index)}
                style={{ fontSize: '16px', color: '#e86060' }}
              />
              {/* <Popconfirm
                title="是否删除该角色或机构?"
                onConfirm={() => delUser(record, index)}
                onCancel={() => message.error('取消删除')}
                okText="是"
                cancelText="否"
              >
                <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
              </Popconfirm> */}
            </Tooltip>
          </Space>
        </>
      ),
    },
  ];

  return (
    <>
      {/* <div style={{ height: 200, width: 425, position: 'relative' }}> */}
      <Drawer
        title={null}
        closable={false}
        width="25%"
        onClose={handleCancel}
        visible={visible}
        mask={false}
        bodyStyle={{ paddingBottom: 20 }}
        getContainer={false}
        style={{
          position: 'absolute',
        }}
        keyboard={false}
        zIndex={19}
        footer={
          <Space>
            <Button onClick={handleCancel}>取消</Button>
            <Button onClick={onFinish} type="primary">
              应用
            </Button>
          </Space>
        }
      >
        {/* <div className={styles.nodeConfig}> */}
        <Divider
          orientation="left"
          style={{
            borderTopColor: '#99bbe8',
            color: '#15428b',
            fontWeight: 700,
          }}
        >
          {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
            ? '网关'
            : '节点'}
          信息
        </Divider>
        <div className={styles.titleBox}>
          {/* 条件网关 */}
          <p style={{ display: form?.getFieldValue('NodeType') === '20' ? 'block' : 'none' }}>
            条件网关：客户端填写表单内容，根据设置的条件规则以及出口的目标节点，进行全规则匹配，确定最终流转节点。
          </p>
          {/* 汇合网关 */}
          <p style={{ display: form?.getFieldValue('NodeType') === '21' ? 'block' : 'none' }}>
            汇合网关：等待所有的入口分支流程全部完成，自动移交到下一节点，汇合网关支持规则配置。
          </p>
          {/* 并行网关 */}
          <p style={{ display: form?.getFieldValue('NodeType') === '22' ? 'block' : 'none' }}>
            并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
          </p>
        </div>
        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelAlign="left">
          <Form.Item
            label="排序"
            name="SerialNo"
            rules={[{ required: true, message: '请输入排序' }]}
          >
            <Input placeholder="请输入序号" />
          </Form.Item>
          <Form.Item
            label={`${
              nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
                ? '网关'
                : '节点'
            }名称`}
            name="NodeName"
            rules={[{ required: true, message: '请输入节点名称' }]}
          >
            <Input
              placeholder={`请输入${
                nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
                  ? '网关'
                  : '节点'
              }名称`}
            />
          </Form.Item>

          <div style={{ display: 'none' }}>
            <Form.Item label="检查前面在办" name="aheadHandle">
              <Select>
                <Option value={1}>前面有在办不能移交</Option>
                <Option value={0}>前面有在办可以移交</Option>
              </Select>
            </Form.Item>
          </div>
          <div
            style={{
              display:
                form?.getFieldValue('NodeType') === '1' ||
                form?.getFieldValue('NodeType') === '2' ||
                form?.getFieldValue('NodeType') === '20' ||
                form?.getFieldValue('NodeType') === '21' ||
                form?.getFieldValue('NodeType') === '22' ||
                form?.getFieldValue('NodeType') === '30'
                  ? 'none'
                  : 'block',
            }}
          >
            <Form.Item label="办理方式" name="NodeHandling">
              <Select>
                <Option value={1}>多人接收，一人办理（抢占模式）</Option>
                <Option value={0}>多人接收，多人办理（会签模式）</Option>
                <Option value={2}>一人接收，一人办理</Option>
              </Select>
            </Form.Item>
          </div>
        </Form>

        <div
          style={{
            display:
              form?.getFieldValue('NodeType') === '20' ||
              form?.getFieldValue('NodeType') === '21' ||
              form?.getFieldValue('NodeType') === '22'
                ? 'none'
                : 'block',
          }}
        >
          <Divider
            orientation="left"
            style={{
              borderTopColor: '#99bbe8',
              color: '#15428b',
              fontWeight: 700,
            }}
          >
            承办管理
          </Divider>
          <div
            style={{
              widnt: '100%',
              marginBottom: '10px',
              display: 'flex',
              justifyContent: 'right',
            }}
          >
            <Button
              onClick={() => {
                setShowRoal(true);
              }}
              type="primary"
            >
              设置
            </Button>
          </div>

          <Table
            dataSource={nodeMsg.roleList}
            columns={columns}
            rowKey={record => record.roleId}
            bordered
            size="small"
            scroll={{ y: 'calc(100vh - 630px)' }}
            onRow={(record, index) => ({
              onDoubleClick: () => {
                toEdit(record, index);
              },
            })}
            pagination={false}
          />
          <Divider
            orientation="left"
            style={{
              borderTopColor: '#99bbe8',
              color: '#15428b',
              fontWeight: 700,
            }}
          >
            节点抄送人
          </Divider>
          <div className={styles.buttonBox} onClick={() => editCC()}>
            <div
              className={styles.setButton}
              style={{ textAlign: CarbonCopyPeopleList.current.length > 0 ? 'left' : 'center' }}
            >
              <Tooltip title={CarbonCopyPeopleList.current.map(item => item.label).join(',')}>
                <span>
                  {CarbonCopyPeopleList.current.length > 0
                    ? CarbonCopyPeopleList.current.map(item => item.label).join(',')
                    : '选择抄送人'}
                </span>
              </Tooltip>
            </div>
            <div className={styles.addIcon}>
              <PlusOutlined />
            </div>
          </div>
          {form?.getFieldValue('NodeType') === '30' && (
            <ConfigSubprocess nodeMsg={nodeMsg} flowID={flowID} getSubNodeMsg={getSubNodeMsg} />
          )}
        </div>
        <div
          style={{
            display:
              form?.getFieldValue('NodeType') !== '20' &&
              form?.getFieldValue('NodeType') !== '21' &&
              form?.getFieldValue('NodeType')
                ? 'none'
                : 'block',
          }}
        >
          <Divider
            orientation="left"
            style={{
              borderTopColor: '#99bbe8',
              color: '#15428b',
              fontWeight: 700,
              // margin: '30px 0 10px 0',
            }}
          >
            规则配置
          </Divider>
          <div className={styles.titleBox}>
            当满足规则配置时，会根据规则流转到对应的节点；
            <br />
            当不设置条件时，默认需要人为选择流转到哪个节点。
          </div>
          <div className={styles.btnAddRule} onClick={addRule}>
            <PlusCircleOutlined style={{ marginRight: '10px' }} />
            添加规则
          </div>
          <div className={styles.ruleContent}>
            {RuleList.current.map((item, index) => (
              <div className={styles.ruleBox} key={index}>
                <div className={styles.ruleTitle}>
                  <div className={styles.textContet}>规则{NumberToChinese(index + 1)}</div>
                  <DeleteOutlined style={{ cursor: 'pointer' }} onClick={() => deleRule(index)} />
                </div>
                <div className={styles.formBox}>
                  <div className={styles.label}>规则名称：</div>
                  <div className={styles.item}>
                    <Input
                      style={{ width: '100%' }}
                      value={item.RuleName}
                      placeholder="请输入规则名称"
                      onChange={e => {
                        formChage(e, index, 'RuleName');
                      }}
                    />
                  </div>
                </div>
                <div className={styles.formBox}>
                  <div className={styles.label}>设置规则流转到：</div>
                  <div className={styles.item}>
                    <Select
                      style={{ width: '100%' }}
                      value={item.NextNodeId}
                      onChange={e => {
                        formChage(e, index, 'NextNodeId');
                      }}
                    >
                      {nextlinkNodes.current.map(ele => (
                        <Option value={ele.NodeId} key={ele.NodeName}>
                          {ele.NodeName}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </div>
                {/* <div className={styles.formBox}>
                  <div className={styles.label}>选择业务表单：</div>
                  <div className={styles.item}>
                    <Select
                      style={{ width: '100%' }}
                      onChange={e => {
                        formChage(e, index, 'TableNames');
                      }}
                      value={item.TableNames ? item.TableNames.split(',') : []}
                      mode="multiple"
                    >
                      {talbeList.current.map(ele => (
                        <Option value={ele} key={ele}>
                          {ele}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </div> */}
                <div className={styles.buttonBox} onClick={() => editRule(item, index)}>
                  <div
                    className={styles.setButton}
                    style={{ textAlign: item.RuleContent ? 'left' : 'center' }}
                  >
                    <Tooltip title={item.RuleContent}>
                      <span>{item.RuleContent ? item.RuleContent : '设置条件'} </span>
                      {/* <span>{item.RuleContent} </span> */}
                    </Tooltip>
                  </div>
                  <div className={styles.addIcon}>
                    <PlusOutlined />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* </div> */}
      </Drawer>
      {/* </div> */}
      <RoalChoose
        roleList={nodeMsg.roleList}
        visible={showRoal}
        handleCancel={() => setShowRoal(false)}
        onSubumit={addUser}
      />
      <Undertaker
        chooseUser={chooseUser}
        visible={showUnderTaker}
        handleCancel={() => setShowUnderTaker(false)}
        onSubumit={addUnderTaker}
      />
      <RuleConfig
        RuleContent={RuleList.current[ruleIndex]?.RuleContent}
        fieldList={fieldList}
        visible={showRule}
        handleCancel={() => setShowRule(false)}
        onSubumit={e => saveRule(e)}
        flag={1}
      />
      <PeopleSelector
        visible={showPersonSelect}
        personList={CarbonCopyPeopleList.current}
        onCancel={() => setShowPersonSelect(false)}
        onSubumit={e => savePerson(e)}
      />
    </>
  );
};
export default NodeModal;
