dq-fms/src/pages/topnavbar/TopNavBar.js

import React, { useState, useEffect } from 'react'
import { history, Outlet, useModel, useDispatch, useLocation, matchRoutes } from '@umijs/max'
import styles from './TopNavBar.less'
import { Menu, Row, Col, Avatar, Dropdown, Button } from 'antd'
import { HomeOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons'
import { getPageQuery } from '@/utils/utils'
import Logo from '@/assets/logo.png'
import { userInfo } from '@/utils/globalCommon'

const menuItem = [
  {
    label: '基础信息管理',
    key: '/topnavbar00/business/basic',
  },
  {
    label: '消防监测报警',
    key: '/topnavbar00/business/fireWarning',
  },
  {
    label: '消防重点部位管理',
    key: '/topnavbar00/business/firekeynotearea',
  },
  {
    label: '安全管理基础信息',
    key: '/topnavbar00/business/basicinformation',
  },
  {
    label: '隐患排查',
    key: '/topnavbar00/business/hiddentrouble',
  },
]

const TopNavBar = (props) => {
  const dispatch = useDispatch()
  const { initialState: { menu }, setInitialState } = useModel('@@initialState')
  // 测试时候放开启用本地菜单
  window.dynamicRoute = menuItem
  const dynamicRoute = window.dynamicRoute
  const location = useLocation()
  const pathName = location.pathname

  const [activeKey, setActiveKey] = useState(pathName ?? '/topnavbar00/home')
  const [menuItems, setMenuItems] = useState([])

  useEffect(() => {
    if (!dynamicRoute || dynamicRoute?.length === 0) return
    let newList = []

    if (dynamicRoute?.length) {
      dynamicRoute?.map(item => {
        newList.push({
          key: item?.key,
          label: item?.label,
          icon: item?.icon
        })
      })

      setActiveKey(newList?.filter(item => pathName.indexOf(item.key) !== -1)[0]?.key ?? '')
    }

    setMenuItems(newList)
  }, [dynamicRoute])

  const setRouteActive = value => {
    const curKey = value.key
    const activeKeys = menuItems?.filter(item => curKey.indexOf(item.key) !== -1)[0]?.key ?? ''

    setActiveKey(activeKeys)
    history.replace(curKey)
  }

  const loginOut = async () => {
    // await outLogin()
    const { redirect } = getPageQuery()

    if (window.location.pathname !== '/login/login' && !redirect) {
      history.replace({
        pathname: '/login',
        // search: stringify({
        //   redirect: window.location.href,
        // }),
      })

      setInitialState({ currentUser: null, menu: null, menuMap: null })
      window.dynamicRoute = null
      localStorage.clear()
    }
  }

  const handleMenuClick = (e) => {
    switch (e.key) {
      case 'logout':
        loginOut()
        break
      default:
        break
    }
  }

  const dropDownMenuItems = [
    {
      label: <><LogoutOutlined style={{ marginRight: '8px' }} />退出登录</>,
      key: 'logout'
    }
  ]

  const dropDownMenu = () => (
    <Menu items={dropDownMenuItems} onClick={handleMenuClick} selectedKeys={[]} className={styles.tabBarMenu} />
  )

  return (
    <div className={styles.layoutContainer}>
      {/* <div className={styles.tabBarHeader}>
        <Row className={styles.tabBarRow}>
          <Col xs={16} sm={16} md={16} lg={16} xl={16} className={styles.tabBarLeft}>
            <img src={Logo} alt='logo' className={styles.leftLogo} />

            <Menu mode='horizontal' className={styles.leftMenu} selectedKeys={[activeKey]} items={menuItems} onClick={value => setRouteActive(value)} />
          </Col>

          <Col xs={8} sm={8} md={8} lg={8} xl={8} className={styles.tabBarRight}>
            <Avatar className={styles.tabBarRightAvaTor} src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F31%2F20170731021444_2YUfe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669779871&t=ec025ed48a1668dee9cfa0e803b6f787' />

            <span className={styles.tabBarRightName}>{userInfo?.user_name_cn ? userInfo.user_name_cn : (userInfo?.user_name || '')}</span>

            <Dropdown dropdownRender={dropDownMenu}>
              <Button type='text' className={styles.tabBarRightBtn}><SettingOutlined /></Button>
            </Dropdown>
          </Col>
        </Row>
      </div> */}

      {/* <div className={styles.contentMain}>
        <Outlet />
      </div> */}
      <Outlet />
    </div>
  )
}

export default TopNavBar