<template>
  <div class="container">
    <div class="top-box">
      <div class="nav-title">数据备份</div>
      <el-button type="primary" @click="handleDoBackup">开始备份</el-button>
    </div>
    <div class="table" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{ background: '#f5f7fa', color: '#909399' }"
      >
        <el-table-column
          prop="backupPath"
          label="备份文件名"
          width=""
        ></el-table-column>
        <el-table-column
          prop="backupPath"
          label="备份文件路径"
          width=""
        ></el-table-column>
        <el-table-column
          prop="backupStatus"
          label="状态"
          width="80"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.backupStatus == 1 ? 'success' : 'danger'"
              >{{ scope.row.backupStatus == 1 ? "成功" : "失败" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="backupTime"
          label="备份时间"
          width=""
        ></el-table-column>
        <el-table-column
          prop="restoreTime"
          label="恢复时间"
          width=""
        ></el-table-column>
        <el-table-column prop="name" label="操作" width="180">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="handleRestore(scope.row)"
              >恢复</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <Pagination
          :limit="params.size"
          :page="params.current"
          :total="total"
          class="pagination"
          @pagination="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { selectPage, doBackup, restore } from "@/api/backuprestore";
export default {
  data() {
    return {
      params: {
        current: 1,
        size: 10,
      },
      total: 0,
      tableData: [],
      loading: false,
    };
  },
  mounted() {
    this.handleSelectPage();
  },
  methods: {
    handleEdit() {},
    // 分页更改
    handlePageChange(pageData) {
      this.params.size = pageData.size;
      this.params.current = pageData.page;
      this.handleSelectPage();
    },
        async handleRestore(row) {

      let res = await restore({id:row.id});
      this.$message.success("恢复成功");
      this.handleSelectPage();
    },
    async handleDoBackup() {
      let res = await doBackup({});
      this.$message.success("备份成功");
      this.handleSelectPage();
    },
    async handleSelectPage() {
      this.loading = true;
      let res = await selectPage(this.params);
      this.tableData = res.records;
      this.total = res.total;
      this.loading = false;
    },
    handleClick() {
      //   this.$message.success("开始备份");
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .nav-title {
    color: #02a7f0;
    font-size: 20px;
    position: relative;
    padding-left: 16px;
    font-weight: bold;
    line-height: 28px;
  }
  .nav-title::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 1px;
    width: 5px;
    height: 100%;
    background-color: #02a7f0;
    border-radius: 4px;
  }
}
</style>