<template>
  <div class="test-import-wizard">
    <div class="test-header">
      <h2>图像导入向导测试页面</h2>
      <a-button type="primary" @click="showWizard">打开图像导入向导</a-button>
    </div>
    
    <div class="test-content">
      <div class="test-section">
        <h3>当前选中的机组</h3>
        <div class="machine-info">
          <p><strong>机组ID:</strong> {{ selectedTurbineId || '未选择' }}</p>
          <p><strong>可用部件数量:</strong> {{ currentTurbineParts.length }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h3>可用部件列表</h3>
        <div class="parts-list">
          <div 
            v-for="part in currentTurbineParts" 
            :key="part.id"
            class="part-card"
          >
            <div class="part-icon">
              <icon-tool v-if="part.partType === 'engine'" />
              <icon-plus-circle v-else-if="part.partType === 'blade'" />
              <icon-nav v-else />
            </div>
            <div class="part-info">
              <h4>{{ part.name }}</h4>
              <p>类型: {{ part.partType }}</p>
              <p>ID: {{ part.id }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="test-section">
        <h3>导入历史</h3>
        <div class="import-history">
          <div 
            v-for="(record, index) in importHistory" 
            :key="index"
            class="history-item"
          >
            <p><strong>时间:</strong> {{ record.timestamp }}</p>
            <p><strong>部件:</strong> {{ record.partName }}</p>
            <p><strong>图像数量:</strong> {{ record.imageCount }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图像导入向导 -->
    <ImageImportWizard
      :model-value="wizardVisible"
      :selected-turbine-id="selectedTurbineId"
      :available-parts="currentTurbineParts"
      @update:model-value="wizardVisible = $event"
      @import-success="handleImportSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconTool, IconPlusCircle, IconNav } from '@arco-design/web-vue/es/icon'
import ImageImportWizard from '@/components/ImageImportWizard/index.vue'

// 模拟的机组ID
const selectedTurbineId = ref('turbine-001')

// 模拟的部件数据
const currentTurbineParts = ref([
  {
    id: 'engine-001',
    name: '机舱设备',
    partType: 'engine',
    description: '风力发电机组机舱内部设备'
  },
  {
    id: 'blade-001',
    name: '叶片A',
    partType: 'blade',
    description: '风力发电机组叶片A'
  },
  {
    id: 'blade-002',
    name: '叶片B',
    partType: 'blade',
    description: '风力发电机组叶片B'
  },
  {
    id: 'blade-003',
    name: '叶片C',
    partType: 'blade',
    description: '风力发电机组叶片C'
  },
  {
    id: 'tower-001',
    name: '塔筒',
    partType: 'tower',
    description: '风力发电机组塔筒结构'
  }
])

// 向导可见性
const wizardVisible = ref(false)

// 导入历史
const importHistory = ref<Array<{
  timestamp: string
  partName: string
  imageCount: number
}>>([])

// 显示向导
const showWizard = () => {
  wizardVisible.value = true
}

// 处理导入成功
const handleImportSuccess = (data: any) => {
  console.log('导入成功:', data)
  
  // 添加到历史记录
  importHistory.value.unshift({
    timestamp: new Date().toLocaleString(),
    partName: data.part.name,
    imageCount: data.images.length
  })
  
  Message.success(`成功导入${data.images.length}张图像到${data.part.name}`)
}

// 初始化
onMounted(() => {
  console.log('测试页面已加载')
})
</script>

<style scoped lang="scss">
.test-import-wizard {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
  
  h2 {
    margin: 0;
    color: #1f2937;
  }
}

.test-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.test-section {
  background: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  
  h3 {
    margin: 0 0 15px 0;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
  }
}

.machine-info {
  p {
    margin: 8px 0;
    color: #4b5563;
    
    strong {
      color: #1f2937;
    }
  }
}

.parts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.part-card {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  transition: all 0.2s;
  
  &:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .part-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 6px;
    margin-right: 12px;
    
    :deep(.arco-icon) {
      font-size: 20px;
      color: #3b82f6;
    }
  }
  
  .part-info {
    flex: 1;
    
    h4 {
      margin: 0 0 4px 0;
      color: #1f2937;
      font-size: 14px;
      font-weight: 600;
    }
    
    p {
      margin: 2px 0;
      color: #6b7280;
      font-size: 12px;
    }
  }
}

.import-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  
  p {
    margin: 4px 0;
    color: #4b5563;
    font-size: 13px;
    
    strong {
      color: #1f2937;
    }
  }
}

// 向导全屏占满时的样式调整
:deep(.dialog-overlay) {
  backdrop-filter: blur(4px);
}
</style> 