<template>
  <div class="file-upload-test">
    <h2>文件上传组件测试</h2>
    
    <!-- 封面模式测试 -->
    <section class="test-section">
      <h3>1. 封面模式测试</h3>
      <div class="test-content">
        <div class="cover-upload-wrapper">
          <FileUpload 
            mode="cover"
            v-model:coverImg="coverImage"
            accept="image/*"
            :maxSize="5 * 1024 * 1024"
            @upload-success="handleCoverUploadSuccess"
            @upload-error="handleUploadError"
            style="height: auto;"
          />
        </div>
        <div class="test-info">
          <p><strong>当前封面:</strong> {{ coverImage || '无' }}</p>
          <p><strong>说明:</strong> 点击上传封面图片，支持JPG、PNG、GIF格式，最大5MB</p>
        </div>
      </div>
    </section>

    <!-- 弹窗模式测试 -->
    <section class="test-section">
      <h3>2. 弹窗模式测试</h3>
      <div class="test-content">
        <FileUpload 
          mode="dialog"
          v-model:fileList="dialogFileList"
          :maxCount="5"
          :maxSize="10 * 1024 * 1024"
          @upload-success="handleDialogUploadSuccess"
          @upload-error="handleUploadError"
        />
        <div class="test-info">
          <p><strong>已上传文件数:</strong> {{ dialogFileList.length }}</p>
          <p><strong>说明:</strong> 点击按钮打开弹窗，支持多文件上传，最多5个文件，每个文件最大10MB</p>
          <div v-if="dialogFileList.length > 0" class="uploaded-files">
            <h4>已上传的文件:</h4>
            <ul>
              <li v-for="file in dialogFileList" :key="file.fileId">
                <strong>{{ file.name }}</strong> 
                <span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
                <span class="file-type">{{ file.type }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容模式测试 -->
    <section class="test-section">
      <h3>3. 内容模式测试</h3>
      <div class="test-content">
        <FileUpload 
          mode="content"
          v-model:fileList="contentFileList"
          :maxCount="3"
          :maxSize="20 * 1024 * 1024"
          @upload-success="handleContentUploadSuccess"
          @upload-error="handleUploadError"
        />
        <div class="test-info">
          <p><strong>已上传文件数:</strong> {{ contentFileList.length }}</p>
          <p><strong>说明:</strong> 直接在页面中显示上传区域，最多3个文件，每个文件最大20MB</p>
          <div v-if="contentFileList.length > 0" class="uploaded-files">
            <h4>已上传的文件:</h4>
            <ul>
              <li v-for="file in contentFileList" :key="file.fileId">
                <strong>{{ file.name }}</strong> 
                <span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
                <span class="file-type">{{ file.type }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 消息提示 -->
    <div v-if="message" class="message" :class="messageType">
      <p>{{ message }}</p>
      <button @click="clearMessage">×</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FileUpload from './FileUpload.vue'
import type { TbSysFileDTO } from '@/types/file/file'

// 响应式数据
const coverImage = ref<string>('')
const dialogFileList = ref<TbSysFileDTO[]>([])
const contentFileList = ref<TbSysFileDTO[]>([])
const message = ref<string>('')
const messageType = ref<'success' | 'error'>('success')

// 处理封面上传成功
const handleCoverUploadSuccess = (files: TbSysFileDTO[]) => {
  console.log('封面上传成功:', files)
  showMessage('封面上传成功！', 'success')
}

// 处理弹窗上传成功
const handleDialogUploadSuccess = (files: TbSysFileDTO[]) => {
  console.log('弹窗上传成功:', files)
  showMessage(`成功上传 ${files.length} 个文件！`, 'success')
}

// 处理内容上传成功
const handleContentUploadSuccess = (files: TbSysFileDTO[]) => {
  console.log('内容上传成功:', files)
  showMessage(`成功上传 ${files.length} 个文件！`, 'success')
}

// 处理上传错误
const handleUploadError = (error: string) => {
  console.error('上传错误:', error)
  showMessage(error, 'error')
}

// 显示消息
const showMessage = (msg: string, type: 'success' | 'error') => {
  message.value = msg
  messageType.value = type
  
  // 3秒后自动清除消息
  setTimeout(() => {
    clearMessage()
  }, 3000)
}

// 清除消息
const clearMessage = () => {
  message.value = ''
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>
<style lang="scss" scoped>
.file-upload-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
  }

  .test-section {
    margin-bottom: 40px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    h3 {
      background-color: #f8f9fa;
      margin: 0;
      padding: 15px 20px;
      color: #495057;
      font-size: 20px;
      border-bottom: 1px solid #e1e5e9;
    }

    .test-content {
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: start;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .test-info {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
      border-left: 4px solid #007bff;

      p {
        margin: 8px 0;
        
        strong {
          color: #495057;
        }
      }

      .uploaded-files {
        margin-top: 15px;

        h4 {
          margin: 0 0 10px 0;
          color: #495057;
          font-size: 16px;
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            padding: 8px 12px;
            background-color: white;
            border-radius: 4px;
            margin-bottom: 5px;
            border: 1px solid #e1e5e9;
            
            .file-size {
              color: #6c757d;
              font-size: 12px;
              margin-left: 8px;
            }

            .file-type {
              color: #28a745;
              font-size: 12px;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }

  .message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 6px;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1000;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    &.success {
      background-color: #28a745;
    }

    &.error {
      background-color: #dc3545;
    }

    p {
      margin: 0;
      flex: 1;
    }

    button {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      &:hover {
        background-color: rgba(255,255,255,0.2);
      }
    }
  }

//   // 为封面模式设置默认尺寸，可被外部覆盖
//   .cover-upload-wrapper .file-upload.cover .area.cover {
//     width: 300px;
//     height: 200px;
//   }

//   .cover-upload-wrapper .file-upload.cover .image-wrapper {
//     width: 300px;
//     height: 200px;
//   }

//   // 为内容模式也设置相同的默认尺寸，演示统一行为
//   .file-upload.content .area {
//     width: 300px;
//     height: 200px;
//   }
}
</style>