<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="item.path">
      <el-icon v-if="item.icon" class="breadcrumb-icon">
        <component :is="item.icon" />
      </el-icon>
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  HomeFilled, 
  Setting, 
  User, 
  Document, 
  List, 
  PieChart, 
  DataAnalysis,
  DataBoard
} from '@element-plus/icons-vue'

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

// 图标映射
const iconMap = {
  'dashboard': 'DataBoard',
  'system': 'Setting',
  'users': 'User',
  'content': 'Document',
  'articles': 'Document',
  'categories': 'List',
  'tags': 'List',
  'statistics': 'PieChart',
  'visits': 'DataAnalysis',
  'performance': 'DataAnalysis',
  'servers': 'Setting',
  'server': 'Setting',
  'vm': 'Setting',
  'container': 'Setting'
}

// 生成面包屑数据
const breadcrumbs = computed(() => {
  // 当前路由的完整路径
  const currentPath = route.path
  const currentQuery = route.query
  
  // 按照路径层级生成面包屑
  const pathSegments = currentPath.split('/').filter(segment => segment !== '')
  const result = []
  
  // 添加首页
  result.push({
    path: '/dashboard',
    title: '首页',
    icon: 'HomeFilled'
  })
  
  // 特殊处理服务器相关页面
  if (currentPath.includes('/servers/')) {
    // 处理服务器详情页面
    if (currentPath === '/servers/server') {
      // 构建完整的路径，包含查询参数，用于面包屑导航
      const fullPath = currentQuery.server_id ? 
        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        currentPath
      
      result.push({
        path: fullPath,
        title: '服务器详情',
        icon: 'Setting'
      })
    } else if (currentPath === '/servers/vm') {
      const fullPath = currentQuery.server_id ? 
        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        currentPath
      
      result.push({
        path: fullPath,
        title: '虚拟机详情',
        icon: 'Setting'
      })
    } else if (currentPath === '/servers/container') {
      const fullPath = currentQuery.server_id ? 
        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        currentPath
      
      result.push({
        path: fullPath,
        title: '容器详情', 
        icon: 'Setting'
      })
    } else if (currentPath === '/servers/container/console') {
      // 添加容器详情面包屑
      const containerPath = currentQuery.server_id ? 
        `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        '/servers/container'
      
      result.push({
        path: containerPath,
        title: '容器详情',
        icon: 'Setting'
      })
      
      // 添加当前页面面包屑
      const consolePath = currentQuery.server_id ? 
        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        currentPath
      
      result.push({
        path: consolePath,
        title: '终端容器',
        icon: 'Setting'
      })
    } else if (currentPath === '/servers/container/files') {
      // 添加容器详情面包屑
      const containerPath = currentQuery.server_id ? 
        `/servers/container?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        '/servers/container'
      
      result.push({
        path: containerPath,
        title: '容器详情',
        icon: 'Setting'
      })
      
      // 添加当前页面面包屑
      const filesPath = currentQuery.server_id ? 
        `${currentPath}?server_id=${currentQuery.server_id}&type=${currentQuery.type || ''}` : 
        currentPath
      
      result.push({
        path: filesPath,
        title: '容器文件管理',
        icon: 'Setting'
      })
    }
    
    return result
  }
  
  // 构建剩余的面包屑（非服务器页面的常规处理）
  let currentPathBuilder = ''
  
  for (let i = 0; i < pathSegments.length; i++) {
    const segment = pathSegments[i]
    currentPathBuilder += '/' + segment
    
    // 查找匹配的路由
    const matchedRoute = router.getRoutes().find(route => route.path === currentPathBuilder)
    const segmentIcon = iconMap[segment]
    
    if (matchedRoute && matchedRoute.meta.title) {
      result.push({
        path: currentPathBuilder,
        title: matchedRoute.meta.title,
        icon: segmentIcon
      })

    } else if (segment) {
      // 如果没有匹配的路由，但有路径段，也添加到面包屑
      result.push({
        path: currentPathBuilder,
        title: segment.charAt(0).toUpperCase() + segment.slice(1),
        icon: segmentIcon
      })
    }
  }
  
  return result
})
</script>

<style scoped>
.el-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  height: 100%;
}

.breadcrumb-icon {
  margin-right: 6px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

:deep(.el-breadcrumb__item) {
  display: flex !important;
  align-items: center;
  height: 100%;
}

:deep(.el-breadcrumb__inner) {
  display: flex !important;
  align-items: center;
  color: #7f8c8d;
  font-weight: 400;
  font-size: 14px;
  transition: all 0.2s ease;
}

:deep(.el-breadcrumb__inner a) {
  color: #7f8c8d;
  font-weight: 400;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 0;
}

:deep(.el-breadcrumb__inner a:hover) {
  color: #2c3e50;
  background-color: #f8f9fa;
}

:deep(.el-breadcrumb__inner.is-link) {
  color: #7f8c8d;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #2c3e50;
  font-weight: 500;
  font-size: 14px;
}

:deep(.el-breadcrumb__item:last-child .breadcrumb-icon) {
  color: #2c3e50;
}

:deep(.el-breadcrumb__separator) {
  margin: 0 10px;
  color: #bdc3c7;
  font-size: 12px;
  font-weight: 300;
}

:deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
  font-weight: 500;
}

:deep(.el-breadcrumb__item:first-child .breadcrumb-icon) {
  color: #2c3e50;
}
</style> 