<template>
	<div class="breadcrumb-container">
		<el-breadcrumb :separator-icon="ArrowRight">
			<el-breadcrumb-item
				v-for="(item, index) in breadcrumbList"
				:key="index"
				:to="index < breadcrumbList.length - 1 ? { path: item.path } : undefined"
			>
				<span :class="{ 'last-item': index === breadcrumbList.length - 1, 'breadcrumb-link': true }">
					{{ item.meta.title }}
				</span>
			</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

// 生成面包屑数据
const breadcrumbList = computed(() => {
	const matched = route.matched.filter(item => item.meta && item.meta.title);

	// 确保首页始终在第一位
	const first = matched[0];
	if (!first || first.path !== "/") {
		matched.unshift({
			path: "/",
			meta: { title: "首页" }
		});
	}

	return matched;
});
</script>

<style scoped>
.breadcrumb-container {
	height: 64px;
	padding: 12px 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #f5f7fa;
	border-bottom: 1px solid #e4e7ed;
	background-image: url("../../assets/images/title-bgc.png");
}

.last-item {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}

.breadcrumb-link {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}

:deep(.el-breadcrumb) {
	font-size: 20px;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
</style>
