<template>
  <div class="list" v-show="loaded">
    <template v-if="list.length">
      <course-list-item
        v-for="item in list"
        :data="item"
        :key="item.id"
        v-bind="$attrs"
        v-on="$listeners"
      />
    </template>
    <template v-else>
      <slot name="empty">
        <van-empty description="暂无内容" />
      </slot>
    </template>
  </div>
</template>

<script>
import * as api from '@/api/course.js'
import CourseListItem from './CourseListItem.vue'

export default {
  name: 'CourseList',
  components: { CourseListItem },
  data() {
    return {
      loaded: false,
      list: []
    }
  },
  methods: {
    getCourseList() {
      api
        .getCourseModule()
        .then(response => {
          this.list = response
        })
        .finally(() => {
          this.loaded = true
        })
    }
  },
  beforeMount() {
    this.getCourseList()
  }
}
</script>
