<template>
  <a-card
    :bordered="false"
    :loading="loading"
  >
    <a-table
      ref="table"
      :pageSize="5"
      :columns="columns"
      :showPagination="false"
      :data-source="dataList"
      :rowKey="record => record.id">
      <template slot="trainSdate" slot-scope="text, record">
        {{ record.trainSdate }}至{{ record.trainEdate }}
      </template>
      <span slot="status" slot-scope="text, record">
        <a-tag v-if="record.status === 1" color="orange">未发布</a-tag>
        <a-tag v-if="record.status === 2" color="orange">未开始</a-tag>
        <a-tag v-if="record.status === 3" color="blue">进行中</a-tag>
        <a-tag v-if="record.status === 4" color="green">已结束</a-tag>
        <a-tag v-if="record.status === 5" color="red">已中止</a-tag>
        <template v-else>-</template>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="handlerDetail(record)">培训详情</a>
      </span>
    </a-table>
    <CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
  </a-card>
</template>

<script>
import { reqCourseCenterList } from '@/api/mycourse/index'
import CentralizedTrainingDetail from './CentralizedTrainingDetail.vue'
export default {
  components: {
    CentralizedTrainingDetail
  },
	data () {
		return {
      dataList: [],
      activeTab: '1',
      loading: true,
      columns: [
        {
          title: '培训名称',
          dataIndex: 'trainName'
        },
        {
          title: '培训时间',
          dataIndex: 'trainSdate',
          scopedSlots: { customRender: 'trainSdate' }
        },
        {
          title: '培训地点',
          dataIndex: 'address'
        },
        {
          title: '培训状态',
          dataIndex: 'status'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return reqCourseCenterList({ pageNum: 1, pageSize: 5 }).then(res => {
          return res
        })
      },
      selectedRows: [], // 选中行的数据
      options: {}
		}
	},
	mounted () {
    setTimeout(() => {
      this.loading = false
    }, 800)
  },
	methods: {
		// 点击详情
    handlerDetail (row) {
      this.$refs.aycourseDetail.getDetail(row)
      this.$refs.aycourseDetail.visible = true
    }
	}
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
