<template>
  <div class="file-list-container">
    <el-table 
      :data="fileList" 
      border 
      size="small" 
      v-loading="loading"
      style="width: 100%;"
    >
      <el-table-column 
        label="文件名" 
        prop="originalName" 
        min-width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-document" style="margin-right: 8px;"></i>
          {{ scope.row.originalName }}
        </template>
      </el-table-column>
      <el-table-column 
        label="操作" 
        width="100" 
        align="center"
      >
        <template slot-scope="scope">
          <el-button 
            type="text" 
            icon="el-icon-download" 
            @click="downloadFile(scope.row)"
            size="small"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 空数据提示 -->
    <div v-if="fileList.length === 0 && !loading" class="empty-tip">
      <el-empty description="暂无文件数据"></el-empty>
    </div>
  </div>
</template>

<script>
import { listByIds } from "@/api/system/oss";

export default {
  name: "FileList",
  props: {
    ossIds: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      fileList: [],
      loading: false // 加载状态
    }
  },
  watch: {
    ossIds: {
      handler(val) {
        if (val) {
          this.getFileList();
        } else {
          this.fileList = []; // 清空文件列表
        }
      },
      immediate: true,
    }
  },
  methods: {
    async getFileList() {
      if (!this.ossIds) return;
      
      this.loading = true;
      try {
        let res = await listByIds(this.ossIds);
        this.fileList = res.data || [];
      } catch (error) {
        this.$message.error('获取文件列表失败：' + (error.message || '未知错误'));
        this.fileList = [];
      } finally {
        this.loading = false;
      }
    },
    
    // 文件下载方法
    downloadFile(file) {
      if (!file || !file.ossId) {
        this.$message.warning('文件下载地址不存在');
        return;
      }
      this.$download.oss(file.ossId);
    }
  }
}
</script>

<style scoped>
.file-list-container {
  width: 100%;
  min-height: 100px;
}

.empty-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

::v-deep .el-table {
  --el-table-header-text-color: #606266;
  --el-table-row-hover-bg-color: #f5f7fa;
}
</style>