<template>
  <a-card :bordered="false" :loading="loading">
    <a-tabs :default-active-key="activeTab" @change="tabChange">
      <a-tab-pane key="1" tab="年度培训计划">
        <s-table
          ref="yearTable"
          :pageSize="5"
          :columns="columns"
          :data="loadDataYear"
          :rowKey="record => record.id"
        >
          <span slot="trainType" slot-scope="text, record">
            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm
              v-if="record.status === 1"
              :title="`确定要添加${record.name}课程吗?`"
              ok-text="添加"
              cancel-text="取消"
              @confirm="handlerAddCourse(record)"
            >
              <a>添加课程</a>
            </a-popconfirm>
            <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
            <a v-if="record.status === 3">已完成学习</a>
          </span>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="单位培训计划">
        <s-table
          ref="unitTable"
          :pageSize="5"
          :columns="columns"
          :data="loadDataUnit"
          :rowKey="record => record.id"
        >
          <span slot="trainType" slot-scope="text, record">
            <a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
            <a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-popconfirm
              v-if="record.status === 1"
              :title="`确定要添加${record.name}课程吗?`"
              ok-text="添加"
              cancel-text="取消"
              @confirm="handlerAddCourse(record)"
            >
              <a>添加课程</a>
            </a-popconfirm>
            <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
            <a v-if="record.status === 3">已完成学习</a>
          </span>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import { reqMyCourseList } from '@/api/mycourse/index'
import { STable } from '@/components'
export default {
  components: {
    STable
  },
  data () {
    return {
      dataListYear: [],
      dataListUnit: [],
      activeTab: '1',
      loading: true,
      // 表头
      columns: [
        {
          title: '课程名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'courseName' }
        },
        {
          title: '课程类别',
          dataIndex: 'trainType',
          scopedSlots: { customRender: 'trainType' }
        },
        {
          title: '学习时间',
          dataIndex: 'totalCourseHours'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadDataYear: parameter => {
        const { person } = this.$store.state.user
        return reqMyCourseList({ personId: person.id, type: 2, pageNum: 1, pageSize: 5 }).then(
          res => {
            return res
          }
        )
      },
      loadDataUnit: parameter => {
        const { person } = this.$store.state.user
        return reqMyCourseList({ personId: person.id, type: 3, pageNum: 1, pageSize: 5 }).then(
          res => {
            return res
          }
        )
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.loading = false
    }, 800)
  },
  methods: {
    tabChange (key) {
      console.log('key', key)
      if (key == 1) {
        this.$refs.yearTable.refresh()
      }
      if (key == 2) {
        this.$refs.unitTable.refresh()
      }
    },
    // 点击详情
    handlerDetail () {
      this.$refs.aycourseDetail.visible = true
    },
    handlerAddCourse (row) {
      this.$emit('add', { row: row })
    },
    handlerContinue (row) {
      this.$emit('continue', { row: row })
    }
  }
}
</script>

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