<template>
	<a-menu mode="horizontal" v-model:openKeys="openSubMenu" @openChange="onOpenChange" 
		v-model:selectedKeys="selectedMenu" style="background: #0A130D; height: '90vh';color: #ffffff;">
		<template v-for="(item,index) in menuList">
			<template v-if="!item.children">
				<a-menu-item :key="item.path" @click="onMenu(item.path)">
					<span>{{item.meta.title}}</span>
				</a-menu-item>
			</template>
			<template v-else>
				<a-sub-menu :key="item.path">
					<template #title>{{item.meta.title}}</template>
					<template v-for="(twoItem, twoIndex) in item.children">
						<a-sub-menu v-if="twoItem.children" :key="twoItem.path">
							<template #title>
								{{twoItem.meta.title}}
							</template>
							<a-menu-item v-for="(threeItem, threeIndex) in twoItem.children" :key="threeItem.path"
								@click="onMenu(threeItem.path)">{{ threeItem.meta.title }}</a-menu-item>
						</a-sub-menu>
						<a-menu-item v-else @click="onMenu(twoItem.path)" :key="twoItem.path">
							{{ twoItem.meta.title }}
						</a-menu-item>
					</template>
				</a-sub-menu>
			</template>
		</template>
	</a-menu>
</template>
<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { store } from '@/store/index';
	import { useMenu } from '@/hooks/useMenu';
	let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu();
	let menuList = ref(store.state.permissions.menuList)
	
	menuList = computed(() => {
		return store.state.permissions.menuList;
	})
	let selectedMenu = computed(() => {
		let newSelectedMenu = [routerCur()];
		return newSelectedMenu;
	})

	let openSubMenu = computed(() => {
		// let newOpenSubMenu = [routerArrayCur()];
		store.commit('getRouteName', {
			routeName: routerCur()
		})
		store.commit('getIntoRegister', {
			intoRegister: false
		})
		store.commit('setShowLoginBox', {
			showLoginBox: false
		})
		// return newOpenSubMenu;
	})

	const onOpenChange = (openKeys) => {
		const latestOpenKey : string = openKeys.length > 0 ? openKeys[openKeys.length - 1] : undefined;
		if (latestOpenKey) {
			openSubMenu.value = latestOpenKey ? [latestOpenKey] : [];
		} else {
			openSubMenu.value = [];
		}
	}
</script>
<style scoped>
	::-webkit-scrollbar {
		/* 设置滚动条宽度 */
		width: 0px;
	}

	.ant-menu {
		background-color: #f0f2f5;
		/* 修改菜单的背景颜色 */
	}

	/* .ant-menu .ant-sub-menu {
		color: #000000;
	} */
	
	:deep(.ant-menu-submenu-title::after) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-submenu-selected >.ant-menu-submenu-title) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-submenu-active) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-menu-active) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-item-selected) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-submenu-selected::after) {
		border-bottom-color: #4FBE70 !important;
	}
/* 	:deep(.ant-menu-submenu-open::after) {
		color: #4FBE70 !important;
	} */
	
	:deep(.ant-menu-item-selected::after) {
		border-bottom-color: #4FBE70 !important;
	}
	
	
	:deep(.ant-menu-submenu-open) {
		color: #ffffff !important;
		background-color: #0A130D !important;
		border-bottom-color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-submenu-title:hover) {
		color: #ffffff !important;
	}
	
	
	:deep(.ant-menu-submenu-active::after) {
		color: #ffffff !important;
		background-color: #4FBE70 !important;
		border-bottom-color: #4FBE70 !important;
	}
	
	

	

	
	:deep(.ant-menu-item-active) {
		color: #4FBE70 !important;
		/* background-color: #ffffff !important; */
	}
	
	:deep(.ant-menu-item-active::after) {
		color: #ffffff !important;
		border-bottom-color: #4FBE70 !important;
	}
	
	.ant-menu-item-selected .ant-menu-item-title {
	  color: #4FBE70 !important;
	}
	

</style>