import React from "react";
import "./SiderCom.css";
import * as Icon from "@ant-design/icons";
import { Layout, Menu } from "antd";
import { useSelector } from "react-redux";
import configMenuList from "../../../config";
const { Sider } = Layout;

const SiderCom = () => {
  //获取菜单方法1
  const getMenusFun = (arr) => {
    return arr.map((item, index) => {
      const list = {
        key: item.path,
        label: item.label,
        icon: iconToElementFun(item.icon),
      };
      if (item.children && item.children.length) {
        list.children = getMenusFun(item.children);
      }
      return list;
    });
  };
  const iconToElementFun = (name) => React.createElement(Icon[name]);
  const collapsed = useSelector((state) => state.tab.isCollspse);
  //获取菜单方法2
  const listMenu = getMenusFun(configMenuList);
  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="sider-style">
        {collapsed ? "Admin" : "emo管理后台Admin"}
      </div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={["1"]}
        items={listMenu}
      />
    </Sider>
  );
};

export default SiderCom;

export default  [
    {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'HomeOutlined',
        url: '/home/index'
    },
  
    
    {
        path: '/other',
        label: '其他',
        icon: 'SettingOutlined',
        children: [
        {
            path: '/other/pageOne',
            name: 'page1',
            label: '页面1',
            icon: 'SettingOutlined'
        },
        {
            path: '/other/pageTwo',
            name: 'page2',
            label: '页面2',
            icon: 'SettingOutlined'
        }
        ]
    }
]