<template>
  <div class="course-viewer">
    <div class="course-viewer-main">
      <!-- 顶部区域 -->
      <div class="course-viewer-main-hd">
        <router-link :to="`/app/learn/course-detail/${sid}/${cid}`">
          <i class="el-icon-arrow-left"></i>
        </router-link>
        <h1 class="course-viewer-main-hd__title">{{ detail.course_name }}</h1>
        <!-- 直播的时候显示帮助按钮 -->
        <template v-if="isLive">
          <router-link to="/app/feedback/feedback-create" target="_blank">
            <el-tooltip effect="light" :content="$t('viewerMain.feedback')">
              <i class="el-icon-self-fankuiyijian"></i>
            </el-tooltip>
          </router-link>
          <router-link to="/mobile/help/student" target="_blank">
            <el-tooltip effect="light" :content="$t('viewerMain.help')">
              <i class="el-icon-self-icon-test"></i>
            </el-tooltip>
          </router-link>
        </template>
        <div class="course-menu" @click="menuVisible = !menuVisible">
          <i class="el-icon-s-unfold" v-if="menuVisible"></i>
          <i class="el-icon-s-fold" v-else></i>
        </div>
      </div>
      <!-- 主体区域 -->
      <div class="course-viewer-main-bd">
        <router-view
          :data="detail"
          :chapter="activeChapter"
          :pptIndex="pptIndex"
          :isSeek="isSeek"
          :key="pid"
          @pptupdate="handlePPTupdate"
          @change-ppt="handleChangePPT(...arguments, false)"
          @update="getCourse"
        />
      </div>
    </div>
    <!-- 侧边栏 -->
    <v-aside
      :data="detail"
      :chapters="chapters"
      :active="activeChapter"
      :ppts="ppts"
      :pptIndex="pptIndex"
      @change-ppt="handleChangePPT(...arguments, true)"
      v-if="detail.chapters"
      v-show="menuVisible"
    ></v-aside>
  </div>
</template>

<script>
// api
import * as api from './api'
// components
import VAside from './components/aside/index.vue'

export default {
  name: 'CourseViewer',
  components: { VAside },
  data() {
    return {
      detail: {},
      ppts: [],
      pptIndex: 0,
      isSeek: false,
      menuVisible: true,
      timer: null
    }
  },
  watch: {
    activeChapter() {
      this.ppts = []
      this.pptIndex = 0
    },
    isLive(value) {
      if (value) {
        this.menuVisible = false
      }
    },
    isCourseExam(value) {
      if (value) {
        this.menuVisible = false
      }
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    },
    // 章节列表
    chapters() {
      const chapters = this.detail.chapters || []
      if (!chapters.length) {
        return []
      }
      const customeChapter = {
        name: this.$t('viewerMain.workData'),
        children: [
          { name: this.$t('viewerMain.courseWork'), id: 'course_work', type: 99 },
          { name: this.$t('viewerMain.courseData'), id: 'course_info', type: 100 },
          { name: this.$t('viewerMain.teachingEvaluation'), id: 'teach_evaluation', type: 102 }
        ]
      }
      // 课程考试
      if (this.detail.course_examination) {
        customeChapter.children.push({
          name: this.$t('viewerMain.courseExam'),
          id: 'course_exam',
          type: 101
        })
      }
      chapters.push(customeChapter)
      return chapters
    },
    // 当前选中的章节
    activeChapter() {
      const id = this.pid
      const list = this.chapters
      return this.findChapter(id, list)
    },
    // 直播
    isLive() {
      return this.activeChapter ? [5, 8].includes(this.activeChapter.type) : false
    },
    // 课程考试
    isCourseExam() {
      return this.activeChapter ? this.activeChapter.type === 101 : false
    }
  },
  methods: {
    // 查找当前章节
    findChapter(id, list) {
      for (const item of list) {
        if (item.id === id) {
          return item
        }
        if (item.children && item.children.length) {
          const found = this.findChapter(id, item.children)
          if (found) {
            return found
          }
        }
      }
      return null
    },
    // 获取课程详情
    getCourse() {
      api.getCourse(this.sid, this.cid).then(response => {
        this.detail = response
      })
    },
    // 定时自动获取课程详情
    autoGetChapterList() {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(this.getCourse, 10000)
    },
    // PPT列表更新
    handlePPTupdate(list) {
      this.ppts = list
    },
    // 右侧菜单选中的PPT修改
    handleChangePPT(index, isSeek) {
      this.pptIndex = index
      this.isSeek = isSeek
    }
  },
  beforeMount() {
    this.getCourse()
    // this.autoGetChapterList()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
.course-viewer {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.course-viewer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-viewer-main-hd {
  display: flex;
  align-items: center;
  background-color: #3f3f3f;
  height: 56px;
  a {
    color: #fff;
    padding: 10px;
  }
  i {
    font-size: 24px;
  }
}
.course-viewer-main-hd__title {
  flex: 1;
  font-size: 1.5em;
  // text-align: center;
  color: #a0a0a0;
}
.course-viewer-main-bd {
  flex: 1;
  height: calc(100vh - 56px);
  overflow-y: auto;
}
.course-viewer-content {
  // min-height: 50%;
  max-width: 900px;
  padding: 40px 120px 80px;
  margin: 40px auto;
  background-color: #f2f2f2;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
}
.course-viewer-content-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
  // text-align: center;
}
.course-viewer-content-hd__title {
  position: relative;
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0 0 5px;
  font-size: 20px;
  border-bottom: 3px solid #707070;
  &::before {
    content: '·';
    position: absolute;
    left: -30px;
    top: 50%;
    font-size: 30px;
    transform: translateY(-50%);
  }
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    background-color: #707070;
  }
}
.course-viewer-content-hd__aside {
  font-size: 18px;
  // border-bottom: 3px solid #707070;
}
.course-menu {
  width: 24px;
  height: 24px;
  padding: 12px;
  margin-right: 10px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  &:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}
</style>
