<template>
	<a-menu
		v-model:selected-keys="selectedKeys"
		:theme="theme"
		mode="horizontal"
		:style="{
			lineHeight: `${config.layout.headerHeight}px`,
			flex: ' 1 1 0%',
			borderBottom: 0,
		}"
	>
		<template v-for="m in menuTree" :key="m.keyPath">
			<sub-menu v-if="m.children?.length" :menu-info="m"></sub-menu>
			<a-menu-item v-else :key="m.keyPath + ''">
				<icon-font v-if="m.icon" :type="m.icon"></icon-font>
				<span>
					<router-link v-if="!m.url" :to="{ path: m.path }">
						<span class="ant-pro-menu-item">
							<span class="ant-pro-menu-item-title">{{ m.name }}</span>
						</span>
					</router-link>
					<a v-else :href="m.url" target="_blank">{{ m.name }}</a>
				</span>
			</a-menu-item>
		</template>
	</a-menu>
</template>
<script lang="ts" setup>
	import { storeToRefs } from 'pinia'
	import { topMenus } from './menu'
	import SubMenu from './sub-menu.vue'
	import { useAppStore } from '@/stores/app'
	import { config } from '@/settings/application'
	const app = storeToRefs(useAppStore())
	const selectedKeys = ref<string[]>()
	const menuTree = computed(() => {
		if (app.layout.value.layout === 'mix' && !app.layout.value.splitMenus) {
			return []
		}
		return topMenus(app.layout.value.layout === 'mix')
	})
	const theme = computed(() => {
		if (app.layout.value.layout === 'mix') return 'dark'
		return app.layout.value.navTheme === 'light' ? 'light' : 'dark'
	})
</script>
