<template>
  <el-sub-menu :index="menuItem.id?.toString()">
    <template #title>
      <el-icon><component :is="getIcon(menuItem.name)" /></el-icon>
      <span>{{ menuItem.name }}</span>
    </template>
    <template v-for="(child, index) in menuItem.children" :key="index">
      <left-menu-item
        v-if="child.children && child.children.length"
        :menuItem="child"
      ></left-menu-item>
      <el-menu-item v-else :index="child.url">
        <span>{{ child.name }}</span>
      </el-menu-item>
    </template>
  </el-sub-menu>
</template>

<script setup>
import { defineProps } from "vue";
import * as Icons from "@element-plus/icons-vue";

const props = defineProps({
  menuItem: {
    type: Object,
    default: {},
  },
});

// 根据菜单名称获取对应图标（仅用于父菜单，子菜单不显示图标）
const getIcon = (name) => {
  const iconMap = {
    系统管理: "Setting",
    代码生成: "MagicStick",
    投前管理: "Calendar",
    投中管理: "Cloudy",
    投后管理: "Wallet",
    日常管理: "Document",
    其他管理: "Files",
    模板管理: "DocumentCopy",
  };

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

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