<template>
  <div class="breadcrumb" v-if="items && items.length > 0">
    <span v-for="(item, index) in items" :key="index" class="breadcrumb-wrapper">
      <span class="breadcrumb-item">
        <!-- 最后一个项目不可点击 -->
        <template v-if="index === items.length - 1">
          <span class="breadcrumb-text current">{{ item.title }}</span>
        </template>
        
        <!-- 其他项目可点击 -->
        <template v-else>
          <router-link 
            :to="item.path" 
            class="breadcrumb-link"
            v-if="item.path"
          >
            {{ item.title }}
          </router-link>
          <span class="breadcrumb-text" v-else>{{ item.title }}</span>
        </template>
      </span>
      
      <!-- 分隔符 -->
      <span class="breadcrumb-separator" v-if="index < items.length - 1">
        <i class="separator-icon"></i>
      </span>
    </span>
  </div>
</template>

<script setup lang="ts">
// 面包屑项目接口
interface BreadcrumbItem {
  title: string;
  path?: string;
}

// Props
interface Props {
  items: BreadcrumbItem[];
  separator?: string;
}

withDefaults(defineProps<Props>(), {
  separator: '/'
});
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link {
  color: #1890ff;
  text-decoration: none;
  transition: color 0.2s ease;
  
  &:hover {
    color: #40a9ff;
  }
}

.breadcrumb-text {
  color: inherit;
  
  &.current {
    color: #333;
    font-weight: 500;
  }
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  color: #ccc;
}

.separator-icon::before {
  content: "/";
  font-size: 12px;
}
</style>
