<template>
  <div>
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <header-box :search="search" @searchClick="getData" />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <div style="text-align:right;padding:5px 10px">
        <el-button size='mini' type="primary" @click="backups">备份</el-button>
      </div>
      <content-box :tableData='tableData' :loading='loading' :pagination='pagination' />
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
        layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
        :current-page="pagination.pageNum" :total="pagination.total">
      </el-pagination>
    </el-card>
    <back-dialog :diaFlage='diaFlage' @cancel="cancel" @getData="getData" />
  </div>
</template>
<script>
  import {
    getTable
  } from "@/api/dataManagement/dataBackups"
  import backDialog from "./components/backDialog.vue"
  import headerBox from "./components/header.vue"
  import contentBox from "./components/content.vue"
  import {
    message,
    dateFormatTa
  } from '@/utils/common'
  export default {
    data() {
      return {
        diaFlage: false,
        search: {
          time: "",
        },
        tableData: [],
        loading: false,
        pagination: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
        params: {}
      }
    },
    methods: {
      backups() {
        this.diaFlage = true
      },
      cancel() {
        this.diaFlage = false
      },
      getData() {
        this.loading = true
        this.params = {
          page: this.pagination.pageNum,
          limit: this.pagination.pageSize,
          taskCode: 3,
          startTaskDate: this.search.time ? dateFormatTa(this.search.time).start : "",
          endTaskDate: this.search.time ? dateFormatTa(this.search.time).end : ""
        }
        getTable(this.params).then(res => {
          this.tableData = res.body.list
          this.pagination.total = res.body.total
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.getData()
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.getData()
      },
    },
    components: {
      headerBox,
      contentBox,
      backDialog
    },
    created() {
      this.getData()
    }
  }

</script>
