<template>
  <!-- 左侧导航栏组件 -->
  <el-aside class="index-aside" width="200px"> <!-- 定义左侧导航栏宽度为200px -->
    <div class="index-aside-inner"> <!-- 内部容器 -->
      <el-menu default-active="1"> <!-- 定义菜单，默认激活项为第1项 -->
        <el-menu-item @click="menuHandler('/')" index="1"> <!-- 菜单项，点击跳转到首页 -->
          <!-- <i class="el-icon-s-home"></i> --> <!-- 注释掉的图标 -->
          首页 <!-- 显示“首页”文字 -->
        </el-menu-item>
        <!-- 动态生成子菜单 -->
        <sub-menu
          v-for="menu in menuList" <!-- 遍历菜单列表 -->
          :key="menu.menuId" <!-- 设置唯一标识符 -->
          :menu="menu" <!-- 传递当前菜单数据 -->
          :dynamicMenuRoutes="dynamicMenuRoutes" <!-- 传递动态路由数据 -->
        ></sub-menu>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
import SubMenu from "@/components/index/IndexAsideSub"; // 导入子菜单组件

export default {
  data() {
    return {
      menuList: [], // 存储菜单列表
      dynamicMenuRoutes: [] // 存储动态路由数据
    };
  },
  components: {
    SubMenu // 注册子菜单组件
  },
  mounted() {
    // 获取动态菜单数据并且渲染
    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]"); // 从会话存储中获取菜单列表
    this.dynamicMenuRoutes = JSON.parse( // 从会话存储中获取动态路由数据
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
  },
  methods: {
    menuHandler(path) { // 定义菜单点击事件处理函数
      this.$router.push({ path: path }); // 路由跳转到指定路径
    }
  }
};
</script>

<style lang="scss" scoped>
.index-aside {
  margin-top: 80px; /* 设置顶部外边距 */
  overflow: hidden; /* 隐藏溢出内容 */
  .index-aside-inner {
    width: 217px; /* 设置内部容器宽度 */
    height: 100%; /* 设置高度为100% */
    overflow-y: scroll; /* 纵向滚动条 */
  }
}
</style>
