<template>
  <div class="pa-3 white">
    <m-search :items="searchItems" v-model="searchValues" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :show-select="false"
      :is-tools="false"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #navBtn>
        <v-btn elevation="5" class="buttons" color="primary" rounded @click="handleAdd">
          <v-icon left>mdi-plus</v-icon>
          创建备份
        </v-btn>
      </template>
      <template #actions="{ item }">
        <v-btn text color="primary" @click="handleAdd(item)">创建备份</v-btn>
        <v-btn text color="primary" @click="handleDetails(item)">查看备份文件</v-btn>
      </template>
    </m-table>
    <BackupDetails ref="backupDetailsRefs" @success="init"></BackupDetails>
    <BackupCreate ref="backupCreateRefs" @success="init"></BackupCreate>
  </div>
</template>

<script>
import MSearch from '@/components/MSearch'
import MTable from '@/components/List/table.vue'
import BackupDetails from './backupDetails.vue'
import BackupCreate from './backupCreate.vue'
import {
  getPgBackupList
} from '@/api/dataChart'
export default {
  name: 'pgBackup',
  components: { MSearch, MTable, BackupDetails, BackupCreate },
  data () {
    return {
      loading: false,
      show: false,
      searchValues: {},
      searchItems: [
        {
          type: 'autocomplete',
          label: '备份目录',
          key: 'global_only',
          items: [
            { label: '仅查询全局备份目录', value: true },
            { label: '不限备份目录', value: false }
          ]
        },
        {
          type: 'text',
          label: '任务id',
          key: 'task_id'
        }
      ],
      queryData: {
        name: null
      },
      headers: [
        { text: '任务ID', align: 'start', value: 'task_id' },
        { text: '类型', align: 'center', value: 'type' },
        { text: '路径', align: 'start', value: 'relative_path' },
        { text: '操作', value: 'actions' }
      ],
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await getPgBackupList(this.searchValues)
        this.items = data.backup_locations
        this.total = data.summary.total_locations
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleAdd (item) {
      this.$refs.backupCreateRefs.open(item)
    },
    handleDelete (ids) {
      if (Array.isArray(ids) && !ids.length) return this.$snackbar.warning('请选择要删除的选项')
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          try {
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    handleDetails (item) {
      this.$refs.backupDetailsRefs.open(item)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
