<template>
  <div class="file-manager-page">
    <el-page-header @back="goBack" title="返回">
      <template #content>
        <span class="page-title">文件管理</span>
      </template>
    </el-page-header>

    <el-row :gutter="20" class="content-wrapper">
      <!-- 左侧：文件上传 -->
      <el-col :span="8">
        <file-upload
          ref="uploadRef"
          :auto-upload="false"
          :show-progress="true"
          :show-image-preview="true"
          @upload-success="handleUploadSuccess"
          @upload-error="handleUploadError"
        />
      </el-col>

      <!-- 右侧：文件列表 -->
      <el-col :span="16">
        <file-list ref="fileListRef" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import FileUpload from '@/components/file/FileUpload.vue'
import FileList from '@/components/file/FileList.vue'

const router = useRouter()
const uploadRef = ref()
const fileListRef = ref()

// 返回上一页
const goBack = () => {
  router.back()
}

// 上传成功
const handleUploadSuccess = (response: any, file: any) => {
  ElMessage.success(`文件 ${file.name} 上传成功`)
  // 刷新文件列表
  fileListRef.value?.fetchFiles()
}

// 上传失败
const handleUploadError = (error: Error, file: any) => {
  ElMessage.error(`文件 ${file.name} 上传失败: ${error.message}`)
}
</script>

<style scoped lang="scss">
.file-manager-page {
  padding: 20px;

  .page-title {
    font-size: 18px;
    font-weight: 500;
  }

  .content-wrapper {
    margin-top: 20px;
  }
}
</style>
