<script setup>
// items内容：
//   name - 名称
//   icon - 图标
//   command - 触发函数
//   url - 链接URL
//   target - 链接目标类型
//   disabled - 是否禁用
//   visible - 是否显示
//   separator - 是否为分隔线
//   items - 子菜单内容
//
// 常用插槽：
//    #start - 开头内容
//    #end - 末尾内容

import Menubar from "primevue/menubar";
import {watch} from "vue";

const props = defineProps(["items"])

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()
})

</script>

<template>
	<Menubar :model="items">
		<template #start>
			<slot name="start"></slot>
		</template>
		<template #end>
			<slot name="end"></slot>
		</template>
	</Menubar>
</template>

<style scoped>

</style>