<template>
  <div class="app-container">
    <MyTablePage ref="table" v-bind="tableProps">
      <template slot="filter-handlers">
        <el-button
          type="primary"
          round
          @click="handerCreate"
        >新建</el-button>
      </template>
      <template slot="operation" slot-scope="scope">
        <el-button
          type="primary"
          size="mini"
          round
          @click="handerDetail(scope.row)"
        >详情</el-button>
        <el-button
          type="success"
          size="mini"
          round
          @click="handerChange(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/question'

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

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

<style lang="scss" scoped>
</style>
