<template>
	<!--面包屑-->
	<div v-if="breadcrumbMenu.length > 0" class="main-breadcrumb">
		<a-breadcrumb>
			<a-breadcrumb-item v-for="(item, index) of breadcrumbMenu" :key="index">{{ item }}</a-breadcrumb-item>
		</a-breadcrumb>
		<!--			<div class="menu-name">三级菜单</div>-->
	</div>
</template>

<script lang="ts" setup>
// 路由导航
import { useMenuStore } from '../../../store/menu'
import { onMounted, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

const menuStore = useMenuStore()

onMounted(() => {
	// 更新缓存
	menuStore.registerMenu()
})

// 面包屑
let route = useRoute()
const breadcrumbMenu = ref<Array<string>>([])

/**
 * 根据路由的地址查找菜单，并开启
 */
watchEffect(() => {
	let systemMenu = menuStore.menuMap[route.path]
	// 设置面包屑
	if (systemMenu) {
		breadcrumbMenu.value = systemMenu.displayName?.split(',') || []
	} else {
		breadcrumbMenu.value = []
	}
})
</script>
<script lang="ts">
export default {
	name: 'IndexBreadcrumb'
}
</script>

<style lang="scss" scoped>
// 导航区域
.main-breadcrumb {
	height: 50px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding-left: 32px;

	.menu-name {
		font-size: 1.25rem;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
	}
}
</style>
