<template>
  <component
    :is="currentCompoent"
    :chapter="chapter"
    v-bind="$attrs"
    v-on="$listeners"
    v-if="chapter"
    :key="pid"
  />
</template>

<script>
// components
import ChapterPlayer from './player/chapterPlayer.vue' // 章节视频
import ChapterWork from './work/index.vue' // 章节作业
import ChapterExam from './work/chapterExam.vue' // 章节考试
import ChapterRead from './read/chapterRead.vue' // 章节资料
import ChapterLive from './live/chapterLive.vue' // 章节直播
import CourseWork from './work/courseWork.vue' // 课程大作业
import CourseRead from './read/courseRead.vue' // 课程资料
import CourseExam from './work/courseExam.vue' // 课程考试

export default {
  name: 'ViewerLayout',
  components: {
    ChapterPlayer,
    ChapterWork,
    ChapterRead,
    ChapterExam,
    ChapterLive,
    CourseWork,
    CourseRead,
    CourseExam
  },
  props: {
    chapter: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    currentCompoent() {
      const componentNames = {
        2: 'ChapterPlayer', // 视频
        3: 'ChapterWork', // 作业
        4: 'ChapterRead', // 资料
        5: 'ChapterLive', // 直播
        9: 'ChapterExam', // 考试
        99: 'CourseWork', // 课程大作业
        100: 'CourseRead', // 课程资料
        101: 'CourseExam' // 课程考试
      }
      return this.chapter ? componentNames[this.chapter.type] || '' : ''
    },
    pid() {
      return this.$route.params.id
    }
  }
}
</script>
