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

<script>
import VPlayer from './player/index.vue'
import VWork from './work/index.vue'
import VFile from './file/index.vue'

export default {
  name: 'ViewerLayout',
  components: { VPlayer, VWork, VFile },
  props: {
    chapter: { type: Object, default: () => {} }
  },
  computed: {
    currentCompoent() {
      const componentNames = {
        2: 'VPlayer', // 视频
        3: 'VWork', // 作业
        4: 'VFile' // 资料
      }
      return this.chapter ? componentNames[this.chapter.type] || '' : ''
    },
    pid() {
      return this.$route.params.id
    }
  }
}
</script>
