<template>
  <a-card :bordered="false" :loading="loading">
    <a-row :gutter="16">
      <a-col :span="6" :md="4" :sm="6" v-for="(item, index) in dataList" :key="index">
        <a-card @click="handlerItem(item)" hoverable style="width: 100%; margin-bottom: 15px;">
          <img slot="cover" alt="example" :src="item.coverImage" />
          <div>
            <h4>{{ item.projectName }}</h4>
            <div class="flex-center justify-between">
              <div>课时: {{ item.totalCourseHours }}小时</div>
              <div>{{ item.trainType === 1 ? '必修课' : '选修课' }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { reqRecommendList } from '@/api/mycourse/index'
export default {
  components: {},
  data () {
    return {
      dataList: [],
      loading: true
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      reqRecommendList({ pageSize: 20, pageNum: 1 }).then(res => {
        this.dataList = res.rows
        this.loading = false
      })
    },
    handlerItem (data) {
      this.$router.push({
        path: '/mycourse/courseLearn',
        query: { courseId: data.id }
      })
    }
  }
}
</script>

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