<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="item in menuList">
      <template v-if="item.children && item.children.length">
        <left-menu-item
          :key="item.id?.toString()"
          :menuItem="item"
        ></left-menu-item>
      </template>
      <template v-else>
        <el-menu-item :key="item.id?.toString()" :index="item.url">
          <el-icon><component :is="getIcon(item.name)" /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script setup>
import LeftMenuItem from "./leftMenuItem.vue";
import * as Icons from "@element-plus/icons-vue";

const menuList = sessionStorage.getItem("userInfo")
  ? JSON.parse(sessionStorage.getItem("userInfo")).menus
  : [];

// 根据菜单名称获取对应图标
const getIcon = (name) => {
  const iconMap = {
    数据大屏: "DataLine",
    消息中心: "Bell",
    模板管理: "MagicStick",
  };

  const iconName = iconMap[name] || "Menu";
  return Icons[iconName] || Icons.Menu;
};
</script>

<style lang="less"></style>
