<template>
  <div>
    <el-card class="m-t" :body-style="{ padding: 0 }">
      <div slot="header" class="clearfix">
        <span>快照列表</span>
        <slot name="operate"></slot>
      </div>
      <basic-table border :data="list" :params="params" :get-list="getSnapshot" :total="total" style="margin: 10px">
        <el-table-column prop="name" label="快照名称"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <status-icon :type="scope.row.statusColor">
              {{ scope.row.status1 }}
            </status-icon>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime || scope.row.gmtCreate }}
          </template>
        </el-table-column>
        <slot name="el-table-column"></slot>
        <el-table-column prop="createTime" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="remove(scope.row)"> <i class="el-icon-delete"></i> 删除 </el-button>
            <div class="action-divider" v-if="detail.vendorType == 'VMWARE'"></div>
            <el-button type="text" @click="revert(scope.row)" v-if="detail.vendorType == 'VMWARE' || detail.vendorType == 'SMARTX' || detail.vendorType == 'CLOUDTOWER'"> 恢复 </el-button>
          </template>
        </el-table-column>
      </basic-table>
    </el-card>
  </div>
</template>

<script>
import { getSnapshot, removeSnapshot, patchSnapshot } from 'services/platform/index'
import '../index.scss'
export default {
  props: {
    detail: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {},
  data() {
    return {
      list: [],
      total: 0,
      params: {
        page: 1,
        rows: 10
      }
    }
  },
  created() {
    this.getSnapshot()
  },
  methods: {
    onmessage(data) {
      if (data.operate.indexOf('snapshot') > -1) {
        this.getSnapshot()
      }
    },
    getSnapshot(page) {
      this.params.page = page || this.params.page
      const eqParam = {
        param: {
          vmId: this.detail.id,
          vendorId: this.detail.vendorId
        },
        sign: 'EQ'
      }
      if (this.detail.vendorType != 'VMWARE' && this.detail.vendorType != 'OPENSTACK' && this.detail.vendorType != 'EASYSTACK' && this.detail.vendorType != 'FUSIONSPHERE') {
        eqParam.param.snapshotType = 'VM'
      }
      this.params.params = JSON.stringify([eqParam])
      getSnapshot(this.params).then(data => {
        if (data.success) {
          this.list = data.data.rows
          this.total = data.data.total
          this.list.forEach(item => {
            if (item.status == 'AVAILABLE') {
              item.status1 = '可用'
              item.statusColor = 'normal'
            } else if (item.status == 'INAVAILABLE') {
              item.status1 = '不可用'
              item.statusColor = 'danger'
            } else if (item.status == 'creating') {
              item.status1 = '创建中'
              item.statusColor = 'info'
            } else if (item.status == 'resuming') {
              item.status1 = '恢复云主机中'
              item.statusColor = 'warning'
            } else if (item.status == 'ready') {
              item.status1 = '创建成功'
              item.statusColor = 'success'
            } else if (item.status == 'deleting') {
              item.status1 = '删除中'
              item.statusColor = 'danger'
            }
          })
        }
      })
    },
    remove(data) {
      this.$confirm('此操作将永久删除该快照, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeSnapshot(data.id).then(data => {
          if (data.success) {
            this.$message({
              type: 'success',
              message: data.message
            })
            this.getSnapshot()
          }
        })
      })
    },
    revert(data) {
      this.$confirm('此操作将恢复该快照, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        patchSnapshot('revert', { id: data.id }).then(data => {
          if (data.success) {
            this.$message({
              type: 'success',
              message: data.message
            })
            this.handleSearch()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss"></style>
