<template>
  <el-collapse-item 
    v-if="templateStore.hasFilePairs" 
    title="文件列表" 
    name="files"
  >
    <div class="file-stats">
      <el-tag type="info">共 {{ templateStore.filePairs.length }} 个文件</el-tag>
      <el-tag type="success">已标注 {{ templateStore.labeledCount }}</el-tag>
      <el-tag type="warning">待处理 {{ templateStore.unlabeledCount }}</el-tag>
    </div>
    
    <div class="file-navigator">
      <el-button 
        size="small" 
        @click="templateStore.prevPair()" 
        :disabled="templateStore.currentPairIndex === 0"
      >
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span>{{ templateStore.currentPairIndex + 1 }} / {{ templateStore.filePairs.length }}</span>
      <el-button 
        size="small" 
        @click="templateStore.nextPair()" 
        :disabled="templateStore.currentPairIndex >= templateStore.filePairs.length - 1"
      >
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>
    
    <div class="current-file" v-if="templateStore.currentFilePair">
      <div class="file-name">{{ templateStore.currentFilePair.image_name }}</div>
      <el-tag 
        :type="templateStore.currentFilePair.has_structure ? 'success' : 'info'" 
        size="small"
      >
        {{ templateStore.currentFilePair.has_structure ? '已标注' : '未标注' }}
      </el-tag>
      <el-button type="primary" size="small" @click="handleLoadFile">
        加载
      </el-button>
    </div>
  </el-collapse-item>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useTemplateStore } from '@/stores'

const templateStore = useTemplateStore()

const emit = defineEmits<{
  loadFile: [payload: { imagePath: string; jsonPath: string }]
}>()

function handleLoadFile() {
  const pair = templateStore.currentFilePair
  if (pair) {
    emit('loadFile', {
      imagePath: pair.image_path,
      jsonPath: pair.json_path
    })
  }
}
</script>

<style scoped>
.file-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.file-navigator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.current-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  
  .file-name {
    flex: 1;
    font-size: 13px;
    word-break: break-all;
  }
}
</style>
