<template>
  <v-col
v-if="features.showBreadcrumb && showBreadcrumbBar && !isMobile"
    class="d-flex align-center justify-space-between pr-2 pl-3 py-1 bg-surface">
    <v-breadcrumbs class="pa-0" density="compact" :items="breadcrumbItems">
      <template #prepend>
        <v-btn
v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary" size="small"
          variant="outlined" @click="emit('toggle-favorites-bar', true)">
          常用
        </v-btn>
      </template>
      <template #item="{ item }">
        <div class="d-flex align-center ga-1">
          <v-icon v-if="item.icon" class="mr-1" size="14" :icon="item.icon" />
          <span class="text-caption text-no-wrap">{{ item.title }}</span>
        </div>
      </template>
      <template #divider>
        <v-icon color="primary-variant" size="12" :icon="mdiChevronRight" />
      </template>
    </v-breadcrumbs>
    <div class="page-actions">
      <slot name="breadcrumb-actions"></slot>
    </div>
  </v-col>
</template>

<script setup>
import { mdiChevronRight } from '@mdi/js'
defineProps({
  features: { type: Object, default: () => ({}) },
  showBreadcrumbBar: { type: Boolean, default: true },
  isMobile: { type: Boolean, default: false },
  breadcrumbItems: { type: Array, default: () => [] },
  showFavoritesBar: { type: Boolean, default: true },
})

const emit = defineEmits(['toggle-favorites-bar'])
</script>
