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

/*
 * @Author: your name
 * @Date: 2021-11-16 09:12:37
 * @LastEditTime: 2023-03-24 16:34:14
 * @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 { Tooltip } from 'antd';
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';

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

import { history, useModel } from 'umi';
import { Divider } from 'antd';
import { addFastEntry, getUserPlatformNav } from '@/service/menu';
import { NavSelecterData } from '../NavSelecter';

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


const TopBar: React.FC<TopBarType> = (props) => {
  const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData,currentTab } = 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 { initialState, setInitialState } = useModel('@@initialState');


  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 = _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 />
          设置
        </div>
        <div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
          <LogoutOutlined />
          退出
        </div>
      </div>
    );
  };

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

  const goToHome = () => {
    history.replace('/index');
    setSystemTabs([]); //清空tab导航
    onTabChange && onTabChange([]);
    setCurrentSelectedTab(undefined);
    set_pageTitle('欢迎进入医管平台');
    setIfOpenPannel(false);
    localStorage.removeItem('currentSelectedTab');
    localStorage.removeItem('selectedKeys');
    localStorage.removeItem('visitedTabs');
    localStorage.removeItem('openKeys');
  }

  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 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 }));
      }
      
      //_systemTabClickHandle(_currentSelectedTabFromLocal);  //恢复选中的tab
  

    }
  }

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

  useEffect(()=>{

    if(currentTab)reSetNav(panelData,currentTab);
     
  },[currentTab]);

 


  useEffect(()=>{
      //  console.log('systemTabs.length',systemTabs.length);
       if(systemTabs.length>6){
        const tabs = systemTabs.filter((a:any,index:number)=>{
                //暂时限制只展示最多5个
                if(index<=5){
                   return a
                } 
        });

        set_onTabSystemTabs(tabs);
       }else{
        set_onTabSystemTabs(systemTabs);
       }
  },[systemTabs]);
  
  
  useEffect(() => {

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

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

      const classes = ['panel', 'left','typeBlockIcon', 'typeBlock', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon'];
      if (e.target) {
        if (classes.includes(e.target.className)) {
          return
        }
      }
      setIfOpenPannel(false);
    });

  }, []);

  return (
    <div className='topBar' onClick={e => e.stopPropagation()}>
      <div className='logoWrap'>
        <img className='logo' src={logo} onClick={() => goToHome()} />
        <Divider type="vertical" style={{ background: 'white', height: 16, opacity: 0.29, position: 'relative', top: 1, marginLeft: 24, marginRight: 8 }} />
        <div className='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>
        </>
        

        {/* <div className='notification'>
          <img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
        </div> */}
        <Tooltip title={<UserPannel />} color="#fff" onVisibleChange={(visible) => setArrowRotate(visible)}>
          <div className='user'>
            <img className='avator' src={require('../../../public/images/Mask.png')} />
            <span className='name'>{userData?.name}</span>
            <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="" /> */}
                      <img className='typeBlockIcon' src={require('../../../public/images/blueBook.png')} alt="" />
                      <span>{item.name}</span>
                    </div>
                  )
                })
              }
            </div>
            <div className='right'>
              {
                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={require('../../../public/images/zhilianganquan.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;