<template>
  <a-card :bordered="false" title="培训种类">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.ClassForm.showModal()">新增种类</a-button>
    </div>
    <s-table ref="table" rowKey="id" :columns="columns" :data="dataTable">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a-popconfirm title="是否删除?" @confirm="handledDel(record)">
            <a-button>删除</a-button>
          </a-popconfirm>
        </template>
      </span>
    </s-table>
    <class-form  @refreshPageData="refreshPageData"  ref="ClassForm"></class-form>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { classDel, classList } from '@/api/project/class'
import ClassForm from './ClassForm'

export default {
  data() {
    return {
      // 加载数据方法 必须为 Promise 对象
      dataTable: (parameter) => {
        return classList(Object.assign(parameter)).then((res) => {
          return res
        })
      },
      columns: [
        { title: '序号', key: 'id', dataIndex: 'id', scopedSlots: { customRender: 'serial' } },
        { title: '项目种类名称', dataIndex: 'name', key: 'name', align: 'center' },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  components: {
    STable,
    ClassForm,
    classDel,
  },
  methods: {
    //删除培训种类
    handledDel(record) {
      classDel({ ids: record.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.$refs.table.refresh(true)
        }
      })
    },
    //刷新表格
    refreshPageData() {
      this.$refs.table.refresh(true)
    },
  },
  created: {},
}
</script>

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