<template>
	<a-breadcrumb class="breadcrumb">
		<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
			<span v-if="index === breadcrumbList.length - 1" class="no-redirect">
				<component :is="item.meta?.icon || 'FileTextOutlined'" />
				{{ item.meta.title }}
			</span>
			<a v-else @click.prevent="handleLink(item)">
				<component :is="item.meta?.icon || 'FileTextOutlined'" />
				{{ item.meta.title }}
			</a>
		</a-breadcrumb-item>
	</a-breadcrumb>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import config from '@/config'

// 定义组件名称（多词命名）
defineOptions({
	name: 'LayoutBreadcrumb',
})

const route = useRoute()
const breadcrumbList = ref([])

// 获取面包屑列表
const getBreadcrumb = () => {
	let matched = route.matched.filter((item) => item.meta && item.meta.title)

	// 如果第一个不是首页，添加首页
	const first = matched[0]
	if (first && first.path !== config.DASHBOARD_URL) {
		matched = [
			{
				path: config.DASHBOARD_URL,
				meta: { title: '', icon: 'HomeOutlined' },
			},
		].concat(matched)
	}

	breadcrumbList.value = matched
}

// 处理点击面包屑
const handleLink = () => {
	return
}

// 监听路由变化
watch(
	() => route.path,
	() => {
		getBreadcrumb()
	},
	{ immediate: true },
)
</script>
