tsg-web/src/components/DashboardLayout/SiderMenu.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { Menu } from 'antd';
import { FolderOutlined, ProfileOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router';
import { MenuItem } from '../../models/_';
import { useSelector } from 'react-redux';

const { SubMenu } = Menu;

function selectedMenu(menu: MenuItem[], menuIndexes: string[]) {
  if (!menuIndexes || !menuIndexes[0]) {
    return [];
  }
  const menuItem = menu.find((o) => o.id === menuIndexes[0]);
  return (menuItem && menuItem.children) || [];
}

const SiderMenu: React.FC<{
  menu: MenuItem[],
  menuIndexes: string[],
}> = ({ menu, menuIndexes }) => {
  const isReadObject = useSelector((s: any) => s.runtime.isReadObject);
  console.log("isReadObject",isReadObject);
  const subMenu = useMemo(() => selectedMenu(menu, menuIndexes), [menu, menuIndexes]);
  const [openKeys, setOpenKeys] = useState<any>([`${menuIndexes[1]}`]);
  console.log('openKeys', openKeys)
  console.log(subMenu);
  const location = useLocation();

  const pathname = location.pathname;
  
  const navigate = useNavigate();

  function goto(url: string) {
    if (pathname !== url) {
      navigate(url);
    }
  }


  useEffect(()=>{
    if(openKeys?.[0]==='undefined'){
      setOpenKeys(menuIndexes[1])
    }
  },[menuIndexes[1]])


  const onOpenChange = (keys: any) => {
    let openLength = 0
    if(openKeys===undefined){
      openLength = 0
    }else{
      openLength = openKeys?.length
    }
    
    if(keys?.length>openLength){
      const lastKey = keys?.[keys.length-1]
      setOpenKeys([lastKey])
    }else{
      setOpenKeys(keys)
    }
  };

  const renderPop = (tilte: any) => {
    let isRead1 = isReadObject[1];
    let isRead2 = isReadObject[2];
    let isRead3 = isReadObject[3];
    switch (tilte) {
      case "实时工情":
        return isRead1 || isRead2;
      case "运行情况":
        return isRead1
      case "工程险情":
        return isRead2
      case "实时灾情":
        return isRead3
      default:
        return false
    }
}

  return (
    <Menu
      key={menuIndexes[0] || '0'}
      mode="inline"
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      selectedKeys={[`${menuIndexes[2] || menuIndexes[1]}`]}
      defaultOpenKeys={[`${menuIndexes[1]}`]}
      style={{position:"relative"}}
    >
      {
        subMenu.map((o: any) => (
          o.children && o.children.length > 0 ? (
            <SubMenu key={o.id} icon={o.icon ? <img style={{ width: 16, height: 16 }} src={`/assets/icons/${o.icon}.png`} /> : <FolderOutlined />}
              title={<span>
                {o.title}
                 {renderPop(o.title) && <span
                  style={{
                        position: "absolute",
                        top: "12px",
                        left: "110px",
                        width: "10px",
                        height: "10px",
                        background: "#f56c6c",
                        borderRadius: "50%",
                  }}>
                      </span>} 
              </span>}
            >
              {
                o.children.map((oo: any) => (
                  <>
                  <Menu.Item
                      onClick={() => goto(oo.path)}
                      key={oo.id}>{oo.title}
                    </Menu.Item>
                     {renderPop(oo.title) &&<div
                      style={{
                        position: "absolute",
                        top: oo.title === "运行情况" ? "167px" : "232px",
                        left: "110px",
                        width: "10px",
                        height: "10px",
                        background: "#f56c6c",
                        borderRadius: "50%",
                      }}
                    ></div>} 
                  </>
                ))
              }
            </SubMenu>
          ) : (
              <>
            <Menu.Item
                  icon={o.icon ? <img style={{ width: 16, height: 16 }}
                    src={`/assets/icons/${o.icon}.png`} /> : <ProfileOutlined />}
                  onClick={() => goto(o.path)} key={o.id}>
                  <div style={{position:"relative"}}>
                    <span>{o.title}</span>
                    {renderPop(o.title) &&<div
                  className='small-pop'
                  style={{
                    position: "absolute",
                    width: '10px',
                    height: '10px',
                    top: "24%",
                    left: "30%",
                    background: "#f56c6c",
                    borderRadius: "50%",
                  }}
                ></div>} 
                  </div>
             
                </Menu.Item>
               
              </>
            
          )
        ))
      }
    </Menu>
  );
}

export default React.memo(SiderMenu);