KC-MiddlePlatform/src/components/topBar/index.tsx

/*
 * @Author: your name
 * @Date: 2021-11-16 09:12:37
 * @LastEditTime: 2024-07-18 16:51:08
 * @LastEditors: code4eat awesomedema@gmail.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
 */

import React, { useEffect, useState } from 'react';

import './style.less';

import { Input, Modal, Tooltip } from 'antd';
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';

// import logo from '../../../public/images/kc-logo.png';
import tabCloseIcon from '../../../public/images/tabCloseIcon.png';

import { history, useLocation, useModel } from 'umi';
import { Divider } from 'antd';
import { updateTokenReq } from '@/service/user';
import { logoutHandle } from '@/global';


interface TopBarType {
  onTabChange?: (data: TopBar.Tab[]) => void; //当tab切换时回调
  openedTabs: TopBar.Tab[]; //已打开的列表
  currentTab?: TopBar.Tab | undefined; //当前tab
  userPannelTabClick?: (tag: 'SETTING' | 'LOGOUT' | 'SETUSERINFO') => void;
  onCloseTab?: (data: TopBar.Tab) => void;
  onTabClick?: (data: TopBar.Tab) => void;
  userData?: { name: string;[key: string]: any };
  navData: TopBar.PanelData[];
  logo?:string;
  topBarTitle?:string;
}


const TopBar: React.FC<TopBarType> = (props) => {
  const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData, currentTab,logo=undefined,topBarTitle='欢迎进入医管平台' } = props;
  const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
  const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
  const [ifOpenPannel, setIfOpenPannel] = useState(false);
  const [arrowRotate, setArrowRotate] = useState(false);
  const [pageTitle, set_pageTitle] = useState('');
  const [currentActivedBlockIndex, set_currentActivedBlockIndex] = useState(0);
  const [panelData, set_panelData] = useState<TopBar.PanelData[]>([]);

  const [onTabSystemTabs, set_onTabSystemTabs] = useState<TopBar.Tab[]>([]); //tab导航可以放下的数量，剩余通过下拉获取
  const [onTabSystemTabs_hide, set_onTabSystemTabs_hide] = useState<TopBar.Tab[]>([]);  //下拉掩藏的导航

  const { initialState, setInitialState } = useModel('@@initialState');
  const [tokenUpdateModalVisible,set_tokenUpdateModalVisible] = useState(false);
  const location = useLocation();

  const [showMoreTabPannel, set_showMoreTabPannel] = useState(false);
  const [password,set_password] = useState<string|undefined>(undefined);


  const localSavedTab = localStorage.getItem('currentSelectedTab');

  const currentSelectedTabFromLocal = localSavedTab ? JSON.parse(localSavedTab) : {};



  const _systemTabClickHandle = (item: TopBar.Tab) => {

    //导航栏tab点击
    // console.log('_systemTabClickHandle',item);
    onTabClick && onTabClick(item);
    localStorage.setItem('currentSelectedTab', JSON.stringify(item));
    setCurrentSelectedTab(item);

  };



  const _systemListClickHandle = (data: TopBar.Tab, currentActivedBlockIndex: number, index: number, i: number) => {
    //导航栏系统菜单列表点击回调
 
    if (currentSelectedTab?.menuId == data.menuId) return;
    
    //临时保存衣打开过的菜单
    const t = localStorage.getItem('visitedTabs');

    if (t) {
      let visitedTabs = JSON.parse(t);
      let index = visitedTabs.findIndex((t: TopBar.Tab) => t.menuId == data.menuId);
      if (index == -1) {
        visitedTabs.push(data);
        localStorage.setItem('visitedTabs', JSON.stringify(visitedTabs));
      }
    } else {
      localStorage.setItem('visitedTabs', JSON.stringify([data]));
    }

    _systemTabClickHandle(data); //触发一次tab点击

    set_pageTitle(panelData[currentActivedBlockIndex].child[index].name)

    if (panelData[currentActivedBlockIndex].child[index].child) {
      //console.log([...panelData[currentActivedBlockIndex].child[index].child])
      setSystemTabs([...panelData[currentActivedBlockIndex].child[index].child]);
    }
    setIfOpenPannel(false);
  };

  const _userPannelTabClick = (tag: 'SETTING' | 'LOGOUT') => {
    //用户菜单tab点击回调
    userPannelTabClick && userPannelTabClick(tag);
  };

  const closeTabHandle = (item: TopBar.Tab, e: React.MouseEvent) => {
    e.stopPropagation();
    let _systemTabs = [...systemTabs];
    let delIndex = -1;

    const filtered: any[] = _systemTabs.filter((t, index) => {
      if (t.menuId == item.menuId) {
        delIndex = index;
      }
      return t.menuId != item.menuId;
    });

    setSystemTabs([...filtered]);

    if (delIndex != 0) {
      _systemTabClickHandle(_systemTabs[delIndex - 1]); //自动切换为前一个tab
    }

    onTabChange && onTabChange(filtered);
    onCloseTab && onCloseTab(item);
  };

  const UserPannel = () => {
    return (
      <div className='userPannel'>
        <div className='userPannelTab' onClick={() => _userPannelTabClick('SETTING')}>
          <SettingOutlined />
          <span>设置</span>
        </div>
        <div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
          <LogoutOutlined />
          <span>退出</span>
        </div>
      </div>
    );
  };

  const goChannelIndex = (menuData: any) => {
    setIfOpenPannel(false);
    onTabClick && onTabClick(menuData)
  }

  const goToHome = () => {

    const go = () => {
      history.replace('/index');
      setSystemTabs([]); //清空tab导航
      onTabChange && onTabChange([]);
      setCurrentSelectedTab(undefined);
      set_pageTitle(topBarTitle);
      setIfOpenPannel(false);
      console.log('goHome');
      localStorage.removeItem('currentSelectedTab');
      localStorage.removeItem('selectedKeys');
      // localStorage.removeItem('visitedTabs');
      localStorage.removeItem('openKeys');
    }

    const currentSelectedSubHop_json = localStorage.getItem('currentSelectedSubHop');
    if (currentSelectedSubHop_json) {
      const currentSelectedSubHop = JSON.parse(currentSelectedSubHop_json);
      if (currentSelectedSubHop.loadType) {
        return false;
      } else {
        go();
      }
    } else {
      go();
    }

  }

  const goSystemIndex = (name: string) => {
    if (panelData[currentActivedBlockIndex]) {
      const result: TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter(t => (t.name == name));
      if (result.length > 0) {
        _systemTabClickHandle(Object.assign(result[0]))
        // history.push(result[0].path)
      }
    }
  }

  const openNav = () => {
    setIfOpenPannel(!ifOpenPannel);
  }


  const moreItemClickHandle = (systemData: TopBar.Tab) => {
    //点击更多应用时
    _systemTabClickHandle(systemData);
    const temp = onTabSystemTabs[onTabSystemTabs.length - 1];
    const _onTabSystemTabs = [...onTabSystemTabs];
    const b = _onTabSystemTabs.filter(a => a.systemId != temp.systemId);

    set_onTabSystemTabs([...b, systemData]);
    set_onTabSystemTabs_hide([...onTabSystemTabs_hide.filter(a => a.systemId != systemData.systemId), temp])
  }



  const reSetNav = (_panelData: TopBar.PanelData[], cur: TopBar.Tab) => {

    if (!(_panelData.length > 0)) return

    if (JSON.stringify(cur) != '{}') {

      let blockIndex = 0;
      let channelIndex = 0;


      const _currentSelectedTabFromLocal = cur;

      one: for (let index = 0; index < _panelData.length; index++) {
        blockIndex = index;
        if (_panelData[index] && _panelData[index].child) {
          two: for (let i = 0; i < _panelData[index].child.length; i++) {
            channelIndex = i;
            if (_panelData && _panelData.length > 0) {
              const _systems = _panelData[index].child[i].child;
              if (_systems && _systems.length > 0) {
                for (let k = 0; k < _systems.length; k++) {
                  if (_systems[k].menuId == _currentSelectedTabFromLocal.menuId) {
                    set_currentActivedBlockIndex(blockIndex);
                    set_pageTitle(_panelData[blockIndex].child[channelIndex].name); //设置体系标题

                    break one;
                  }
                }
              }
            }
          }
        }
      }

      if (_panelData && _panelData.length > 0 && _panelData[blockIndex].child) {
        setSystemTabs(_panelData[blockIndex].child[channelIndex].child);  //恢复体系列表
        setCurrentSelectedTab(_currentSelectedTabFromLocal);
        localStorage.setItem('currentSelectedTab', JSON.stringify(_currentSelectedTabFromLocal));
        setInitialState((s) => ({ ...s, currentSelectedSys: _currentSelectedTabFromLocal }) as any);
      }

      // console.log({_currentSelectedTabFromLocal,location});
      const {pathname} = location;
      if(pathname.indexOf(_currentSelectedTabFromLocal.path) == -1){
        history.push(_currentSelectedTabFromLocal.path);
      }

      //_systemTabClickHandle(_currentSelectedTabFromLocal);  //恢复选中的tab


    }
  }

  const [hideTimer, setHideTimer] = useState<null | any>(null);
  const handleTabMoreMouseLeave = () => {
    // 设置一个延时器，在一段时间后隐藏morePannel
    const timer = setTimeout(() => {
      set_showMoreTabPannel(false);
    }, 300); // 例如延迟300毫秒
    setHideTimer(timer);
  };

  const handleMorePannelMouseEnter = () => {
    // 清除延时器，防止morePannel隐藏
    if (hideTimer) {
      clearTimeout(hideTimer);
      setHideTimer(null);
    }
  };

  const handleMorePannelMouseLeave = () => {
    set_showMoreTabPannel(false);
  };

  const updateToken = async () => {
        const account = (localStorage.getItem('account')) as string;
        const hospSign = localStorage.getItem('hospSign');
        const data = {
          account,
          password:password,
          hospSign
        }
        const resp = await updateTokenReq(data);
        if(resp){
          set_password(undefined);
          set_tokenUpdateModalVisible(false);
        }
  }


  useEffect(() => {
    if (currentSelectedTabFromLocal) {
      reSetNav(navData, currentSelectedTabFromLocal);
    }

    set_panelData(navData);

  }, [navData])

  useEffect(() => {

    if (currentTab) reSetNav(panelData, currentTab);

  }, [currentTab]);


  useEffect(()=>{
     set_pageTitle(topBarTitle);
  },[topBarTitle])




  useEffect(() => {

    if (systemTabs.length > 5) {
      //set_onTabSystemTabs(tabs);
      let _onTabSystemTabs: any[] = [];
      let _set_onTabSystemTabs_hide: any[] = [];
      systemTabs.forEach((a, index) => {
        if (index <= 4) {
          _onTabSystemTabs.push(a);
        } else {
          if (a.systemId == currentSelectedTabFromLocal.systemId) {
            const _temp = _onTabSystemTabs[_onTabSystemTabs.length - 1];
            _onTabSystemTabs.pop();
            _onTabSystemTabs.push(a);
            _set_onTabSystemTabs_hide.push(_temp);
          } else {
            _set_onTabSystemTabs_hide.push(a);
          }
        }
      });
      set_onTabSystemTabs(_onTabSystemTabs);
      set_onTabSystemTabs_hide(_set_onTabSystemTabs_hide);
    } else {
      set_onTabSystemTabs(systemTabs);
    }
  }, [systemTabs]);


  useEffect(() => {

    //_systemTabClickHandle(currentSelectedTabFromLocal);  //恢复选中的tab

    document.body.addEventListener('click', (e: any) => {

      const classes = ['panel', 'typeBlockName', 'left', 'typeBlockIcon', 'typeBlock', 'typeBlock active', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon', 'rowDetail','typeBlockIcon typeBlockIcon1','typeBlockIcon typeBlockIcon2','typeBlockIcon typeBlockIcon3','typeBlockIcon typeBlockIcon4','typeBlockIcon typeBlockIcon5','typeBlockIcon typeBlockIcon6','typeBlockIcon typeBlockIcon7','typeBlockIcon typeBlockIcon8','typeBlockIcon typeBlockIcon9'];
      if (e.target) {
        let key = e.target.className?e.target.className:'';
        if (classes.includes(key)||(typeof key == 'string'&&key.indexOf('typeBlockIcon') != -1)) {
          return
        }
      }
      setIfOpenPannel(false);
    });
    
    // 事件监听器的函数定义
    const handleStorageChange = (e:any) => {
      if (e.key === 'tokenExpired') {
        set_tokenUpdateModalVisible(true);
      }
    };

    // 添加事件监听器
    window.addEventListener('removeLocalItemEvent', handleStorageChange);

    // 返回的函数用于在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('removeLocalItemEvent', handleStorageChange);
    };

  }, []);

  return (
    <div className='topBar' onClick={e => e.stopPropagation()}>
      <Modal className='TokenUpdateModal' open={tokenUpdateModalVisible} width={400} title={false}  footer={false} closable={false}  >
           <div className='content'>                                                                                                                                                                         
                <div className='title'>登录超时锁定</div>
                <div className='form'>
                      <div className='avatar'>
                         <img className='avatarImg' src={require('../../../public/images/initAvatar.png')} alt="" />
                         <img className='suoding' src={require('../../../public/images/suoding.png')} alt="" />
                      </div>
                      <div className='name'>{userData?.name}</div>
                      <Input.Password onChange={(e)=>set_password(e.target.value)} value={password}  className='input' autoComplete='off' />
                      <div className='updateBtn' onClick={()=>updateToken()}>解锁</div>
                      <a onClick={()=>logoutHandle()}>退出登录</a>
                </div>
           </div>
      </Modal>
      <div className='logoWrap'>
        {logo&&<img className='logo' src={logo} onClick={() => goToHome()} />}
        <Divider type="vertical" style={{ background: 'white', height: 16, opacity: 0.29, position: 'relative', top: 1, marginLeft: 16, marginRight: 8 }} />
        <div className={ifOpenPannel ? 'menu active' : 'menu'} onClick={() => openNav()}>
          <img src={require('../../../public/images/menu.png')} alt="" />
        </div>
        <span className='systemTitle' onClick={() => goSystemIndex(pageTitle)}>{pageTitle}</span>
      </div>

      <div className='userRelaInfoWrap'>
        <>
          {/**
           * 已打开的tab
           */}
          <div className='tabWrap'>
            {onTabSystemTabs && (onTabSystemTabs).map((item, index) => (
              <div key={index} className={currentSelectedTab?.menuId == item.menuId ? `tab on` : `tab`} onClick={() => _systemTabClickHandle(item)}>
                <div className='tabText'>{item.name} </div>
                <div className='closeIconWrap'>
                  <img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} />
                </div>
              </div>
            ))}
          </div>
          {systemTabs.length > 5 && <div className={showMoreTabPannel ? 'tabMore active' : 'tabMore'} onMouseEnter={() => set_showMoreTabPannel(true)} onMouseLeave={handleTabMoreMouseLeave} >
            {showMoreTabPannel && (<div className='morePannel'
              onMouseEnter={handleMorePannelMouseEnter}
              onMouseLeave={handleMorePannelMouseLeave}
            >
              {
                onTabSystemTabs_hide.map((item, index) => {
                  return (<div key={index} className='moreItem' onClick={() => moreItemClickHandle(item)}>
                    {/* <Tooltip placement="right" title={item.name}> */}
                    <span>{item.name}</span>
                    {/* </Tooltip> */}
                  </div>)
                })
              }
            </div>)}
          </div>}
        </>


        <div className='notification'>
          <img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
        </div>
        <Tooltip className='topBarTooltip' placement='bottomRight' title={<UserPannel />} color="#fff" onOpenChange={(visible) => setArrowRotate(visible)}>
          <div className='user'>
            <div className='avator'><img src={userData?.avatarUrl?userData.avatarUrl:require('../../../public/images/avatar.png')} /></div>
            <div className='info'>
              <span className='hospName'>{localStorage.getItem('hospAbbreviation')}</span>
              <span className='name'>{userData?.name}</span>
            </div>
            {/* <img className={arrowRotate ? `arrow on` : `arrow`} src={require('../../../public/images/arrow_white.png')} /> */}
          </div>
        </Tooltip>
      </div>

      {
        ifOpenPannel && (
          <div className='panel' onClick={e => e.stopPropagation()}>
            <div className='left'>
              {
                panelData.map((item, index) => {
                  return (
                    <div className={currentActivedBlockIndex == index ? `typeBlock active` : `typeBlock`} key={index} onClick={() => set_currentActivedBlockIndex(index)}>
                      {/* <img className='typeBlockIcon' src={item?.icon} alt="" /> */}
                      <div className={` typeBlockIcon typeBlockIcon${item.icon}`} ></div>
                      <span className='typeBlockName'>{item.name}</span>
                    </div>
                  )
                })
              }
            </div>
            <div className='right'>
              <div className='panelCloseBtn' onClick={() => setIfOpenPannel(false)} ></div>
              {
                panelData.length > 0 && panelData[currentActivedBlockIndex] && panelData[currentActivedBlockIndex].child && panelData[currentActivedBlockIndex].child.map((item, index: number) => {
                  return (
                    <div className='row' key={index}>
                      <img className='channelIcon' src={item.icon?item.icon:require(`../../../public/images/tongyong_tixi.png`)} alt="" />
                      <div className='rowDetail'>
                        <div className='channelName' onClick={() => goChannelIndex(item)}>{item.name}</div>
                        <div className='channelList'>
                          {
                            item.child && item.child.length > 0 && item.child.map((val, i: number) => {
                              return (
                                <div className={currentSelectedTab?.menuId == val.menuId ? 'systemTab on' : 'systemTab'} key={i} onClick={() => _systemListClickHandle(val, currentActivedBlockIndex, index, i)}>{val.name}</div>
                              )
                            })
                          }
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </div>
        )
      }

    </div>
  );
};

export default TopBar;