/* eslint-disable no-else-return */
/* eslint-disable no-cond-assign */
/* eslint-disable react/no-array-index-key */
/* eslint-disable no-undef */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable camelcase */
/* eslint-disable react/jsx-no-undef */
/* eslint-disable valid-typeof */
/* eslint-disable no-unused-vars */
/* eslint-disable consistent-return */
/* eslint-disable no-shadow */
/* eslint-disable indent */
/* eslint-disable no-unused-expressions */
/* eslint-disable array-callback-return */
/* eslint-disable eqeqeq */
/* eslint-disable no-plusplus */
import React, { useState, useEffect } from 'react';
import { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty, Tag, Divider } from 'antd';
import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api';

import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
const { TabPane } = Tabs;
const RMSComponents = props => {
  const {
    callBackSubmit = () => {},
    pickItem,
    visible,
    newCheckedList,
    groupName,
    chooseGroupName,
    keepFiled,
  } = props;
  const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [total, setTotal] = useState();
  const [pageSize, setPageSize] = useState(45);
  const [currentPage, setCurrentPage] = useState(1);
  const [checkDataRole, setCheckDataRole] = useState([]);
  const [checkDataPm, setCheckDataPm] = useState([]);
  const [checkDataSite, setCheckDataSite] = useState([]);
  const [saveCheckValue, setSaveCheckValue] = useState([]); // 保存选中值
  const [keepTabKey, setKeepTabKey] = useState(0); // 保存tabs的key
  const [keyValue, setKeyValue] = useState('0');
  const [emptyValue, setEmptyValue] = useState(0);
  const [selected, setSelected] = useState(new Map()); // 已勾选角色列表
  const [optionValue, setOptionValue] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [indeterminate1, setIndeterminate1] = useState(false);
  const [checkAll1, setCheckAll1] = useState(false);
  const [indeterminate2, setIndeterminate2] = useState(false);
  const [checkAll2, setCheckAll2] = useState(false);

  const onSubmit = () => {
    let selectData = [];
    selected.forEach((val, key) => {
      selectData.push(val.value);
    });
    callBackSubmit({
      str: selectData.join(','),
      pickItem,
      stt: selectData,
    });
    setKeyValue('0');
    setSearchWord('');
  };

  useEffect(() => {
    if (visible) {
      if (groupName == '角色') {
        setKeyValue('0');
        setKeepTabKey(0);
      } else if (groupName == '部门') {
        setKeyValue('1');
        setKeepTabKey(1);
      } else if (groupName == '站点') {
        setKeyValue('2');
        setKeepTabKey(2);
      }
      getRoles(groupName, '', pageSize, 1, 0);
      let checkArr = [];
      // 角色
      let listdata = [];
      let listId = [];
      newCheckedList.map(checkItem => {
        keepFiled['角色'].map(i => {
          if (i.label == checkItem) {
            listdata.push(i);
            listId.push(i.value.toString());
          }
        });
      });
      let cs = selected;
      listdata.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
      let dataId = Array.from(new Set(listId));
      setCheckDataRole(dataId); // 用于设置首次展示已选列表角色数据
      checkArr[0] = dataId;
      // 部门
      let pmdata = [];
      let pmId = [];
      newCheckedList.map(checkItem => {
        keepFiled['部门'].map(i => {
          if (i.label == checkItem) {
            pmdata.push(i);
            pmId.push(i.value.toString());
          }
        });
      });
      let cs1 = selected;
      pmdata.map(i => {
        cs1.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs1);
      let datapmId = Array.from(new Set(pmId));
      setCheckDataPm(datapmId);
      checkArr[1] = datapmId;
      // 站点
      let sitedata = [];
      let siteId = [];
      newCheckedList.map(checkItem => {
        keepFiled['站点'].map(i => {
          if (i.label == checkItem) {
            sitedata.push(i);
            siteId.push(i.value.toString());
          }
        });
      });
      let cs2 = selected;
      sitedata.map(i => {
        cs2.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs2);
      let datasiteId = Array.from(new Set(siteId));
      setCheckDataSite(datasiteId);
      checkArr[2] = datasiteId;
      setSaveCheckValue(checkArr);
      setCheckedList(checkArr);
    } else {
      setSelected(new Map());
      setPageSize(45);
      setCurrentPage(1);
      setIndeterminate(false);
      setCheckAll(false);
    }
  }, [visible]);

  const submitSearchUser = () => {
    if (keepTabKey == 0) {
      sreachRoles('角色', searchWord, pageSize, 1);
    }
    if (keepTabKey == 1) {
      sreachRoles('部门', searchWord, pageSize, 1);
    }
    if (keepTabKey == 2) {
      sreachRoles('站点', searchWord, pageSize, 1);
    }
  };

  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  // 监听分页
  const paginationChange = (page, pageSizes) => {
    setCheckAll(false);
    setCheckAll1(false);
    setCheckAll2(false);
    setIndeterminate(false);
    setIndeterminate1(false);
    setIndeterminate2(false);
    if (keepTabKey == 0) {
      getRoles('角色', searchWord, pageSizes, page);
    }
    if (keepTabKey == 1) {
      getRoles('部门', searchWord, pageSizes, page);
    }
    if (keepTabKey == 2) {
      getRoles('站点', searchWord, pageSizes, page);
    }
    setCurrentPage(page);
    setPageSize(pageSizes);
  };

  // 搜索时获取数据
  const sreachRoles = (type, keywords, pageSizes, pageIndex) => {
    CM_Event_LoadDepartmentAndRoles({
      type,
      keywords,
      pageSize: pageSizes,
      pageIndex,
    }).then(res => {
      if (res.msg === 'Ok') {
        setOptionValue(groupArr(res.data, 'groupType'));
        let aa = groupArr(res.data, 'groupType');
        let list = [];
        let data = '';
        if (type == '角色') {
          data = 0;
        } else if (type == '部门') {
          data = 1;
        } else if (type == '站点') {
          data = 2;
        }
        aa[type] &&
          aa[type].map(i => {
            if (checkedList[data].indexOf(i.value) != -1) {
              list.push(i.value);
            }
          });
        if (list.length === aa[type].length) {
          if (type == '角色') {
            setCheckAll(true);
            setIndeterminate(false);
          } else if (type == '部门') {
            setCheckAll1(true);
            setIndeterminate1(false);
          } else if (type == '站点') {
            setCheckAll2(true);
            setIndeterminate2(false);
          }
        } else if (list.length < aa[type].length && list.length !== 0) {
          if (type == '角色') {
            setCheckAll(false);
            setIndeterminate(true);
          } else if (type == '部门') {
            setCheckAll1(false);
            setIndeterminate1(true);
          } else if (type == '站点') {
            setCheckAll2(false);
            setIndeterminate2(true);
          }
        } else if (list.length === 0) {
          if (type == '角色') {
            setCheckAll(false);
            setIndeterminate(false);
          } else if (type == '部门') {
            setCheckAll1(false);
            setIndeterminate1(false);
          } else if (type == '站点') {
            setCheckAll2(false);
            setIndeterminate2(false);
          }
        }
        setCurrentPage(1);
        setTotal(res.data.count);
        if (res.data.count == 0) {
          setEmptyValue(1);
        } else {
          setEmptyValue(0);
        }
      }
    });
  };

  const getRoles = (type, keywords, pageSizes, pageIndex, flag) => {
    CM_Event_LoadDepartmentAndRoles({
      type,
      keywords,
      pageSize: pageSizes,
      pageIndex,
    }).then(res => {
      if (res.msg === 'Ok') {
        setTotal(res.data.count);
        setOptionValue(groupArr(res.data, 'groupType'));
        let aa = groupArr(res.data, 'groupType');
        let list = [];
        let data = '';
        if (type == '角色') {
          data = 0;
        } else if (type == '部门') {
          data = 1;
        } else if (type == '站点') {
          data = 2;
        }
        // 首次进入调用
        if (flag != undefined) {
          let listId = [];
          newCheckedList.map(checkItem => {
            keepFiled[groupName].map(i => {
              if (i.label == checkItem) {
                listId.push(i.value.toString());
              }
            });
          });
          aa[type] &&
            aa[type].map(i => {
              if (listId.indexOf(i.value) != -1) {
                list.push(i.value);
              }
            });
        } else {
          aa[type] &&
            aa[type].map(i => {
              if (checkedList[data].indexOf(i.value) != -1) {
                list.push(i.value);
              }
            });
        }

        if (list.length === aa[type].length) {
          if (type == '角色') {
            setCheckAll(true);
            setIndeterminate(false);
          } else if (type == '部门') {
            setCheckAll1(true);
            setIndeterminate1(false);
          } else if (type == '站点') {
            setCheckAll2(true);
            setIndeterminate2(false);
          }
        } else if (list.length < aa[type].length && list.length !== 0) {
          if (type == '角色') {
            setCheckAll(false);
            setIndeterminate(true);
          } else if (type == '部门') {
            setCheckAll1(false);
            setIndeterminate1(true);
          } else if (type == '站点') {
            setCheckAll2(false);
            setIndeterminate2(true);
          }
        } else if (list.length === 0) {
          if (type == '角色') {
            setCheckAll(false);
            setIndeterminate(false);
          } else if (type == '部门') {
            setCheckAll1(false);
            setIndeterminate1(false);
          } else if (type == '站点') {
            setCheckAll2(false);
            setIndeterminate2(false);
          }
        }
        if (res.data.count == 0) {
          setEmptyValue(1);
        } else {
          setEmptyValue(0);
        }
      }
    });
  };

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

  const handleParChange = key => {
    setKeyValue(key);
    // setSearchWord('');
    setCurrentPage(1);
    setKeepTabKey(key);
    if (key == 0) {
      getRoles('角色', searchWord, pageSize, 1);
    }
    if (key == 1) {
      getRoles('部门', searchWord, pageSize, 1);
    }
    if (key == 2) {
      getRoles('站点', searchWord, pageSize, 1);
    }
  };

  const onChangeListNew = list => {
    let checkedListArr = [...saveCheckValue];
    let data = checkDataRole;
    let DataValue = [];
    if (optionValue['角色']) {
      optionValue['角色'].map(i => {
        if (checkDataRole.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          let hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      let arrList = [];
      keepFiled['角色'] &&
        keepFiled['角色'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      let cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
    }
    checkedListArr[0] = data;
    let listdata = [];
    optionValue['角色'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['角色'].length) {
      setCheckAll(true);
      setIndeterminate(false);
    } else if (listdata.length < optionValue['角色'].length && listdata.length !== 0) {
      setCheckAll(false);
      setIndeterminate(true);
    } else if (listdata.length === 0) {
      setCheckAll(false);
      setIndeterminate(false);
    }
    setCheckDataRole(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };
  const onChangeListNew1 = list => {
    let checkedListArr = [...saveCheckValue];
    let data = checkDataPm;
    let DataValue = [];
    // 拿到当前页数据
    if (optionValue['部门']) {
      optionValue['部门'].map(i => {
        if (checkDataPm.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          let hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      let arrList = [];
      keepFiled['部门'] &&
        keepFiled['部门'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      let cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs);
    }
    checkedListArr[1] = data;
    let listdata = [];
    optionValue['部门'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['部门'].length) {
      setCheckAll1(true);
      setIndeterminate1(false);
    } else if (listdata.length < optionValue['部门'].length && listdata.length !== 0) {
      setCheckAll1(false);
      setIndeterminate1(true);
    } else if (listdata.length === 0) {
      setCheckAll1(false);
      setIndeterminate1(false);
    }
    setCheckDataPm(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };
  const onChangeListNew2 = list => {
    const checkedListArr = [...saveCheckValue];
    let data = checkDataSite;
    let DataValue = [];
    // 拿到当前页数据
    if (optionValue['站点']) {
      optionValue['站点'].map(i => {
        if (checkDataSite.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          let hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      let arrList = [];
      keepFiled['站点'] &&
        keepFiled['站点'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      let cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs);
    }
    checkedListArr[2] = data;
    let listdata = [];
    optionValue['站点'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['站点'].length) {
      setCheckAll2(true);
      setIndeterminate2(false);
    } else if (listdata.length < optionValue['站点'].length && listdata.length !== 0) {
      setCheckAll2(false);
      setIndeterminate2(true);
    } else if (listdata.length === 0) {
      setCheckAll2(false);
      setIndeterminate2(false);
    }
    setCheckDataSite(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const changeColor = e => {
    if (e === 0) {
      return 'cyan';
    } else if (e === 1) {
      return 'orange';
    } else {
      return 'purple';
    }
  };

  // 删除已选中列表
  const delSelected = value => {
    let aa = selected.get(value).type;
    let list = [];
    let checkedListArr = saveCheckValue;
    checkedListArr[aa].map(i => {
      if (i != value) {
        list.push(i);
      }
    });
    checkedListArr[aa] = list;
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
    let name = '';
    if (aa === 0) {
      setCheckDataRole(list);
      name = '角色';
    } else if (aa === 1) {
      setCheckDataPm(list);
      name = '部门';
    } else if (aa === 2) {
      setCheckDataSite(list);
      name = '站点';
    }
    let hhh = selected;
    hhh.delete(value);
    setSelected(hhh);
    let keepValue = [];
    optionValue[name].map(i => {
      if (list.indexOf(i.value) != -1) {
        keepValue.push(i);
      }
    });
    if (keepValue.length === optionValue[name].length) {
      if (aa == 0) {
        setCheckAll(true);
        setIndeterminate(false);
      } else if (aa == 1) {
        setCheckAll1(true);
        setIndeterminate1(false);
      } else if (aa == 2) {
        setCheckAll2(true);
        setIndeterminate2(false);
      }
    } else if (keepValue.length < optionValue[name].length && keepValue.length != 0) {
      if (aa == 0) {
        setCheckAll(false);
        setIndeterminate(true);
      } else if (aa == 1) {
        setCheckAll1(false);
        setIndeterminate1(true);
      } else if (aa == 2) {
        setCheckAll2(false);
        setIndeterminate2(true);
      }
    } else if (keepValue.length === 0) {
      if (aa == 0) {
        setCheckAll(false);
        setIndeterminate(false);
      } else if (aa == 1) {
        setCheckAll1(false);
        setIndeterminate1(false);
      } else if (aa == 2) {
        setCheckAll2(false);
        setIndeterminate2(false);
      }
    }
  };

  const onCheckAllChange = e => {
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    let data = [];
    optionValue['角色'] &&
      optionValue['角色'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[0], ...data]));
      checkedListArr[0] = list;
      // 已选列表
      let cs = selected;
      optionValue['角色'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[0].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[0] = list;
      // 已选列表
      let hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    console.log(checkedListArr);
    setCheckDataRole(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const onCheckAllChange1 = e => {
    setIndeterminate1(false);
    setCheckAll1(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    let data = [];
    optionValue['部门'] &&
      optionValue['部门'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[1], ...data]));
      checkedListArr[1] = list;
      // 已选列表
      let cs = selected;
      optionValue['部门'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[1].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[1] = list;
      // 已选列表
      let hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    setCheckDataPm(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const onCheckAllChange2 = e => {
    setIndeterminate2(false);
    setCheckAll2(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    let data = [];
    optionValue['站点'] &&
      optionValue['站点'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[2], ...data]));
      checkedListArr[2] = list;
      // 已选列表
      let cs = selected;
      optionValue['站点'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[2].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[2] = list;
      // 已选列表
      let hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    setCheckDataSite(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  return (
    <div className={styles.modalContainer}>
      <Modal
        title="权限选择"
        bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
        width="1000px"
        style={{ top: '10px' }}
        destroyOnClose
        centered
        cancelText="取消"
        okText="确认"
        {...props}
        onOk={() => onSubmit()}
        forceRender
        getContainer={false}
        afterClose={() => {
          setKeyValue('0');
          setSearchWord('');
        }}
      >
        <div className={styles.pageContent}>
          {/* 可选列表 */}
          <div className={styles.optionalList}>
            <div className={styles.header} />
            <Search
              className={styles.searchInput}
              allowClear
              placeholder="搜索"
              onSearch={submitSearchUser}
              onChange={e => handleSearch(e)}
              value={searchWord}
            />
            <div className={styles.tabContent}>
              {visible && (
                <Tabs type="card" activeKey={keyValue} onChange={handleParChange}>
                  {chooseGroupName.indexOf('角色') !== -1 ? (
                    <TabPane tab="角色" key="0">
                      <div className={styles.checkContent}>
                        {emptyValue == 0 ? (
                          <div className={styles.check}>
                            <Checkbox
                              indeterminate={indeterminate}
                              onChange={onCheckAllChange}
                              checked={checkAll}
                            >
                              全选
                            </Checkbox>
                            <Divider />
                            <CheckboxGroup
                              options={optionValue['角色']}
                              value={checkedList[0]}
                              onChange={onChangeListNew}
                            />
                          </div>
                        ) : (
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                        )}
                      </div>
                    </TabPane>
                  ) : (
                    <></>
                  )}
                  {chooseGroupName.indexOf('部门') !== -1 ? (
                    <TabPane tab="部门" key="1">
                      <div className={styles.checkContent}>
                        {emptyValue == 0 ? (
                          <div className={styles.check}>
                            <Checkbox
                              indeterminate={indeterminate1}
                              onChange={onCheckAllChange1}
                              checked={checkAll1}
                            >
                              全选
                            </Checkbox>
                            <Divider />
                            <CheckboxGroup
                              options={optionValue['部门']}
                              value={checkedList[1]}
                              onChange={onChangeListNew1}
                            />
                          </div>
                        ) : (
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                        )}
                      </div>
                    </TabPane>
                  ) : (
                    <></>
                  )}
                  {chooseGroupName.indexOf('站点') !== -1 ? (
                    <TabPane tab="站点" key="2">
                      <div className={styles.checkContent}>
                        {emptyValue == 0 ? (
                          <div className={styles.check}>
                            <Checkbox
                              indeterminate={indeterminate2}
                              onChange={onCheckAllChange2}
                              checked={checkAll2}
                            >
                              全选
                            </Checkbox>
                            <Divider />
                            <CheckboxGroup
                              options={optionValue['站点']}
                              value={checkedList[2]}
                              onChange={onChangeListNew2}
                            />
                          </div>
                        ) : (
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                        )}
                      </div>
                    </TabPane>
                  ) : (
                    <></>
                  )}
                </Tabs>
              )}
            </div>
            {/* 分页 */}
            <div className={styles.footer}>
              <Pagination
                size="small"
                total={total}
                showSizeChanger
                defaultPageSize={pageSize}
                defaultCurrent={1}
                pageSizeOptions={[10, 20, 45, 100]}
                current={currentPage}
                onChange={paginationChange}
                style={{ marginBottom: '10px' }}
              />
            </div>
          </div>
          {/* 已选列表 */}
          <div className={styles.selectedList}>
            <div className={styles.header}>
              <div className={styles.title}>已选列表</div>
              <div className={styles.tagHead}>
                {chooseGroupName.indexOf('角色') !== -1 ? (
                  <div className={styles.tagContent}>
                    <div className={styles.tagRol} />
                    <div>角色</div>
                  </div>
                ) : (
                  <></>
                )}
                {chooseGroupName.indexOf('部门') !== -1 ? (
                  <div className={styles.tagContent}>
                    <div className={styles.tagOrg} />
                    <div>部门</div>
                  </div>
                ) : (
                  <></>
                )}
                {chooseGroupName.indexOf('站点') !== -1 ? (
                  <div className={styles.tagContent}>
                    <div className={styles.tagSite} />
                    <div>站点</div>
                  </div>
                ) : (
                  <></>
                )}
              </div>
            </div>
            <div className={styles.selectBox}>
              {[...selected].length > 0 ? (
                <div className={styles.selectContent}>
                  {[...selected].map(item => (
                    <div className={styles.selectValue} key={item[0]}>
                      <Tag
                        closable
                        color={changeColor(item[1].type)}
                        onClose={() => delSelected(item[0])}
                      >
                        {item[1].value}
                      </Tag>
                    </div>
                  ))}
                </div>
              ) : (
                <Empty
                  image={Empty.PRESENTED_IMAGE_SIMPLE}
                  description={`请选择${chooseGroupName.toString()}`}
                />
              )}
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default RMSComponents;
