<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        type="primary"
        round
        @click="handerCreate"
      >新建版本</el-button>
    </div>
    <MyTablePage ref="table" v-bind="tableProps">
      <template slot="operation" slot-scope="scope">
        <el-button
          type="success"
          size="mini"
          round
          @click="handlerChange(scope.row)"
        >修改</el-button>
        <el-button
          type="danger"
          size="mini"
          round
          @click="handerDel(scope.row)"
        >删除</el-button>
      </template>
    </MyTablePage>
  </div>
</template>

<script>
import { list, del } from '@/api/release'

import { filterFields, tableFields } from '@/define/release'

import MyTablePage from '@/quickComponents/MyTablePage'
export default {
  components: { MyTablePage },
  data() {
    return {
      tableProps: {
        listMethod: list,
        listKey: 'd',
        hideFilter: true,
        filterFields,
        tableFields: {
          ...tableFields,
          operation: {
            label: '操作',
            prop: 'operation',
            props: {
              width: '200px'
            }
          }
        },
      },
    }
  },
  methods: {
    handerCreate() {
      this.$router.push('create')
    },
    handlerChange({ id }) {
      this.$router.push({
        path: 'update',
        query: {
          id
        }
      })
    },
    // 删除
    handerDel(row) {
      const { title: name, id } = row
      this.$confirm(`是否删除${name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.$refs['table'].getList()
        })
      })
    },
  }
}
</script>
