<template>
  <div class="test-container">
    <h2>FileSelector组件集成测试</h2>
    
    <el-card class="test-card">
      <template #header>
        <span>基础功能测试</span>
      </template>
      
      <el-form label-width="120px">
        <el-form-item label="选择的图片">
          <div class="result-display">
            <strong>当前值: </strong>
            <span v-if="testImage">{{ testImage }}</span>
            <span v-else class="no-value">未选择</span>
          </div>
        </el-form-item>
        
        <el-form-item label="图片选择器">
          <file-selector
            v-model="testImage"
            input-type="image"
            :input-size="120"
            :show-upload-button="true"
            :show-net-button="true"
            :tabs-show="1000"
            value-key="url"
            :multiple="false"
            :selectable="true"
          />
        </el-form-item>
        
        <el-form-item label="图片预览">
          <div class="image-preview-test">
            <el-image
              v-if="testImage"
              :src="testImage"
              fit="contain"
              style="width: 200px; height: 150px; border: 1px solid #ddd;"
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <span>加载失败</span>
                </div>
              </template>
            </el-image>
            <div v-else class="no-image-placeholder">
              <el-icon><Picture /></el-icon>
              <span>请选择图片</span>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="testSave">测试保存</el-button>
          <el-button @click="testClear">清除选择</el-button>
          <el-button @click="testRandomImage">测试网络图片</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="test-log">
      <template #header>
        <span>测试日志</span>
        <el-button size="small" @click="clearLog">清除日志</el-button>
      </template>
      
      <div class="log-content">
        <div v-for="(log, index) in testLogs" :key="index" class="log-item">
          <span class="log-time">{{ log.time }}</span>
          <span :class="['log-level', log.level]">{{ log.level.toUpperCase() }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
        <div v-if="testLogs.length === 0" class="no-logs">
          暂无测试日志
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';
import FileSelector from '/@/components/fileSelector/index.vue';

// 测试数据
const testImage = ref<string>('');
const testLogs = ref<Array<{time: string, level: string, message: string}>>([]);

// 添加日志
const addLog = (level: string, message: string) => {
  const now = new Date();
  const time = now.toLocaleTimeString();
  testLogs.value.unshift({
    time,
    level,
    message
  });
  
  // 限制日志数量
  if (testLogs.value.length > 50) {
    testLogs.value = testLogs.value.slice(0, 50);
  }
};

// 监听图片选择变化
watch(testImage, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    addLog('info', `图片选择变化: ${oldValue || '无'} -> ${newValue || '无'}`);
  }
});

// 测试保存
const testSave = () => {
  if (!testImage.value) {
    ElMessage.warning('请先选择一张图片');
    addLog('warn', '保存测试失败: 未选择图片');
    return;
  }
  
  addLog('success', `保存测试成功: ${testImage.value}`);
  ElMessage.success('测试保存成功！');
};

// 清除选择
const testClear = () => {
  const oldValue = testImage.value;
  testImage.value = '';
  addLog('info', `清除选择: ${oldValue} -> 空值`);
  ElMessage.info('已清除选择');
};

// 测试网络图片
const testRandomImage = () => {
  const testUrls = [
    'https://picsum.photos/400/300?random=1',
    'https://picsum.photos/400/300?random=2',
    'https://picsum.photos/400/300?random=3',
  ];
  
  const randomUrl = testUrls[Math.floor(Math.random() * testUrls.length)];
  testImage.value = randomUrl;
  addLog('info', `设置测试网络图片: ${randomUrl}`);
  ElMessage.success('已设置测试网络图片');
};

// 清除日志
const clearLog = () => {
  testLogs.value = [];
  ElMessage.info('已清除测试日志');
};

// 初始化日志
addLog('info', 'FileSelector组件测试页面已加载');
</script>

<style lang="scss" scoped>
.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  
  h2 {
    text-align: center;
    color: #303133;
    margin-bottom: 20px;
  }
  
  .test-card {
    margin-bottom: 20px;
    
    .result-display {
      padding: 10px;
      background-color: #f5f7fa;
      border-radius: 4px;
      border: 1px solid #e4e7ed;
      
      .no-value {
        color: #909399;
        font-style: italic;
      }
    }
    
    .image-preview-test {
      .no-image-placeholder {
        width: 200px;
        height: 150px;
        border: 1px dashed #ddd;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        background-color: #fafafa;
        
        .el-icon {
          font-size: 32px;
          margin-bottom: 8px;
        }
      }
      
      .image-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        
        .el-icon {
          font-size: 24px;
          margin-bottom: 4px;
        }
      }
    }
  }
  
  .test-log {
    .el-card__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .log-content {
      max-height: 300px;
      overflow-y: auto;
      
      .log-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        
        &:last-child {
          border-bottom: none;
        }
        
        .log-time {
          color: #909399;
          margin-right: 12px;
          min-width: 80px;
        }
        
        .log-level {
          margin-right: 12px;
          padding: 2px 6px;
          border-radius: 3px;
          font-weight: bold;
          min-width: 60px;
          text-align: center;
          
          &.info {
            background-color: #e1f3fe;
            color: #1890ff;
          }
          
          &.success {
            background-color: #f6ffed;
            color: #52c41a;
          }
          
          &.warn {
            background-color: #fff7e6;
            color: #fa8c16;
          }
          
          &.error {
            background-color: #fff2f0;
            color: #ff4d4f;
          }
        }
        
        .log-message {
          flex: 1;
          color: #303133;
        }
      }
      
      .no-logs {
        text-align: center;
        color: #909399;
        padding: 20px;
        font-style: italic;
      }
    }
  }
}
</style>