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

/*
 * @Author: your name
 * @Date: 2021-11-16 09:12:37
 * @LastEditTime: 2025-01-20 10:38:30
 * @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, useRef, 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';
import { switchOrgReq } from '@/service';

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;
}

let isClickInside = false;

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 [showGroupList, set_showGroupList] = useState(false);
  const [groupList, set_groupList] = useState<any[]>([]);
  const [currentActivedGroup, set_currentActivedGroup] = useState<any>(undefined);

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

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

  const PannelRef = useRef<any>(null);
  const GroupListWrapperRef = useRef<any>(null);

  const _systemTabClickHandle = (item: TopBar.Tab) => {
    //导航栏tab点击
    // console.log('_systemTabClickHandle',item);
    onTabClick && onTabClick(item);
    if (item.type != 1 && item.contentType != 7) {
      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);
    setInitialState((s: any) => ({ ...s, 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);
      setInitialState((s: any) => ({ ...s, 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 = () => {
    isClickInside = true;
    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 ? a.systemId : a.menuId) != (temp.systemId ? temp.systemId : temp.menuId));

    set_onTabSystemTabs([...b, systemData]);
    set_onTabSystemTabs_hide([...onTabSystemTabs_hide.filter((a) => (a.systemId ? a.systemId : a.menuId) != (systemData.systemId ? systemData.systemId : systemData.menuId)), 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); //设置体系标题
                    setInitialState((s: any) => ({ ...s, 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);
      window.location.reload();
    }
  };

  const switchGroupHandle = async (group: any) => {
    const resp = await switchOrgReq(group.orgId, group.orgName);
    if (resp) {
      set_currentActivedGroup(group);
      set_showGroupList(false);
      const currentPath = window.location.pathname;
      window.history.pushState(null, '', '/');
      setTimeout(() => {
        window.history.pushState(null, '', currentPath);
      }, 100);
    }
  };

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

    set_panelData(navData);
  }, [navData]);

  useEffect(() => {
    if (currentTab) reSetNav(panelData, currentTab);
  }, [currentTab]);

  useEffect(() => {
    setInitialState((s: any) => ({ ...s, 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(() => {
    if (initialState?.userInfo) {
      const { orgInfo = [] } = initialState.userInfo;
      if (orgInfo && orgInfo.length > 0) {
        const defaultGroup = orgInfo.filter((a: any) => a.defaultFlag);
        set_groupList(orgInfo);
        set_currentActivedGroup(defaultGroup.length > 0 ? defaultGroup[0] : undefined);
      }
    } else {
      console.error('initialState or userInfo is null/undefined');
    }
  }, [initialState]);

  useEffect(() => {
    // _systemTabClickHandle(currentSelectedTabFromLocal);  //恢复选中的tab

    const handleClickOutside = (event: { target: any }) => {
      if (!isClickInside && PannelRef.current && !PannelRef.current.contains(event.target)) {
        setIfOpenPannel(false);
      }
      if (!isClickInside && GroupListWrapperRef.current && !GroupListWrapperRef.current.contains(event.target)) {
        set_showGroupList(false);
      }
      isClickInside = false;
    };

    document.addEventListener('click', handleClickOutside);

    // 事件监听器的函数定义
    const handleStorageChange = (e: any) => {
      if (e.key === 'tokenExpired') {
        set_tokenUpdateModalVisible(true);
      }
    };

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

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

  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 onChange={(e) => set_password(e.target.value)} value={password} className="input" autoComplete="off" onKeyDown={(e) => e.key === 'Enter' && updateToken()} />
            <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)}
        >
          {initialState?.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>
        <div className="group">
          {groupList.length > 0 && (
            <Tooltip title={currentActivedGroup?.orgName ?? ''} placement="right">
              <div
                className="group-switcher"
                onClick={() => {
                  isClickInside = true;
                  set_showGroupList(true);
                }}
              >
                <img src={require('./images/groupIcon.png')} alt="" />
              </div>
            </Tooltip>
          )}
          {showGroupList && (
            <div className="group-list-wrapper" ref={GroupListWrapperRef}>
              {groupList.map((a, index) => (
                <div key={index} className={currentActivedGroup?.orgId === a.orgId ? `group-list actived` : 'group-list'} onClick={() => switchGroupHandle(a)}>
                  {a.orgName}
                </div>
              ))}
            </div>
          )}
        </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" ref={PannelRef} 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;