<template>
  <!-- 有子菜单 -->
  <el-sub-menu v-if="hasChildren" :index="item.path || `menu_${item.id}`">
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      <span>{{ item.name }}</span>
    </template>
    <SidebarItem
      v-for="child in visibleChildren"
      :key="child.id"
      :item="child"
    />
  </el-sub-menu>
  
  <!-- 无子菜单 -->
  <el-menu-item v-else :index="item.path || ''">
    <el-icon v-if="item.icon">
      <component :is="item.icon" />
    </el-icon>
    <template #title>{{ item.name }}</template>
  </el-menu-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { MenuTree } from '@/api/menu'

const props = defineProps<{
  item: MenuTree
}>()

// 过滤掉按钮类型和隐藏的菜单
const visibleChildren = computed(() => {
  return props.item.children?.filter(child => child.menuType !== 3 && child.status === 1) || []
})

const hasChildren = computed(() => {
  return visibleChildren.value.length > 0
})
</script>
