<template>
  <!-- 使用 el-scrollbar 创建一个具有滚动功能的容器 -->
  <el-scrollbar class="menu-right-el">
    <!-- 使用 el-menu 组件创建一个垂直菜单 -->
    <el-menu
      class="el-menu-vertical-demo"
    :default-openeds="openeds"
    >
    <!-- 使用 v-for 指令遍历 expandMenu 数组，动态生成子菜单项 -->
    <SubMenuItem
      v-for="(item, index) in expandMenu"
    :key="index"
    :expand-menu="item"
    />
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
// 导入子菜单项组件
import SubMenuItem from './main-sidebar-sub-menu-item.vue'

// 定义组件接收的属性 (props)
defineProps({
  expandMenu: {
    type: Array, // 属性类型为数组
    default: () => [] // 如果没有传递此属性，则默认为空数组
  }
})

// 初始化 Vuex store 实例
const commonStore = useCommonStore()

// 计算属性：获取当前展开的菜单项 ID 列表
const openeds = computed(() => commonStore.menuIds) // 从 store 中获取菜单项 ID 列表
</script>

<style scoped>
/* 定义右侧菜单容器样式 */
.menu-right-el {
  background-color: #fff; /* 设置背景颜色为白色 */
  width: 130px !important; /* 固定宽度为 130px，并使用 !important 确保优先级 */
  border-top: 1px solid #ebedf0; /* 添加顶部边框，颜色为浅灰色 */
  height: calc(100vh - 50px); /* 高度为视口高度减去 50px（通常用于顶部导航栏） */
  overflow-y: auto; /* 当内容超出容器高度时启用垂直滚动条 */
}

/* 定义垂直菜单样式的自定义类 */
.el-menu-vertical-demo {
  border: none; /* 移除默认的边框 */
  height: 100%; /* 设置高度为 100%，确保菜单占满整个容器 */
}
</style>
