<template>
  <div class="app-container">
    <MyTablePage ref="table" v-bind="tableProps">
      <template slot="filter-handlers">
        <el-button
          type="primary"
          round
          @click="handerCreate"
        >新建{{ title }}</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/affiche'

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

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'
            }
          }
        }
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const [parentRoute] = this.$route.matched
      const { name } = parentRoute
      switch (name) {
        case 'News':
          this.tableProps.listQuery.type = 0
          this.title = '新闻'
          break
        case 'Affiche':
          this.tableProps.listQuery.type = 1
          this.title = '公告'
          break
      }
    },
    handerCreate() {
      this.$router.push({
        path: 'create'
      })
    },
    handerChange(row) {
      const { id } = row
      this.$router.push({
        path: 'update',
        query: { id }
      })
    },
    handerDetail(row) {
      const { id } = row
      this.$router.push({
        path: 'detail',
        query: { id }
      })
    },
    // 删除
    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>
