<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator-icon="ArrowRight">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="index"
        :to="item.path && index !== breadcrumbList.length - 1 ? { path: item.path } : undefined"
      >
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { HomeFilled, Document, Star, Goods, Shop, Coin } from '@element-plus/icons-vue'

const route = useRoute()

// 图标映射
const iconMap: Record<string, any> = {
  HomeFilled: HomeFilled,
  Document: Document,
  Star: Star,
  Goods: Goods,
  Shop: Shop,
  Coin: Coin,
}

interface BreadcrumbItem {
  title: string
  path?: string
  icon?: any
}

const breadcrumbList = computed((): BreadcrumbItem[] => {
  // 获取匹配到的路由记录，过滤掉没有标题的
  const matched = route.matched.filter((item) => item.meta && item.meta.title)

  const breadcrumbs: BreadcrumbItem[] = []

  // 遍历匹配的路由，生成面包屑
  matched.forEach((item, index) => {
    const meta = item.meta as any

    // 跳过根路径
    if (item.path === '/') return

    breadcrumbs.push({
      title: meta.title,
      path: item.path,
      icon: meta.icon ? iconMap[meta.icon] : undefined,
    })
  })

  // 如果当前不在首页，且第一项不是首页，则添加首页
  if (route.path !== '/dashboard' && breadcrumbs[0]?.title !== '首页') {
    breadcrumbs.unshift({
      title: '首页',
      path: '/merchant/dashboard',
      icon: HomeFilled,
    })
  }

  return breadcrumbs
})
</script>

<style scoped>
.breadcrumb-container {
  padding: 10px 10px;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

/* 核心修复：图标和文字对齐 */
:deep(.el-breadcrumb__item .el-breadcrumb__inner) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}

/* 图标样式调整 */
:deep(.el-breadcrumb__item .el-icon) {
  /* display: inline-flex; 和 align-items: center; 由父级 .el-breadcrumb__inner 处理 */
  font-size: 14px;
  line-height: 1;
}

/* 确保分隔符也对齐 */
:deep(.el-breadcrumb__separator) {
  display: inline-flex;
  align-items: center;
}

/* 最后一项不可点击的样式 */
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #909399;
  cursor: default;
  font-weight: normal;
}

/* 可点击项的悬停效果 */
:deep(.el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner:hover) {
  color: var(--el-color-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .breadcrumb-container {
    padding: 8px 16px;
    margin-bottom: 16px;
  }
}
</style>
