<template>
  <div>
    <a-card :bordered="false" >
      <a-card title="我的课程" :bodyStyle="{padding: '0px !important'}" >
        <MyCourseList @add="handlerAddCourse" @continue="handlerContinue"></MyCourseList>
      </a-card>
      <br />
      <a-card title="培训计划" :bodyStyle="{padding: '0px !important'}">
        <!-- <a slot="extra" href="#">查看更多</a> -->
        <TrainingPlan @add="handlerAddCourse" @continue="handlerContinue"></TrainingPlan>
      </a-card>
      <br />
      <a-card title="集中培训" :bodyStyle="{padding: '0px !important'}">
        <!-- <a slot="extra" href="#">查看更多</a> -->
        <CentralizedTraining></CentralizedTraining>
      </a-card>
      <br />
      <a-card title="系统推荐课程" :bodyStyle="{padding: '0px !important'}">
        <!-- <a slot="extra" href="#">查看更多</a> -->
        <CourseRecommendation></CourseRecommendation>
      </a-card>
    </a-card>
  </div>
</template>
<script>
import MyCourseList from './MyCourseList.vue' // 我的课程
import TrainingPlan from './TrainingPlan.vue' // 培训计划
import CentralizedTraining from './CentralizedTraining.vue' // 集中培训
import CourseRecommendation from './CourseRecommendation.vue' // 课程推荐
import { reqAddMyCourse } from '@/api/mycourse/index'
export default {
  components: {
    MyCourseList,
    TrainingPlan,
    CentralizedTraining,
    CourseRecommendation
  },
  data () {
    return {

    }
  },

  methods: {
    // 添加课程
    handlerAddCourse ({ row, callback }) {
      const { person } = this.$store.state.user
      reqAddMyCourse({ personId: person.id, projectId: row.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('添加课程成功!')
          callback && callback()
        }
      })
    },
    // 继续学习
    handlerContinue ({ row }) {
      this.$router.push({
        path: '/mycourse/courseLearn',
        query: { courseId: row.id }
      })
    }
  }
}
</script>
<style lang="less">

</style>
