<template>
  <nav class="breadcrumb-nav">
    <ol class="breadcrumb-list">
      <li v-for="(item, index) in items" :key="index" class="breadcrumb-item">
        <span v-if="index === items.length - 1" class="breadcrumb-current">{{ item.label }}</span>
        <a v-else class="breadcrumb-link" @click="navigate(item)">
          <el-icon v-if="item.icon" class="breadcrumb-icon"><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </a>
        <el-icon v-if="index < items.length - 1" class="breadcrumb-separator"><ArrowRight /></el-icon>
      </li>
    </ol>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowRight, HomeFilled } from '@element-plus/icons-vue'

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

const props = withDefaults(defineProps<{
  items?: BreadcrumbItem[]
}>(), {
  items: () => []
})

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

const routeLabels: Record<string, string> = {
  '/': '首页',
  '/products': '商品',
  '/articles': '资讯',
  '/lotteries': '抽奖',
  '/orders': '订单',
  '/tickets': '工单',
  '/addresses': '地址管理',
  '/profile': '个人中心',
  '/cart': '购物车',
}

const actionLabels: Record<string, string> = {
  'create': '创建',
  'edit': '编辑',
}

const items = computed(() => {
  if (props.items.length > 0) return props.items
  
  const pathSegments = route.path.split('/').filter(Boolean)
  const result: BreadcrumbItem[] = [
    { label: '首页', path: '/', icon: HomeFilled }
  ]
  
  let currentPath = ''
  pathSegments.forEach((segment, index) => {
    currentPath += '/' + segment
    const isLast = index === pathSegments.length - 1
    const isId = /^\d+$/.test(segment)
    const isAction = actionLabels[segment]
    
    if (isId) {
      const parentPath = '/' + pathSegments[index - 1]
      const parentLabel = routeLabels[parentPath] || pathSegments[index - 1]
      if (result[result.length - 1]?.path !== parentPath) {
        result.push({ label: parentLabel, path: parentPath })
      }
      result.push({ label: '详情' })
    } else if (isAction) {
      const parentPath = '/' + pathSegments.slice(0, index).join('/')
      const parentLabel = routeLabels[parentPath] || pathSegments[index - 1]
      if (result[result.length - 1]?.path !== parentPath) {
        result.push({ label: parentLabel, path: parentPath })
      }
      result.push({ label: actionLabels[segment] })
    } else if (!isLast) {
      result.push({ 
        label: routeLabels[currentPath] || segment, 
        path: currentPath 
      })
    } else {
      result.push({ label: routeLabels[currentPath] || segment })
    }
  })
  
  return result
})

function navigate(item: BreadcrumbItem) {
  if (item.path) {
    router.push(item.path)
  }
}
</script>

<style scoped lang="scss">
.breadcrumb-nav {
  margin-bottom: 20px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 4px 8px;
  border-radius: 6px;
  
  &:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
  }
}

.breadcrumb-icon {
  font-size: 14px;
}

.breadcrumb-current {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.breadcrumb-separator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
}
</style>
