<template>
  <div class="app-container">
    <el-tabs v-model="tableProps.listQuery.type">
      <el-tab-pane v-for="item of typeOptions" :key="item.value" :label="item.label" :name="item.value" />
    </el-tabs>
    <MyTablePage ref="table" v-bind="tableProps">
      <template slot="operation" slot-scope="scope">
        <el-button
          v-if="scope.row.status === '0'"
          type="primary"
          size="mini"
          round
          @click="handlerChange(scope.row)"
        >标记为已处理</el-button>
      </template>
    </MyTablePage>
  </div>
</template>

<script>
import { list, update } from '@/api/feedback'

import { typeOptions, filterFields, tableFields } from '@/define/feedback'

import MyTablePage from '@/quickComponents/MyTablePage'
export default {
  components: { MyTablePage },
  data() {
    return {
      tableProps: {
        listQuery: {
          type: 0
        },
        listMethod: list,
        filterFields,
        tableFields: {
          ...tableFields,
          operation: {
            label: '操作',
            prop: 'operation',
            props: {
              width: '200px'
            }
          }
        },
      },
      typeOptions
    }
  },
  methods: {
    handlerChange(row) {
      const { id } = row
      this.$confirm(`是否删除标记为已处理?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        update({ id, status: '1' }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.$refs['table'].getList()
        })
      })
    },
  }
}
</script>
