<template>
    <div>
        <a-menu
            :default-selected-keys="state.selectedKeys"
            style="width: 256px"
            mode="inline"
            :open-keys="state.openKeys"
            :items="items"
            @openChange="onOpenChange"
            @click="HandleClick"
        ></a-menu>
    </div>
</template>

<script setup>
import { h, reactive } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();

function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}

const items = reactive([
    getItem('首页', '0'),
    getItem('系统管理', 'sub1', () => h(MailOutlined), [
        getItem('用户管理', '1'),
        getItem('角色管理', '2'),
        getItem('权限管理', '3'),
        getItem('日志管理', '4'),
        getItem('日报管理', '5'),
        getItem('消息管理', '6'),
    ], 'submenu'),
    getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
        getItem('轮播图管理', '7'),
        getItem('团队简介', '8'),
        getItem('项目推荐', '9'),
        getItem('新闻展示', '10'),
        getItem('用户推荐', '11'),
    ], 'submenu'),
    getItem('信息管理', 'sub3', () => h(SettingOutlined), [
        getItem('项目信息管理', '12'),
        getItem('团队信息管理', '13'),
        getItem('新闻信息管理', '14'),
    ], 'submenu'),
]);

const state = reactive({
    rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
    openKeys: ['sub1'],
    selectedKeys: [],
});

const onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
    if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        state.openKeys = openKeys;
    } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
    }
};

const HandleClick = (e) => {
    // console.log("点击成功");
    const key = e.key;
    console.log(e.key);
    switch (key) {
        case '0':
            router.push('/Manager/Main'); // 导航到用户管理界面的路由
            break;
        case '1':
            router.push('/Manager/User'); // 导航到用户管理界面的路由
            break;
        case '2':
            router.push('/Manager/Role');
            break;
        case '3':
            router.push('/Manager/Authority');
            break;
        case '4':
            router.push('/Manager/Log');
            break;
        case '5':
            router.push('/Manager/Daily');
            break;
        case '6':
            router.push('/Manager/Message');
            break;
        case '7':
            router.push('/Manager/Carousel');
            break;
        case '8':
            router.push('/Manager/TeamProfile');
            break;
        case '9':
            router.push('/Manager/ProjectRecommend');
            break;
        case '10':
            router.push('/Manager/NewsDisplay');
            break;
        case '11':
            router.push('/Manager/UserRecommend');
            break;
        case '12':
            router.push('/Manager/ProjectInformation');
            break;
        case '13':
            router.push('/Manager/TeamInformation');
            break;
        case '14':
            router.push('/Manager/NewsInformation');
            break;
        default:
            break;
    }
};
</script>