<template>
	<template v-if="routeName !== '/job/home'">
		<a-menu mode="horizontal" v-model:selectedKeys="jobMenu" forceSubMenuRender
			style="background: #ffffff; height: '90vh';color: #797979;width: 100%;display: flex;justify-content: center;">
			<!-- <a-menu-item>
				<span>{{subMenu.meta.title}}</span>
			</a-menu-item> -->
			<template v-for="(item,index) in subMenu.children" :key="item.path">
				<a-menu-item :key="item.path" @click="onMenu(item.path)" v-if="item.path !== '/job/home'">
					<span>{{item.meta.title}}</span>
				</a-menu-item>
			</template>
		</a-menu>
	</template>

	<div v-if="routeName !== '/job/home'" class="content-padding-inline" style="margin-top: 30px;">
		<a-row type="flex" justify="center">
			<a-col span="18">
				<router-view></router-view>
			</a-col>
		</a-row>
	</div>
	<div v-else>
		<router-view></router-view>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	import { store } from '@/store/index';
	import { useMenu } from '@/hooks/useMenu';
	import type { AppRouteRecordRaw } from '@/router/types';
	let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu();
	let subMenu = ref<AppRouteRecordRaw>(routerArrayParentChildCur())

	let routeName = computed(() => {
		return store.state.routeName
	})

	let jobMenu = computed(() => {
		let newSelectedMenu = [routerCur()];
		return newSelectedMenu;
	})

	onMounted(() => {
		// // subMenu.value.children.shift();
		// menuName.value = subMenu.value.meta.title;
	})
</script>

<style scoped>
	:deep(.ant-menu-item-selected) {
		color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-submenu-selected::after) {
		border-bottom-color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-item-selected::after) {
		border-bottom-color: #4FBE70 !important;
	}
	
	:deep(.ant-menu-item-active::after) {
		border-bottom-color: #4FBE70 !important;
	}
</style>