<template>
	<a-layout-sider
		v-if="menuTree.length"
		v-model:collapsed="collapsed"
		:width="menuTree.length ? config.layout.sideBarWidth : 0"
		collapsible
		:theme="themeV"
		:style="siderStyle"
		:collapsed-width="64"
	>
		<a-menu
			:selected-keys="keys"
			:open-keys="keys"
			:theme="themeV"
			mode="inline"
			:style="{ height: '100%', borderRight: 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.path + ''">
					<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 #trigger>
			<a-row
				:style="
					themeV === 'light'
						? { backgroundColor: token.colorBgContainer, borderRight: `1px solid ${token.colorBorder}` }
						: {}
				"
			>
				<a-col :span="24">
					<RightOutlined v-if="collapsed" />
					<LeftOutlined v-else />
				</a-col>
			</a-row>
		</template>
	</a-layout-sider>
</template>
<script lang="ts" setup>
	import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
	import { storeToRefs } from 'pinia'
	import { fliteredMenus, sideMenu } from './menu'
	import SubMenu from './sub-menu.vue'
	import { useAppStore } from '@/stores/app'
	import { theme } from 'ant-design-vue'
	import { config } from '@/settings/application'
	import XEUtils from 'xe-utils'

	const route = useRoute()
	const app = storeToRefs(useAppStore())
	const menuTree = computed(() => {
		if (app.layout.value.splitMenus) {
			return sideMenu(route.matched[1].name?.toString() ?? '')
		}
		return fliteredMenus()
	})
	const collapsed = computed({
		get() {
			return app.layout.value.collapsed
		},
		set(newValue) {
			app.layout.value.collapsed = newValue
		},
	})

	const { useToken } = theme
	const { token } = useToken()

	const themeV = computed(() => {
		return app.layout.value.navTheme === 'light' ? 'light' : 'dark'
	})

	const siderStyle = computed(() => {
		return app.layout.value.fixSiderbar
			? {
					borderRight: `1px solid ${
						app.layout.value.navTheme === 'dark' ? token.value.colorBgSpotlight : token.value.colorBorder
					}`,
					position: 'fixed',
					left: 0,
					top: `${config.layout.headerHeight}px`,
					bottom: 0,
				}
			: {
					borderRight: `1px solid ${
						app.layout.value.navTheme === 'dark' ? token.value.colorBgSpotlight : token.value.colorBorder
					}`,
				}
	})

	const hasMenu = computed(() => {
		return menuTree.value.length > 0
	})
	const emit = defineEmits<{
		'has-menu': [value: boolean]
	}>()
	watch(
		hasMenu,
		(newVal) => {
			emit('has-menu', newVal)
		},
		{ immediate: true },
	)
	const keys = computed(() => {
		const matched = route.matched.map((item) => item.name)
		return XEUtils.filterTree(menuTree.value, (item) => matched.includes(item.key)).map((item) => item.path)
	})
</script>
<style scoped>
	.ant-layout .ant-layout-sider-trigger {
		background: #dadddf;
	}
</style>
