<template>
  <div class="course-viewer">
    <div class="course-viewer-main">
      <!-- 顶部区域 -->
      <div class="course-viewer-main-hd">
        <router-link to="/mobile/help/student">
          <i class="el-icon-arrow-left"></i>
        </router-link>
        <h1 class="course-viewer-main-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-main-bd">
        <router-view
          :data="detail"
          :chapter="activeChapter"
          :files="files"
          :pptIndex="pptIndex"
          :key="pid"
          @pptupdate="handlePPTupdate"
          @change-ppt="handleChangePPT"
        />
      </div>
    </div>
    <!-- 侧边栏 -->
    <v-aside
      :chapters="chapters"
      :active="activeChapter"
      :ppts="ppts"
      :pptIndex="pptIndex"
      @change-ppt="handleChangePPT"
      v-if="detail.chapters"
    ></v-aside>
  </div>
</template>

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

export default {
  name: 'CourseViewer',
  components: { VAside },
  data() {
    return {
      detail: {},
      ppts: [],
      pptIndex: 0
    }
  },
  watch: {
    activeChapter() {
      this.ppts = []
      this.pptIndex = 0
    }
  },
  computed: {
    // 学期ID
    sid() {
      return '6552021107166150656'
    },
    // 课程ID
    cid() {
      return '6568035374902280192'
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    },
    // 章节列表
    chapters() {
      const chapters = this.detail.chapters || []

      return chapters.concat([
        {
          name: '大作业及资料',
          children: [
            { name: '课程大作业', id: 'course_work', type: 3 },
            { name: '课程资料', id: 'course_info', type: 4 },
            { name: '教学评估', id: 'teach_evaluation' }
          ]
        }
      ])
    },
    // 当前选中的章节
    activeChapter() {
      const id = this.pid
      const list = this.chapters
      return this.findChapter(id, list)
    },
    // 课程资料
    files() {
      return this.detail.files || []
    }
  },
  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
      })
    },
    // PPT列表更新
    handlePPTupdate(list) {
      this.ppts = list
    },
    // 右侧菜单选中的PPT修改
    handleChangePPT(index) {
      this.pptIndex = index
    }
  },
  beforeMount() {
    this.getCourse()
  }
}
</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;
}
</style>
