import React, { useState, useEffect } from 'react';
import {
  Row,
  Col,
  Card,
  Input,
  Spin,
  notification,
  Button,
  Tooltip,
  Space,
  Empty,
  message,
  Tabs,
  Tree,
} from 'antd';
import TreeComponents from '@/components/ExpendableTree';
import PageContainer from '@/components/BasePageContainer';
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  BarsOutlined,
  UserOutlined,
  DesktopOutlined,
  MobileOutlined,
  FolderAddTwoTone,
  PlusSquareOutlined,
  FormOutlined,
  EditOutlined,
  DeleteOutlined,
  UserAddOutlined,
  WindowsOutlined,
  IeOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import {
  setMenuToRole,
  getRoleGroupList,
  getMenuByRoleWithLevel,
  DragGroup,
  getWebConfigTypes,
} from '@/services/RoleManage/api';
import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup';
// import ListCard from '@/pages/orgnazation/ListCard';
import qs from 'qs';
import classnames from 'classnames';
import styles from '@/pages/userCenter/roleManage/RoleManage.less';
import AddModal from './AddModal';
import DelModal from './DelModal';
import EditModal from './EditModal';
import EditGroup from './EditGroup';
import userStyles from '@/pages/userCenter/userManage/UserManage.less';
import iconStyles from '@/assets/font/omsfont/iconfont.css';
import SelectUser from './SelectUser/SelectUser';
import NewSelectUser from './SelectUser/NewSelectUser';
import OpePermissions from './SelectUser/OpePermissions';
import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';

const { Search } = Input;
const placeholder = '请输入功能名称';
const { TabPane } = Tabs;

const SiteManage = () => {
  const [treeData, setTreeData] = useState([]);
  const [searchWord, setSearchWord] = useState('');
  const [roleID, setRoleID] = useState(''); // 角色ID
  const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的roleid
  const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
  const [flag, setFlag] = useState(1);
  const [flagSearch, setFlagSearch] = useState(0);
  const [itemObj, setItemObj] = useState(''); // 选择的角色item
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
  const [editVisible, setEditVisible] = useState(false); // 修改弹窗
  const [subList, setSubList] = useState([]); // 选中的数组
  const [spinLoading, setSpinLoading] = useState(false);
  const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
  const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
  const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
  const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗
  const [userNewVisible, setUserNewVisible] = useState(false); // 用户关联弹窗
  const [hasData, setHasData] = useState(false);
  const [valueList, setValueList] = useState([]);
  const [dataList, setdataList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [btnLoading, setBtnLoading] = useState(false);
  const [mulu, setMulu] = useState(true); // 展示目录
  const [siteList, setSiteList] = useState([]);
  const [disFlag, setDisFlag] = useState(false);
  const [chileID, setChildID] = useState([]);
  const [descrip, setDescrip] = useState('当前未选中角色');
  const [keepTree, setKeepTree] = useState([]);
  const [keyValue, setKeyValue] = useState('0');
  const [keepTreeData, setKeepTreeData] = useState([]);
  const [searchTreeValue, setSearchTreeValue] = useState('');
  // const [childData, setChildData] = useState({visibleValue:''})
  const [operation, setOperation] = useState(false);

  // 点击树的回调
  const handleTreeSelect = (e, treenode) => {
    setSearchWord('');
    if (treenode) {
      const { node } = treenode;
      const { roleID: id } = node;
      setItemObj(node);
      if (node.BuiltInRole) {
        setKeyValue('0');
      }
      setUserNewVisible(true);
      if (id) {
        if (node.subSystemValue === 'view') {
          setOperation(true);
        } else {
          setOperation(false);
        }
        setSaveTreeId(id);
        setRoleID(id);
        setFlagSearch(1);
        setValueList([...valueList]);
        console.log([...valueList]);
      } else {
        if (node.visibleValue === 'view') {
          setOperation(true);
        } else {
          setOperation(false);
        }
        // setRoleID(saveTreeId);
        setRoleID('');
        setDescrip('当前未选中角色');
        setFlagSearch(0);
      }
    }

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
    } else {
      setCurrentSelectId(saveCurId);
    }
  };
  useEffect(() => {
    getRoleGroup();
  }, []);
  // 获取角色菜单树
  const getRoleGroup = () => {
    setSpinLoading(true);
    getRoleGroupList({ userID: '1' }).then(res => {
      setSpinLoading(false);
      if (res.code === 0) {
        const { roleList } = res.data;
        let list = [...roleList];
        list.map((i, j) => {
          if (i.visibleTitle.indexOf('手持') !== -1 && i.type !== 'mobile') {
            list.splice(j, 1);
            list.push(i);
          }
        });
        setKeepTreeData([...list]);
        let arr = transTree(JSON.parse(JSON.stringify(list)), '');
        setTreeData(arr);
        let aa = [];
        arr.forEach(i => {
          aa.push(i.visibleValue);
        });
        setKeepTree(aa);
      }
    });
  };

  useEffect(() => {
    console.log('进入');
    if (!roleID) return;
    console.log('选择后');
    setLoading(true);
    const defaultConfig = {
      optionsList: [],
      title: '默认组',
      id: '',
    };
    getMenuByRoleWithLevel({
      roleID: itemObj.roleID,
      subSystemValue: itemObj.subSystemValue,
      subSystemName: itemObj.subSystemValue,
    })
      .then(res => {
        const list = [];
        // eslint-disable-next-line no-unused-expressions
        res.code === 0 &&
          res.data.root.forEach(item => {
            list.push({ ...defaultConfig, ...item });
          });
        console.log(list);
        setdataList(list);
        setValueList(
          list
            .map(l =>
              checkChildrenByCondition(
                l,
                it => (it.isChecked ? [getId(it)] : []),
                true,
                'map',
              ).flat(Infinity),
            )
            .flat(Infinity)
            .filter(Boolean),
        );
        console.log(valueList);
        setLoading(false);
      })
      .catch(err => {
        setLoading(false);
      });
  }, [roleID]);

  const handleAdd = e => {
    setModalVisible(true);
  };
  // 角色删除
  const handleDel = e => {
    setDelVisible(true);
  };
  // 编辑角色
  const handleEdit = e => {
    setEditVisible(true);
  };
  // 分组编辑
  const groupEdit = () => {
    setGroupVisible(true);
  };
  // 树形数据转换;
  const transTree = (val, search) => {
    let arr = val;
    console.log(arr);
    let newArr = [];
    // 提取child里面的数组
    let arr2 = arr.filter(item => {
      if (item.child && item.child.length > 0) {
        item.child.forEach(itemC => {
          item.roleList.unshift(itemC);
        });
      }
      // if (item.visibleTitle === '手持系统') {
      //   item.icon = <span className="iconfont iconanzhuo1" />;
      //   newArr[0] = item;
      // }
      if (item.type === 'mobile') {
        item.icon = <MobileOutlined />;
        // newArr[0] = item;
      } else if (item.visibleValue == 'CS') {
        item.icon = <WindowsOutlined />;
      } else {
        if (item.visibleTitle.indexOf('手持') !== -1) {
          item.icon = <MobileOutlined />;
        } else {
          item.icon = <DesktopOutlined />;
        }
      }
      return (
        item.visibleTitle !== '其它角色' &&
        item.visibleTitle !== '运维管理' &&
        item.visibleTitle !== '小程序'
      );
    });
    arr2 = arr2.concat(newArr);
    let arr3 = arr2.map(item => {
      if (item.visibleTitle === '小程序') {
        item.visibleTitle = '移动应用';
      }
      item.title = item.visibleTitle || '';
      item.key = item.visibleValue || '';
      if (item.roleList && item.roleList.length > 0) {
        item.roleList.map((itemRole, index) => {
          if (itemRole.roleList) {
            itemRole.title = itemRole.visibleTitle || '';
            itemRole.key = itemRole.visibleTitle + itemRole.visibleValue || '';
            itemRole.groupflag = itemRole.visibleTitle;
            itemRole.icon = <BarsOutlined />;
            itemRole.roleList.map(i => {
              i.title = i.roleName;
              const indexsearch = i.title.indexOf(search);
              const beforeStr = i.title.substring(0, indexsearch);
              const afterStr = i.title.slice(indexsearch + search.length);
              i.title = (
                <div className={styles.title}>
                  {i.title.includes(search) && search != '' ? (
                    <div className={styles.titleTop}>
                      {beforeStr}
                      <span className={styles.titleSearch}>{search}</span>
                      {afterStr}
                    </div>
                  ) : (
                    <div className={styles.titleTop}>
                      {i.title}
                      {i.description && (
                        <Tooltip title={i.description}>
                          <InfoCircleOutlined
                            style={{
                              color: 'rgb(24, 144, 255)',
                              marginLeft: '5px',
                              marginTop: '3px',
                            }}
                          />
                        </Tooltip>
                      )}
                    </div>
                  )}
                  <div className={styles.tip}>
                    {i.roleID && (
                      <>
                        <Tooltip title="编辑角色" className={styles.fs}>
                          <FormOutlined
                            style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                            onClick={e => editorUser(e, i)}
                          />
                        </Tooltip>
                        {!i.BuiltInRole && (
                          <Tooltip title="删除角色" className={styles.fs}>
                            <DeleteOutlined
                              style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                              onClick={e => deletesUser(e, i)}
                            />
                          </Tooltip>
                        )}

                        {/* <Tooltip title="关联用户" className={styles.fs}>
                          <UserAddOutlined
                            style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                            onClick={e => relevancyUser(e, i)}
                          />
                        </Tooltip> */}
                      </>
                    )}
                    {!i.roleID && (
                      <Tooltip title="新增角色" className={styles.fs}>
                        <PlusSquareOutlined
                          style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                          onClick={e => addsUser(e, i)}
                        />
                      </Tooltip>
                    )}
                    {i.groupflag && (
                      <Tooltip title="编辑分组" className={styles.fs}>
                        <EditOutlined
                          style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                          onClick={e => editorGroup(e, i)}
                        />
                      </Tooltip>
                    )}
                  </div>
                </div>
              );
              i.key = i.roleID;
              i.subSystemValue = item.visibleValue;
              i.group = itemRole.visibleTitle;
              console.log(i.BuiltInRole);
              if (i.BuiltInRole === true) {
                i.icon = <UserOutlined style={{ color: '#dfb14b' }} />;
              } else {
                i.icon = <UserOutlined />;
              }
              if (roleID && roleID === i.roleID) {
                setItemObj(i);
                // setCurrentSelectId(roleID);
              }
            });
            itemRole.children = itemRole.roleList;
          } else {
            itemRole.title = itemRole.roleName;
            itemRole.key = itemRole.roleID;
            itemRole.subSystemValue = item.visibleValue;
            if (itemRole.BuiltInRole === true) {
              itemRole.icon = <UserOutlined style={{ color: '#dfb14b' }} />;
            } else {
              itemRole.icon = <UserOutlined />;
            }
            if (roleID && roleID === itemRole.roleID) {
              setItemObj(itemRole);
              // setCurrentSelectId(roleID);
            }
          }
          const indexsearch = itemRole.title.indexOf(search);
          const beforeStr = itemRole.title.substring(0, indexsearch);
          const afterStr = itemRole.title.slice(indexsearch + search.length);
          itemRole.title = (
            <div className={styles.title}>
              {itemRole.title.includes(search) && search != '' ? (
                <div className={styles.titleTop}>
                  {beforeStr}
                  <span className={styles.titleSearch}>{search}</span>
                  {afterStr}
                </div>
              ) : (
                <div className={styles.titleTop}>
                  {itemRole.title}
                  {itemRole.description && (
                    <Tooltip title={itemRole.description}>
                      <InfoCircleOutlined
                        style={{ color: 'rgb(24, 144, 255)', marginLeft: '5px', marginTop: '3px' }}
                      />
                    </Tooltip>
                  )}
                </div>
              )}
              <div className={styles.tip}>
                {itemRole.roleID && (
                  <>
                    <Tooltip title="编辑角色" className={styles.fs}>
                      <FormOutlined
                        style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                        onClick={e => editorUser(e, itemRole)}
                      />
                    </Tooltip>
                    {!itemRole.BuiltInRole && (
                      <Tooltip title="删除角色" className={styles.fs}>
                        <DeleteOutlined
                          style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                          onClick={e => deletesUser(e, itemRole)}
                        />
                      </Tooltip>
                    )}

                    {/* <Tooltip title="关联用户" className={styles.fs}>
                      <UserAddOutlined
                        style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                        onClick={e => relevancyUser(e, itemRole)}
                      />
                    </Tooltip> */}
                  </>
                )}
                {!itemRole.roleID && (
                  <Tooltip title="新增角色" className={styles.fs}>
                    <PlusSquareOutlined
                      style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                      onClick={e => addsUser(e, itemRole)}
                    />
                  </Tooltip>
                )}
                {itemRole.groupflag && (
                  <Tooltip title="编辑分组" className={styles.fs}>
                    <EditOutlined
                      style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                      onClick={e => editorGroup(e, itemRole)}
                    />
                  </Tooltip>
                )}
              </div>
            </div>
          );
          return itemRole;
        });
      }
      item.children = item.roleList;
      item.title = (
        <div className={styles.title}>
          <div className={styles.titleTop}>{item.title}</div>
          <div className={styles.tip}>
            {item.roleID && (
              <>
                <Tooltip title="编辑角色" className={styles.fs}>
                  <FormOutlined
                    style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                    onClick={e => editorUser(e, item)}
                  />
                </Tooltip>
                {!item.BuiltInRole && (
                  <Tooltip title="删除角色" className={styles.fs}>
                    <DeleteOutlined
                      style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                      onClick={e => deletesUser(e, item)}
                    />
                  </Tooltip>
                )}

                {/* <Tooltip title="关联用户" className={styles.fs}>
                  <UserAddOutlined
                    style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                    onClick={e => relevancyUser(e, item)}
                  />
                </Tooltip> */}
              </>
            )}
            {!item.roleID && (
              <Tooltip title="新增角色" className={styles.fs}>
                <PlusSquareOutlined
                  style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                  onClick={e => addsUser(e, item)}
                />
              </Tooltip>
            )}
            {item.groupflag && (
              <Tooltip title="编辑分组" className={styles.fs}>
                <EditOutlined
                  style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                  onClick={e => editorGroup(e, item)}
                />
              </Tooltip>
            )}
          </div>
        </div>
      );
      return item;
    });

    return arr3;
  };
  // 编辑角色
  const editorUser = (e, record) => {
    console.log(e);
    e.stopPropagation();
    setItemObj(record);
    setEditVisible(true);
  };
  // 删除角色
  const deletesUser = (e, record) => {
    e.stopPropagation();
    setItemObj(record);
    setDelVisible(true);
  };
  // 关联用户
  const relevancyUser = (e, record) => {
    e.stopPropagation();
    setItemObj(record);
    setUserVisible(true);
  };
  // 编辑分组
  const editorGroup = (e, record) => {
    e.stopPropagation();
    setItemObj(record);
    setGroupVisible(true);
  };
  // 新增角色
  const addsUser = (e, record) => {
    e.stopPropagation();
    setItemObj(record);
    setModalVisible(true);
  };
  const handleChange = e => {
    const { value } = e.target;
    setSearchWord(value);
  };

  // 确认回调
  const confirmModal = e => {
    setModalVisible(false);
    // setRoleID(`${e}`);
    // setCurrentSelectId([`${e}`]);
    // setFlag(flag + 1);
    getRoleGroup();
    setItemObj('');
  };
  // 删除弹窗回调
  const delModal = () => {
    setDelVisible(false);
    // setFlag(flag + 1);
    getRoleGroup();
    setRoleID('');
    setItemObj('');
  };
  // 编辑弹窗回调
  const editModal = prop => {
    getRoleGroup();
    let aa = itemObj;
    aa.BuiltInRole = prop;
    setItemObj(aa);
    if (itemObj.roleID === currentSelectId[0]) {
      if (prop == true) {
        setRoleID(currentSelectId);
        setFlagSearch(1);
      } else {
        setRoleID(currentSelectId);
        setFlagSearch(1);
      }
    }

    // setItemObj('');
  };
  // 分组编辑回调
  const groupModal = () => {
    setGroupVisible(false);
    // setFlag(flag + 1);
    getRoleGroup();
    setItemObj('');
    handleTreeSelect(saveCurId);
  };
  const userModal = () => {
    setUserVisible(false);
    // setFlag(flag + 1);
    getRoleGroup();
    setItemObj('');
    handleTreeSelect(saveCurId);
  };
  const userNewModal = () => {
    setUserNewVisible(false);
    // setFlag(flag + 1);
    // getRoleGroup();
    // setItemObj('');
    handleTreeSelect(saveCurId);
  };
  const valueCallback = valueObj => {
    setSubList(valueObj);
  };
  const handleHide = () => {
    setMulu(!mulu);
  };
  const handleCommit = results => {
    setBtnLoading(true);
    setMenuToRole({
      roleID: Number(roleID),
      menuIdList: String(results.flat()),
    })
      .then(res => {
        setBtnLoading(false);
        if (res.code === 0) {
          setValueList([...results.flat()]);
          notification.success({
            message: '提示',
            duration: 3,
            description: '设置成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.msg,
          });
        }
      })
      .catch(err => {
        setBtnLoading(false);
      });
  };
  const handleUserAttach = () => {
    setUserVisible(true);
  };
  // 返回拖拽完毕后的信息
  const loop = (datas, key, parentID, callback) => {
    for (let i = 0; i < datas.length; i++) {
      if (datas[i].key === key) {
        return callback(datas[i], i, datas, parentID);
      }
      if (datas[i].children) {
        loop(datas[i].children, key, datas[i].key, callback);
      }
    }
  };
  // 树的拖拽
  const handleDrop = infos => {
    console.log(infos);
    const dropKey = infos.node.key;
    const dragKey = infos.dragNode.key;
    const dropPos = infos.node.pos.split('-');
    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);

    const datas = JSON.parse(JSON.stringify(treeData));
    // 找到拖拽的元素
    let dragObj;
    let dropObj;
    let id;
    let dragList;
    let canDrop = false;
    // 保存拖拽到的节点信息
    loop(datas, dropKey, -1, (item, index, arr) => {
      // 拖拽节点的下一个节点是否是菜单组
      if (arr[index + 1] && !arr[index + 1].groupflag) {
        canDrop = true;
      }
      if (index + 1 === arr.length) {
        canDrop = true;
      }
      dropObj = item;
    });

    // 保存节点信息并删除节点
    loop(datas, dragKey, -1, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    console.log(dragObj, 'dragObj');
    console.log(dropObj, 'dropObj');
    // 最外层菜单组不允许拖拽
    if (!dragObj.groupflag && !dragObj.subSystemValue) {
      return;
    }
    // 不允许拖拽到子菜单下
    if (dropObj.subSystemValue && !infos.dropToGap) {
      console.log('不允许拖拽到子菜单下');
      return;
    }
    // 子菜单不能跨站点拖拽
    if (
      dragObj.subSystemValue &&
      dropObj.subSystemValue &&
      dropObj.subSystemValue !== dragObj.subSystemValue
    ) {
      console.log('子菜单不能跨站点拖拽');
      return;
    }
    if (
      dragObj.subSystemValue &&
      dropObj.visibleValue &&
      dropObj.visibleValue !== dragObj.subSystemValue
    ) {
      console.log('子菜单不能跨站点拖拽');
      return;
    }
    // 二级单组不能拖拽
    if (dragObj.groupflag) {
      console.log('二级单组不能拖拽');
      return;
    }
    // 将节点插入到正确的位置
    if (!infos.dropToGap) {
      // 插入到第一个子节点
      // 子菜单不能拖拽到二级菜单组上方
      if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) {
        return;
      }
      dropObj.children = dropObj.children || [];
      // 在哪里插入,示例添加到头部,可以是随意位置
      dropObj.children.unshift(dragObj);
      if (dropObj.groupflag) {
        id = dropObj.visibleTitle;
      } else {
        id = '';
      }

      dragList = dropObj.children.map(val => {
        if (!val.groupflag) {
          return val.key;
        }
      });
    } else {
      if (!canDrop) {
        return;
      }
      // 子菜单组不能拖拽到子菜单组下
      if (dragObj.groupflag && dropObj.subSystemValue) {
        return;
      }

      let ar;
      let i;
      loop(datas, dropKey, -1, (item, index, arr, parentID) => {
        ar = arr;
        i = index;
        if (item.group) {
          id = item.group;
        } else {
          id = '';
        }
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
      dragList = ar.filter(val => !val.groupflag).map(ele => ele.key);
    }
    DragGroup({
      dragGroupType: 1,
      groupId: dragKey,
      groupList: dragList,
      MiniAppGroupName: id,
    }).then(res => {
      if (res.code === 0) {
        getRoleGroup();
        if (infos.dragNode.roleID == itemObj.roleID) {
          if (id == '系统分组') {
            setRoleID('');
            setDescrip('系统分组下的角色不可配置菜单权限');
            setFlagSearch(0);
          } else {
            setRoleID(infos.dragNode.roleID);
            setFlagSearch(1);
          }
        }
      }
    });
  };

  const handleParChange = key => {
    setKeyValue(key);
    const { roleID: id } = itemObj;
    if (id) {
      setRoleID(id);
      setFlagSearch(1);
    } else {
      setRoleID('');
      setDescrip('当前未选中角色');
      setFlagSearch(0);
    }
  };

  const onSearch = value => {
    setSearchTreeValue(value);
    if (value !== '') {
      let data = getNewData(JSON.parse(JSON.stringify(keepTreeData)), value);
      let lastdata = JSON.parse(JSON.stringify(data));
      lastdata.map(i => {
        if (i.child.length > 0) {
          i.child = i.child.filter(ele => ele.roleList.length > 0);
        }
      });
      let last = lastdata.filter(ele => ele.roleList.length > 0 || ele.child.length > 0);
      let arr = transTree(JSON.parse(JSON.stringify(last)), value);
      setTreeData(arr);
    } else {
      let arr = transTree(JSON.parse(JSON.stringify(keepTreeData)), '');
      setTreeData(arr);
    }
  };

  // 获取搜索tree数据
  const getNewData = (treedata, value) => {
    treedata.map(i => {
      if (i.roleList.length > 0) {
        i.roleList = i.roleList.filter(ele => ele.roleName.includes(value));
      }
      if (i.child.length > 0) {
        i.child.map(j => {
          j.roleList = j.roleList.filter(ele => ele.roleName.includes(value));
        });
      }
    });
    return treedata;
  };

  return (
    <PageContainer>
      <div
        className={classnames({
          [styles.content]: true,
        })}
      >
        <Spin
          tip="loading...."
          spinning={spinLoading}
          // style={{ margin: '20px auto ', display: 'block' }}
        >
          <Card
            className={classnames({
              [styles.cardBox]: true,
              [styles.hideBox]: !mulu,
            })}
          >
            <div style={{ marginLeft: '6px' }}>
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                }}
              >
                选择角色
              </span>
            </div>
            <hr style={{ width: '95%', color: '#eeecec' }} />
            <Search
              style={{
                marginBottom: 8,
                width: '95%',
                marginLeft: '7px',
              }}
              placeholder="快速搜索角色"
              onSearch={onSearch}
            />
            {searchTreeValue !== '' ? (
              <>
                {treeData && treeData.length > 0 && (
                  <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
                    <Tree
                      showIcon
                      onSelect={handleTreeSelect}
                      defaultExpandAll
                      treeData={treeData}
                      selectedKeys={currentSelectId}
                      blockNode
                      draggable
                      onDrop={handleDrop}
                      keepTree={keepTree}
                      // setExpendKey={expendKey}
                    />
                  </div>
                )}
              </>
            ) : (
              <>
                {treeData && treeData.length > 0 && (
                  <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
                    <TreeComponents
                      showIcon
                      onSelect={handleTreeSelect}
                      autoExpandParent
                      treeData={treeData}
                      selectedKeys={currentSelectId}
                      blockNode
                      draggable
                      onDrop={handleDrop}
                      keepTree={keepTree}
                      // setExpendKey={expendKey}
                    />
                  </div>
                )}
              </>
            )}

            <AddModal
              visible={modalVisible}
              onCancel={() => setModalVisible(false)}
              itemObj={itemObj}
              confirmModal={confirmModal}
              siteList={siteList}
            />
            <DelModal
              visible={delVisible}
              itemObj={itemObj}
              onCancel={() => setDelVisible(false)}
              confirmModal={delModal}
            />
            <EditModal
              visible={editVisible}
              itemObj={itemObj}
              onCancel={() => setEditVisible(false)}
              confirmModal={editModal}
            />
            <EditGroup
              visible={groupVisible}
              itemObj={itemObj}
              onCancel={() => setGroupVisible(false)}
              confirmModal={groupModal}
            />
            {/* <UserModal
            visible={userVisible}
            itemObj={itemObj}
            onCancel={() => setUserVisible(false)}
            confirmModal={userModal}
          /> */}
            <SelectUser
              visible={userVisible}
              itemObj={itemObj}
              onCancel={() => setUserVisible(false)}
              confirmModal={userModal}
            />
            <div className={styles.switcher}>
              {mulu && (
                <Tooltip title="隐藏角色栏" className={styles.hide}>
                  <DoubleLeftOutlined onClick={() => handleHide()} style={{ marginLeft: '-5px' }} />
                </Tooltip>
              )}
              {!mulu && (
                <Tooltip title="显示角色栏" className={styles.hide}>
                  <DoubleRightOutlined onClick={() => handleHide()} />
                </Tooltip>
              )}
            </div>
          </Card>
        </Spin>
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
          <Card>
            <Tabs style={{ marginTop: '-14px' }} activeKey={keyValue} onChange={handleParChange}>
              <TabPane tab="关联用户" key="0">
                {roleID ? (
                  <div className={styles.cardBoxRNew}>
                    <NewSelectUser
                      visible={userNewVisible}
                      itemObj={itemObj}
                      onCancel={() => setUserNewVisible(false)}
                      confirmModal={userNewModal}
                    />
                  </div>
                ) : (
                  <div className={styles.cardBoxH}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                  </div>
                )}
              </TabPane>
              {!itemObj.BuiltInRole && (
                <TabPane tab="菜单权限" key="1">
                  {flagSearch == 1 ? (
                    <Search
                      style={{ width: 260 }}
                      allowClear
                      value={searchWord}
                      placeholder={placeholder}
                      // onSearch={handleSearch}
                      onChange={handleChange}
                      enterButton
                    />
                  ) : (
                    <span />
                  )}
                  {roleID ? (
                    <div className={styles.cardBoxR}>
                      <ListCard
                        roleID={roleID}
                        loading={loading}
                        checkList={valueList}
                        dataList={dataList}
                        searchWord={searchWord}
                        onCommit={handleCommit}
                        btnLoading={btnLoading}
                        hasData={hasData}
                      />
                    </div>
                  ) : (
                    <div className={styles.cardBoxH}>
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                    </div>
                  )}
                </TabPane>
              )}
              {operation && (
                <TabPane tab="操作权限" key="2">
                  {roleID ? (
                    <div className={styles.cardBoxRNew}>
                      <OpePermissions
                        visible={userNewVisible}
                        itemObj={itemObj}
                        onCancel={() => setUserNewVisible(false)}
                        confirmModal={userNewModal}
                        roleID={roleID}
                      />
                    </div>
                  ) : (
                    <div className={styles.cardBoxH}>
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                    </div>
                  )}
                </TabPane>
              )}

              {/* <TabPane tab="菜单权限优化" key="2">
                {roleID ? (
                  <div className={styles.cardBoxR} />
                ) : (
                  <div className={styles.cardBoxH}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                  </div>
                )}
              </TabPane> */}
            </Tabs>
          </Card>
        </div>
      </div>
    </PageContainer>
  );
};

export default SiteManage;