<script setup>
// items内容：
//   name - 名称
//   icon - 图标
//   command - 触发函数
//   url - 链接URL
//   target - 链接目标类型
//   disabled - 是否禁用
//   visible - 是否显示
//   separator - 是否为分隔线
//   badge - 要显示的Badge数字
//   badgeSeverity - Badge级别
//   active - 是否已选中
//   items - 子菜单内容，格式为：[subItem1, subItem2, ...]
//
// 常用插槽：
//    #start - 开头内容
//    #end - 末尾内容

import Menu from "primevue/menu";
import TBadge from "./TBadge.vue";
import {ref, watch} from "vue";

const props = defineProps(["items"])
const menuRef = ref()
const processItems = () => {
	props.items.forEach(item => {
		if (typeof item.name === "string") {
			item.label = item.name
		}

		if (item.items instanceof Array) {
			item.items.forEach(subItem => {
				if (typeof subItem.name === "string") {
					subItem.label = subItem.name
				}
			})
		}
	})
}

if (props.items instanceof Array) {
	processItems()
}

watch(() => props.items, () => {
	processItems()
})

defineExpose({
	toggle: function (event) {
		menuRef.value.toggle(event)
	}
})

</script>

<template>
	<Menu :model="items" ref="menuRef">
		<template #item="{ item, props }" v-if="!$slots.item">
			<a v-ripple class="flex items-center" :href="item.url" :class="{'active': item.active}" v-bind="props.action">
				<span :class="item.icon" v-if="item.icon"/>
				<span>{{ item.label }}</span>
				<TBadge v-if="item.badge" class="ml-auto" :value="item.badge" :severity="item.badgeSeverity" />
			</a>
		</template>
		<template #item="itemAttrs" v-else><slot name="item" v-bind="itemAttrs"></slot></template>

		<template #start>
			<slot name="start"></slot>
		</template>
		<template #end>
			<slot name="end"></slot>
		</template>
	</Menu>
</template>

<style scoped>
a.active {
	color: var(--p-primary-color);
}
</style>