<script setup lang="ts">
import { useFilesPageContext } from '@/composables/files/filesPageContext'

const p = useFilesPageContext()
</script>

<template>
  <v-breadcrumbs :items="p.breadcrumbs" class="pa-0 mb-2">
    <template #item="{ item, index }">
      <v-breadcrumbs-item
        :disabled="item.disabled"
        :class="{ 'text-primary': !item.disabled, 'cursor-pointer': !item.disabled }"
        @click="p.onBreadcrumbClick(index)"
      >
        {{ item.title }}
      </v-breadcrumbs-item>
    </template>
    <template #divider>/</template>
  </v-breadcrumbs>

  <v-card v-if="p.selectedFileCount > 0" class="mb-4" color="primary" variant="tonal" rounded="lg">
    <v-card-text class="d-flex align-center py-2">
      <span class="text-body-2 mr-4">已选择 {{ p.selectedFileCount }} 个文件</span>
      <v-spacer />
      <v-btn size="small" variant="text" color="error" @click="p.batchDelete">批量删除</v-btn>
      <v-btn size="small" variant="text" @click="p.selectedFiles = []">取消选择</v-btn>
    </v-card-text>
  </v-card>
</template>
