
<template>
  <div class="course-viewer">
    <div class="course-viewer-main">
      <!-- 顶部区域 -->
      <div class="course-viewer-hd">
        <router-link to="/mobile/help/student">
          <i class="el-icon-arrow-left"></i>
        </router-link>
        <h1 class="course-viewer-hd__title">{{detail.course_name}}</h1>
        <router-link to="/app/account/feedbackCreate" target="_blank">
          <el-tooltip effect="light" content="意见反馈">
            <i class="el-icon-self-fankuiyijian"></i>
          </el-tooltip>
        </router-link>
        <router-link to="/mobile/help/student" target="_blank">
          <el-tooltip effect="light" content="帮助">
            <i class="el-icon-self-icon-test"></i>
          </el-tooltip>
        </router-link>
      </div>
      <!-- 主体区域 -->
      <div class="course-viewer-bd">
        <player
          :video="chatperResources.video"
          pdf="https://img1.ezijing.com/ppts/6437335122927681536/PPT_3.2%20%E6%A1%88%E4%BE%8B%E7%A0%94%E7%A9%B6%E6%96%B9%E6%B3%95%EF%BC%88%E4%B8%80%EF%BC%89.pdf"
          :ppts="chatperResources.ppts"
          v-if="chatperResources.video"
        />
      </div>
    </div>
    <!-- 侧边栏 -->
    <v-aside :chapters="detail.chapters" :ppts="chatperResources.ppts"></v-aside>
  </div>
</template>

<script>
// api
import * as api from './api/index'
// components
import VAside from './components/aside/aside.vue'
import Player from './components/player/player.vue'
export default {
  name: 'CourseViewer',
  components: { VAside, Player },
  data() {
    return {
      detail: {},
      chatperResources: {}
    }
  },
  computed: {
    // 当前章节
    activeChapter() {
      return {
        resource_id: '6414747439944695808'
      }
    },
    // 视频资源ID
    resourceId() {
      return this.activeChapter.resource_id
    },
    /**
     * 视频提供者
     * @return 1是CC加密; 2是非加密; 3是阿里云
     */
    videoProvider() {
      const video = this.activeChapter.video || {}
      return video.video_provider || 3
    }
  },
  methods: {
    // 获取课程详情
    getCourse() {
      api
        .getCourse('6437296642994470912', '6437335122927681536')
        .then(response => {
          this.detail = response
        })
    },
    // 获取章节视频详情
    getChapterVideo() {
      // 视频播放类型 1是CC加密; 2是非加密; 3是阿里云
      if (this.videoProvider === 3) {
        api.getChapterVideoAliyun(this.resourceId).then(response => {
          this.chatperResources = response
        })
      } else {
        api.getChapterVideo(this.resourceId).then(response => {
          this.chatperResources = response
        })
      }
    }
  },
  beforeMount() {
    this.getCourse()
    this.getChapterVideo()
  }
}
</script>

<style lang="scss" scoped>
.course-viewer {
  display: flex;
  background-color: #3f3f3f;
}
.course-viewer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-viewer-hd {
  display: flex;
  align-items: center;
  height: 56px;
  a {
    color: #fff;
    padding: 10px;
  }
  i {
    font-size: 24px;
  }
}
.course-viewer-hd__title {
  flex: 1;
  font-size: 1.5em;
  text-align: center;
  color: #a0a0a0;
}
.course-viewer-bd {
  flex: 1;
}
</style>
