<template>
  <div class="recent-file-list">
    <el-table
      :data="fileList"
      style="width: 100%"
      height="350"
      :default-sort="{ prop: 'modified', order: 'descending' }"
    >
      <el-table-column prop="title" label="文档名称" align="center">
        <!-- <template #default="scope">
          <i :class="getFileIcon(scope.row.name)"></i>
          {{ scope.row.name }}
        </template> -->
      </el-table-column>
      <!-- <el-table-column prop="size" label="Size" width="120" /> -->
      <el-table-column
        prop="create_time"
        label="创建时间"
        sortable
        align="center"
      />
      <el-table-column prop="status" label="文档状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import { searchlistDoc } from "@/api/document";
export default {
  name: "RecentFile",
  data() {
    return {
      queryForm: {
        page: 1,
        pageSize: 100,
        title: "",
        category_id: "",
        status: "",
      },
      fileList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    getFileIcon(fileName) {
      const extension = fileName.split(".").pop().toLowerCase();
      switch (extension) {
        case "fig":
          return "el-icon-picture";
        case "jpg":
        case "png":
          return "el-icon-picture-outline";
        case "html":
          return "el-icon-document";
        case "zip":
          return "el-icon-folder";
        case "mp3":
          return "el-icon-headset";
        case "mp4":
          return "el-icon-video-camera";
        case "js":
          return "el-icon-tickets";
        default:
          return "el-icon-document";
      }
    },
    getStatusType(status) {
      return status === 5 ? "success" : "danger";
    },
    getStatusText(status) {
      return status === 5 ? "启用" : "停用";
    },
    init() {
      searchlistDoc(this.queryForm).then((res) => {
        // 假设 res.data.dataList 是包含所有文件信息的数组
        const allFiles = res.data.dataList;

        // 按创建时间降序排序
        allFiles.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

        // 取前 10 条数据
        this.fileList = allFiles.slice(0, 10);
      });
    },
  },
};
</script>
  
  <style scoped>
.recent-file-list {
  /* Add any additional styling here */
}
</style>