<template>
  <el-collapse-item title="目录浏览" name="directory">
    <div class="directory-browser">
      <div class="path-bar">
        <el-button 
          size="small" 
          @click="goToParent" 
          :disabled="!templateStore.parentPath || isBrowsing"
          :loading="isBrowsing"
        >
          <el-icon><ArrowUp /></el-icon>
        </el-button>
        <el-input 
          v-model.trim="pathInput" 
          size="small" 
          placeholder="输入路径或粘贴完整路径"
          @keyup.enter.prevent="pathInput && browsePath(pathInput)"
          @input="pathInput = (pathInput as string).trim()"
          :disabled="isBrowsing"
          clearable
          autocomplete="off"
        >
          <template #append>
            <el-button 
              @click="pathInput && browsePath(pathInput)"
              :loading="isBrowsing"
              :disabled="isBrowsing || !pathInput"
            >
              <el-icon><FolderOpened /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
      
      <div class="current-path">{{ templateStore.currentPath }}</div>
      
      <div class="directory-list">
        <div v-if="isBrowsing" style="text-align: center; padding: 20px; color: #909399;">
          加载中...
        </div>
        <div v-else-if="templateStore.directoryItems.length === 0" style="text-align: center; padding: 20px; color: #909399;">
          目录为空
        </div>
        <div 
          v-for="item in templateStore.directoryItems.filter(i => i.is_dir)"
          v-else
          :key="item.path"
          class="directory-item"
          @dblclick="browsePath(item.path)"
        >
          <el-icon><Folder /></el-icon>
          <span>{{ item.name }}</span>
        </div>
      </div>
      
      <div class="directory-actions">
        <el-button 
          type="primary" 
          size="small"
          @click="setAsImageDir"
          :disabled="!templateStore.currentPath"
        >
          设为图片目录
        </el-button>
        <el-button 
          size="small"
          @click="setAsJsonDir"
          :disabled="!templateStore.currentPath"
        >
          设为JSON目录
        </el-button>
      </div>
      
      <div class="scan-config" v-if="templateStore.scanConfig.imageDir">
        <div class="config-item">
          <label>图片目录:</label>
          <span>{{ templateStore.scanConfig.imageDir }}</span>
        </div>
        <div class="config-item" v-if="templateStore.scanConfig.jsonDir">
          <label>JSON目录:</label>
          <span>{{ templateStore.scanConfig.jsonDir }}</span>
        </div>
        <el-button 
          type="success" 
          size="small"
          @click="handleScanFiles"
        >
          <el-icon><Search /></el-icon>
          扫描文件
        </el-button>
      </div>
    </div>
  </el-collapse-item>
</template>

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

const templateStore = useTemplateStore()

const {
  isBrowsing,
  pathInput,
  browsePath,
  goToParent,
  setAsImageDir,
  setAsJsonDir,
  scanFiles
} = useDirectory()

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

async function handleScanFiles() {
  const result = await scanFiles()
  if (result) {
    emit('filesScanned')
  }
}
</script>

<style scoped>
.directory-browser {
  .path-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .current-path {
    font-size: 12px;
    color: #909399;
    margin-bottom: 8px;
    word-break: break-all;
  }
  
  .directory-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  
  .directory-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    
    &:hover {
      background: #f5f7fa;
    }
  }
  
  .directory-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .scan-config {
    padding: 12px;
    background: #f5f7fa;
    border-radius: 4px;
    
    .config-item {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 12px;
      
      label {
        color: #909399;
        min-width: 70px;
      }
      
      span {
        color: #303133;
        word-break: break-all;
      }
    }
  }
}
</style>
