<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
    </div>
    <TablePage
      :data="list.records"
      :tableTitle="tableTitle"
      :operates="tableOperates"
    >
      <template v-slot:fileSize="scope">
        {{ getFileSize(scope.scope.fileSize) }}
      </template>
      <template v-slot:operates="scope">
        <TableOperation
          :operations="tableOperations"
          :rawData="scope.scope.row"
          @handleOperation="handleOperation"
        ></TableOperation>
      </template>
    </TablePage>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(list.current)"
      :page-sizes="[10, 20, 40, 50]"
      :page-size="Number(list.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(list.total)"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { importRecordsTitle, importOperates, importOperations } from "./config";
import { getImportListPage, deleteByBatchNum } from "@/api/file";

export default {
  data() {
    return {
      list: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchForm: {
        name: "",
        status: "",
      },
      searchConfig: [
        {
          prop: "type",
          type: "select",
          label: "所属分类",
          selectOptions: [
            {
              label: "文物",
              value: "biz_cultural_relic",
            },
            {
              label: "展览",
              value: "biz_exhibition",
            },
          ],
        },
        {
          prop: "batchNum",
          type: "input",
          label: "批次",
        },
      ],
    };
  },
  computed: {
    tableTitle() {
      return importRecordsTitle;
    },
    tableOperates() {
      return importOperates;
    },
    tableOperations() {
      return importOperations;
    },
    getFileSize(fileSize) {
      return (fileSize) => {
        return (Number(fileSize) / 1024 / 1024).toFixed(2) + "M";
      };
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async search(form) {
      var params = {
        page: this.list.current,
        limit: this.list.size,
        ...form,
      };
      let res = await getImportListPage(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },

    reset() {
      this.loadData();
    },

    //   加载表格数据
    async loadData() {
      var params = {
        page: this.list.current,
        limit: this.list.size,
      };
      let res = await getImportListPage(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },
    async handleOperation(value, row) {
      console.log("handleOperation", value, row);
      switch (value.type) {
        case "add":
          this.editVisible = true;
          break;
        case "view":
          break;
        case "delete":
          let { batchNum, type, id } = row;
          let deleteRes = await deleteByBatchNum({ batchNum, type });
          if (deleteRes.code == 0) {
            this.$message.success("删除成功！");
            this.loadData();
          }
          break;
      }
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  margin: 16px;
}
</style>
