<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="$menuBg"
    class="el-menu-vertical-demo"
    text-color="#fff"
    router
    unique-opened
    :default-active="defaultActive"
    :collapse="!$store.getters.siderType"
  >
    <el-sub-menu
      v-for="(item, index) in menusList"
      :index="item.id"
      :key="item.id"
    >
      <template #title>
        <el-icon>
          <component :is="iconList[index]"></component>
        </el-icon>
        <span>{{ item.authName }}</span>
      </template>
      <el-menu-item
        v-for="it in item.children"
        :key="it.id"
        :index="'/' + it.path"
        @click="savePath(it.path)"
      >
        <template #title>
          <el-icon>
            <component :is="icon"></component>
          </el-icon>
          <span>{{ $t(`menus.${it.path}`) }}</span>
          <!-- <span>{{ it.authName }}</span> -->
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { menuList } from '@/api/menu'
import { ref } from 'vue'

// 引入所需的 icon 列表
const iconList = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart'])
const icon = ref('menu')

// 数据渲染
const menusList = ref([])
// 发起菜单数据获取请求并调用
const initMenusList = async () => {
  menusList.value = await menuList()
  console.log('测试', menusList.value)
}
initMenusList()

// 配合重定向，默认进入 user 界面
// const defaultActive = ref('/users')

const defaultActive = ref(sessionStorage.getItem('path') || '/users')
const savePath = (path) => {
  sessionStorage.setItem('path', `/${path}`)
}
</script>

<style lang="scss" scoped></style>
