<template>
    <template v-for="item in items" :key="item.path">
        <!-- 有子菜单 -->
        <el-sub-menu v-if="isNested && item.children && item.children.length >= 1" :index="item.path"
            :class="{ 'is-active': isActive(item.path) }">
            <template #title>
                <SvgIcon v-if="isIcon" :name="item.iconName" :size="22" color="#3377FF" />
                <span>{{ item.title }}</span>
            </template>

            <NavBarMenuItem :items="item.children" :isNested="isNested" />
        </el-sub-menu>

        <!-- 只有一个子菜单或无子菜单，直接显示 -->
        <el-menu-item v-else :index="item.path" :class="{ 'is-active': isActive(item.path) }">
            <template #title>
                <SvgIcon v-if="isIcon" :name="item.iconName" :size="18" color="currentColor" />
                <span>{{ item.title }}</span>
            </template>
        </el-menu-item>
    </template>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'

defineOptions({
    name: 'NavBarMenuItem'
})

const props = defineProps({
    items: {
        type: Array,
        default: () => []
    },
    isNested: {
        type: Boolean,
        default: true
    },
    activeMenu: {
        type: String,
        default: ''
    },
    isIcon: {
        type: Boolean,
        default: true
    }
})

const isActive = (path) => {
    if (!path || !props.activeMenu) return false
    return props.activeMenu === path
}
</script>
