<template>
    <MenuLogo class="layout-logo" v-if="!isCollapse"></MenuLogo>
    <el-menu :default-active="activeIdex" class="el-menu-vertical-startbos" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose" background-color="#304156" router>
        <MenuItem :menuList="menuList">
        </MenuItem>
    </el-menu>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from '@/store/index'
import MenuItem from './MenuItem.vue'
import MenuLogo from '@/layout/menu/MenuLogo.vue'
// setup语法糖中 定义的数据和方法，直接可以在模板中使用，无需要 return 
const store = useStore()
// store.commit('menu/setCollapse')
// store.dispatch('menu/getMenuList')
// store.getters['user/getPermissions']
//当前路由
const route = useRoute();
const activeIdex = computed(() => {
    const { path } = route;
    return path;
})
//菜单数据
const menuList = computed(() => store.getters['menu/getMenuList'])

const isCollapse = computed(() =>
    // return store.getters['getCollapse']
    store.getters['menu/getCollapse']
)
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>
<style scoped>
@keyframes logoAnimation {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.layout-logo {
    animation: logoAnimation 1s ease-out;
}

.el-menu-vertical-startbos:not(.el-menu--collapse) {
    width: 230px;
    min-height: 400px;
}

.el-menu {
    border-right: none;
}

:deep(.el-sub-menu .el-sub-menu__title) {
    color: #f4f4f5 !important;
}

:deep(.el-menu .el-menu-item) {
    color: #bfcbd9;
}

/* 菜单点中文字的颜色 */

:deep(.el-menu-item.is-active) {
    color: #409eff !important;
}

/* 当前打开菜单的所有子菜单颜色 */

:deep(.is-opened .el-menu-item) {
    background-color: #1f2d3d !important;
}

/* 鼠标移动菜单的颜色 */

:deep(.el-menu-item:hover) {
    background-color: #001528 !important;
}
</style>