<template>
  <el-sub-menu v-if="hasChildren" :index="menu.path">
    <template #title>
      <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
        <component :is="menu.icon || menu.meta?.icon" />
      </el-icon>
      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
    </template>
    <sidebar-menu-item 
      v-for="child in menu.children" 
      :key="child.path" 
      :menu="child"
      :level="level + 1"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="menu.path">
    <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
      <component :is="menu.icon || menu.meta?.icon" />
    </el-icon>
    <template #title>
      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
    </template>
  </el-menu-item>
</template>

<script setup>
import { computed } from 'vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'

// 接收菜单项属性
const props = defineProps({
  menu: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 1
  }
})

// 判断是否有子菜单
const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0
})
</script>

<style scoped>
/* 菜单图标样式 */
.menu-icon {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #7f8c8d;
  transition: color 0.2s ease;
  font-size: 18px;
  flex-shrink: 0;
}

/* 菜单标题 */
.menu-title {
  font-size: inherit;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图标交互状态 */
.el-menu-item .menu-icon, 
:deep(.el-sub-menu__title .menu-icon) {
  color: #7f8c8d !important;
  transition: color 0.2s ease;
}

.el-menu-item:hover .menu-icon, 
:deep(.el-sub-menu__title:hover .menu-icon) {
  color: #34495e !important;
}

/* 激活菜单项图标 */
.el-menu-item.is-active .menu-icon {
  color: #2c3e50 !important;
}

:deep(.el-sub-menu.is-opened > .el-sub-menu__title .menu-icon) {
  color: #2c3e50 !important;
}
</style> 