<template>
  <div class="car-breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item 
        v-for="(item, index) in items" 
        :key="index"
        :to="item.path"
        @click="handleClick(item, index)"
      >
        {{ item.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['click']);

function handleClick(item, index) {
  emit('click', { item, index });
}
</script>

<style scoped>
.car-breadcrumb {
  padding: 10px 20px;
  background-color: #292C38;
  border-bottom: 1px solid #31343E;
}

:deep(.el-breadcrumb__inner) {
  color: #96A0B5;
}

:deep(.el-breadcrumb__inner.is-link:hover) {
  color: #5690E7;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #FFFFFF;
}
</style>  