<template>
  <div class="file-interpretation">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="文件上传" name="upload">
        <div class="upload-section">
          <el-upload
            drag
            action="#"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            multiple
          >
            <div class="upload-icon">📁</div>
            <div class="upload-text">
              <p>点击或拖拽文件到此处上传</p>
              <p class="upload-hint">支持 PDF、Word、TXT 格式</p>
            </div>
          </el-upload>

          <!-- 已上传文件列表 -->
          <div class="uploaded-files" v-if="uploadedFiles.length">
            <h4>已上传文件</h4>
            <div class="file-list">
              <div class="file-item" v-for="file in uploadedFiles" :key="file.id">
                <div class="file-icon">📄</div>
                <div class="file-info">
                  <h5>{{ file.name }}</h5>
                  <p>{{ file.size }} · {{ file.uploadDate }}</p>
                </div>
                <el-button size="small" @click="analyzeFile(file)">解读</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="历史文件" name="history">
        <div class="history-files">
          <div class="file-item" v-for="file in historyFiles" :key="file.id">
            <div class="file-icon">📄</div>
            <div class="file-info">
              <h5>{{ file.name }}</h5>
              <p>上传时间：{{ file.uploadDate }}</p>
              <p class="file-summary">{{ file.summary }}</p>
            </div>
            <div class="file-actions">
              <el-button size="small" @click="viewAnalysis(file)">查看解读</el-button>
              <el-button size="small" type="danger" @click="deleteFile(file)">删除</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElTabs, ElTabPane, ElUpload, ElButton, ElMessage } from 'element-plus';

const activeTab = ref('upload');
const uploadedFiles = ref<any[]>([]);
const historyFiles = ref<any[]>([]);

onMounted(() => {
  // TODO: 加载历史文件
});

function beforeUpload(file: File) {
  const allowedTypes = ['application/pdf', 'application/msword', 'text/plain', 
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
  
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error('只支持 PDF、Word、TXT 格式');
    return false;
  }
  
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error('文件大小不能超过 10MB');
    return false;
  }
  
  return true;
}

function handleUploadSuccess(response: any, file: any) {
  uploadedFiles.value.push({
    id: Date.now(),
    name: file.name,
    size: formatFileSize(file.size),
    uploadDate: new Date().toLocaleString()
  });
  ElMessage.success('文件上传成功');
}

function formatFileSize(bytes: number): string {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

function analyzeFile(file: any) {
  // TODO: 调用文件解读API
  ElMessage.info('正在解读文件...');
}

function viewAnalysis(file: any) {
  // TODO: 查看文件解读结果
}

function deleteFile(file: any) {
  // TODO: 删除文件
  ElMessage.success('文件已删除');
}
</script>

<style lang="scss" scoped>
.file-interpretation {
  min-height: 400px;
}

.upload-section {
  padding: 20px;
}

.upload-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.upload-text {
  p {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
  }
}

.upload-hint {
  font-size: 12px;
  color: #999;
}

.uploaded-files {
  margin-top: 32px;
  
  h4 {
    font-size: 16px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 16px;
  }
}

.file-list,
.history-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}

.file-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  
  h5 {
    font-size: 15px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 4px;
  }
  
  p {
    font-size: 13px;
    color: #666;
    margin: 2px 0;
  }
}

.file-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}

.file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
</style>

