import { Menu } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { add, active } from '../../store/reducers/tabPanes'
import OrgManager from "../OrgManager";
import RoleManager from "../RoleManager";
import UserManager from "../UserManager"
import DataManager from "../DataManager"
import InpaManager from "../InpaManager"
const { SubMenu } = Menu;
const propTypes = {};
const defaultProps = {};

const pageMap = {
    '组织管理': <OrgManager />,
    '角色管理': <RoleManager />,
    '用户管理': <UserManager />,
    '数据权限': <DataManager />,
    '病区管理': <InpaManager />
}

function AMenu() {
    const dispatch = useDispatch();
    //当前选中的菜单
    const activeTab = useSelector(state => {
        return state.tabPanes.activeTab
    });
    //已打开的tabs
    const panes = useSelector(state => {
        return state.tabPanes.panes
    });
    //切换菜单、增加tab
    function changeMenu(val) {
        const item = panes.find((it) => it.key === val.key);
        //console.log(item);
        if (item) {   //已存在当前tab，则定位即可不增加
            dispatch(active(val.key));
            return;
        }
        dispatch(
            add({ title: val.key, content: pageMap[val.key] || <OrgManager />, key: val.key })
        )
    }
    return (
        <Menu
            defaultSelectedKeys={['组织管理']}
            defaultOpenKeys={['权限管理']}
            selectedKeys={activeTab}
            mode="inline"
            onClick={changeMenu}
        >
            <SubMenu key="权限管理" title="权限管理">
                <Menu.Item key="组织管理">组织管理</Menu.Item>
                <Menu.Item key="病区管理">病区管理</Menu.Item>
                <Menu.Item key="角色管理">角色管理</Menu.Item>
                <Menu.Item key="用户管理">用户管理</Menu.Item>
                <Menu.Item key="数据权限">数据权限</Menu.Item>
            </SubMenu>
            <SubMenu key="系统管理" title="系统管理">
                <Menu.Item key="功能管理">功能管理</Menu.Item>
            </SubMenu>
        </Menu>
    )
}
AMenu.propTypes = propTypes;
AMenu.defaultProps = defaultProps;
export default AMenu;