<template>
  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px">
    <!--工具栏-->
    <div class="head-container">
      <date-range-picker v-model="query.createTime" class="date-item" />
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    </div>
    <el-form size="small" label-width="80px">
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" style="width: 100%" @row-click="showRow">
        <el-table-column width="30px">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.$index" />
          </template>
        </el-table-column>
        <el-table-column prop="appName" label="应用名称" />
        <el-table-column prop="ip" label="部署IP" />
        <el-table-column prop="deployDate" label="部署时间" />
        <el-table-column prop="deployUser" label="部署人员" />
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button v-permission="['admin','deploy:add']" :loading="submitLoading" type="primary" @click="doSubmit">确认</el-button>
    </div>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'
import { reducte } from '@/api/mnt/deployHistory'
import DateRangePicker from '@/components/DateRangePicker'
export default {
  components: { DateRangePicker },
  mixins: [crud],
  props: {
    appName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      submitLoading: false,
      dialog: false,
      history: [],
      radio: '',
      appNames: '',
      selectIndex: ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'api/deployHistory'
      this.deployId = this.$parent.deployId
      if (this.deployId === '') {
        return false
      }
      this.sort = 'deployDate,desc'
      this.params['deployId'] = this.deployId
      return true
    },
    showRow(row) {
      this.radio = this.data.indexOf(row)
      this.selectIndex = row.id
    },
    cancel() {
      this.dialog = false
      this.submitLoading = false
    },
    doSubmit() {
      if (this.selectIndex === '') {
        this.$message.error('请选择要还原的备份')
      } else {
        this.submitLoading = true
        reducte(JSON.stringify(this.data[this.radio]))
          .then(res => {
            this.dialog = false
            this.submitLoading = false
            this.appNames = ''
            this.$parent.crud.toQuery()
          })
          .catch(err => {
            this.submitLoading = false
            console.log('error:' + err.response.data.message)
          })
      }
    }
  }
}
</script>

<style scoped>
</style>