<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 根据当前路由生成面包屑数据
const breadcrumbs = computed(() => {
  const pathArray = route.path.split('/').filter(Boolean)
  const result = [{ name: '数据看板', path: '/home' }]

  let currentPath = ''

  pathArray.forEach((segment) => {
    currentPath += `/${segment}`

    // 根据路径生成名称（可以根据实际路由配置调整）
    let name = segment.charAt(0).toUpperCase() + segment.slice(1)

    // 针对特定路径的名称映射
    const nameMap = {
      'home': '数据看板',
      'disease-detection': '桥梁安全隐患检测',
      'detection-records': '安全隐患检测记录',
      'batch-detection': '批量安全隐患检测',
      'defect-ledger': '安全隐患台账',
      'report-center': '报告中心',
      'media-library': '媒体库',
      'sensor-management': '传感器管理',
      'data-collection': '数据采集',
      'data-processing': '数据处理',
      'alert-management': '预警管理',
      'model-library': '模型库',
      'model-training': '模型训练',
      'user-management': '用户管理',
      'operation-logs': '系统操作日志',
      'user-center': '个人中心'
    }

    if (nameMap[segment]) {
      name = nameMap[segment]
    }

    // 不重复添加数据看板根节点
    if (segment !== 'home') {
      result.push({ name, path: currentPath })
    }
  })

  return result
})
</script>

<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"
        :to="index < breadcrumbs.length - 1 ? { path: item.path } : null">
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style scoped>
.breadcrumb-container {
  padding: 2px 0;
  background-color: transparent;
}
</style>