<template>
  <el-breadcrumb separator="/" class="breadcrumb-nav">
    <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
      <router-link v-if="item.path && item.path !== currentPath" :to="item.path" class="breadcrumb-link">
        {{ item.title }}
      </router-link>
      <span v-else class="breadcrumb-current">{{ item.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const currentPath = computed(() => route.path);

const breadcrumbs = computed(() => {
  const matched = route.matched;
  const items: Array<{ title: string; path: string }> = [];

  for (const record of matched) {
    const meta = record.meta as Record<string, unknown> | undefined;
    const title = String(meta?.title || "").trim();
    if (!title) continue;
    items.push({ title, path: record.path || "" });
  }

  // If no breadcrumbs resolved, show at least current page title
  if (items.length === 0) {
    const meta = route.meta as Record<string, unknown> | undefined;
    const title = String(meta?.title || "当前页面").trim();
    items.push({ title, path: route.path });
  }

  return items;
});
</script>

<style scoped>
.breadcrumb-nav {
  line-height: 60px;
}

.breadcrumb-link {
  color: var(--el-text-color-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: var(--el-color-primary);
}

.breadcrumb-current {
  color: var(--el-text-color-primary);
  font-weight: 500;
  font-size: 14px;
}
</style>
