<template>
  <el-collapse-item title="预定义数据源" name="data-sources">
    <div class="data-source-selector">
      <el-alert 
        type="info" 
        :closable="false"
        show-icon
        style="margin-bottom: 12px"
      >
        <template #title>
          选择预定义数据源可自动配置目录
        </template>
      </el-alert>
      
      <div class="data-source-actions">
        <el-button 
          type="primary" 
          size="small" 
          @click="loadDataSources"
          :loading="isLoadingDataSources"
        >
          <el-icon><Refresh /></el-icon>
          刷新数据源
        </el-button>
      </div>
      
      <div v-if="isLoadingDataSources" class="loading-state">
        加载中...
      </div>
      
      <el-empty 
        v-else-if="!templateStore.hasDataSources" 
        description="暂无数据源配置" 
      />
      
      <div v-else class="data-source-list">
        <div 
          v-for="source in templateStore.dataSources" 
          :key="source.filename"
          class="data-source-item"
          :class="{ active: templateStore.activeDataSourceFilename === source.filename }"
          @click="handleSelectDataSource(source.filename)"
        >
          <div class="source-header">
            <div class="source-name">{{ source.name }}</div>
            <el-tag size="small" :type="source.json_format === 'mineru' ? 'success' : 'warning'">
              {{ source.json_format }}
            </el-tag>
          </div>
          <div class="source-description">{{ source.description }}</div>
          <div class="source-paths">
            <div class="path-item">
              <el-icon><FolderOpened /></el-icon>
              <span>{{ source.base_dir }}</span>
            </div>
          </div>
          <div v-if="templateStore.activeDataSourceFilename === source.filename" class="source-config">
            <el-descriptions :column="1" size="small" border>
              <el-descriptions-item label="图片目录">
                {{ templateStore.scanConfig.imageDir }}
              </el-descriptions-item>
              <el-descriptions-item label="JSON目录">
                {{ templateStore.scanConfig.jsonDir }}
              </el-descriptions-item>
              <el-descriptions-item label="输出目录">
                {{ templateStore.scanConfig.outputDir }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </el-collapse-item>
</template>

<script setup lang="ts">
import { Refresh, FolderOpened } from '@element-plus/icons-vue'
import { useTemplateStore } from '@/stores'
import { useDataSource } from './composables'

const templateStore = useTemplateStore()

const {
  isLoadingDataSources,
  loadDataSources,
  selectDataSource
} = useDataSource()

const emit = defineEmits<{
  dataSourceSelected: []
}>()

async function handleSelectDataSource(sourceName: string) {
  await selectDataSource(sourceName)
  emit('dataSourceSelected')
}
</script>

<style scoped>
.data-source-selector {
  .data-source-actions {
    margin-bottom: 12px;
  }
  
  .loading-state {
    text-align: center;
    padding: 20px;
    color: #909399;
  }
  
  .data-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .data-source-item {
    padding: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      border-color: #409eff;
      background: #ecf5ff;
    }
    
    &.active {
      border-color: #409eff;
      background: #ecf5ff;
    }
    
    .source-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      .source-name {
        font-weight: 600;
        color: #303133;
      }
    }
    
    .source-description {
      font-size: 12px;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .source-paths {
      .path-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #909399;
        
        i {
          font-size: 12px;
        }
      }
    }
    
    .source-config {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #dcdfe6;
    }
  }
}
</style>
