<template>
<div :class="['play', (state.sideBar ? '' : 'sidebar-hide')]">
  <div class="left-content">
    <div class="play-top cl" :style="(state.sideBar ? {} : { marginRight: 0 })">
      <router-link class="router-link-class" :to="{ path: `/app/my-learn/course-detail/${sid}/${cid}` }"><i class="play-back el-icon-arrow-left"></i></router-link>
      <p>{{chapterList.title}}</p>
    </div>
    <div class="play-content">
      <router-view
        :chapterName="curChapterName"
        :chapterId="chapterId"
        :courseInfo="courseInfo"
        :courseWork="courseWork"
        :chapterRead="chapterRead"
        :chapterWork="chapterWork"
      ></router-view>
      <!-- {params.chapterId === 'work' ?

          : chapter.type === chapterType.VIDEO ?
          <ChapterVideo
              ref="chapterVideo"
              courseId={params.courseId}
              semesterId={course.semester_id}
              ppts={ppts}
              chapter={chapter}
              username={user.data && user.data.username || ''}
              prevChapterId={prevChapterId}
              nextChapterId={nextChapterId}
              curProgress={curProgress}
              handlePlayTime={this.handlePlayTime}
              handleOver={this.handleOver}
              lastTime={cpt}
          />
      } -->
    </div>
  </div>
  <div class="right-content" :style="{ right: (state.sideBar ? 0 : -388) + 'px' }">
    <p class="right-arrow" @click="changeSideBar('')"><span>&gt;</span></p>
    <div class="control-panel">
      <ul class="nav-tabs play-nav cl">
        <li :class="['videoChapter', (state.sideBar === SIDEBAR_CHAPTER ? 'current' : '')]"><a :href="('#' + SIDEBAR_CHAPTER)" @click="changeSideBar(SIDEBAR_CHAPTER)">章节</a></li>
        <template v-if="state.isChapterVideo">
          <li :class="['videoJy', (state.sideBar === SIDEBAR_PPT ? 'current' : '')]"><a :href="('#' + SIDEBAR_PPT)" @click="changeSideBar(SIDEBAR_PPT)">讲义</a></li>
        </template>
      </ul>
      <div class="tab-content">
        <template v-if="state.sideBar === SIDEBAR_CHAPTER">
          <side-chapter-list
            :list="chapterList"
            :sid="sid"
            :cid="cid"
          />
            <!--
            handleClickItem={IS_PHONE ? this.handleHideSidebar1 : this.reloadPages} -->
        </template>
        <template v-if="state.sideBar === SIDEBAR_PPT">
          <side-chapter-ppt
            :ppt="pptList"
          />
            <!-- ref="sidePpt"
            handleClickPpt={this.handleClickSidePpt} -->
        </template>
      </div>
    </div>
  </div>
  <template v-if="!state.sideBar">
    <div class="switch">
      <a :href="('#' + SIDEBAR_CHAPTER)" class="switch-chapter" @click="changeSideBar(SIDEBAR_CHAPTER)">
        <i class="el-icon-self-wenjian"></i>
        <div>章节</div>
      </a>
      <template v-if="state.isChapterVideo">
        <a :href="('#' + SIDEBAR_PPT)" class="switch-handout" @click="changeSideBar(SIDEBAR_PPT)">
          <i class="el-icon-self-PPT"></i>
          <div>讲义</div>
        </a>
      </template>
    </div>
  </template>
</div>
</template>

<script>
import cAction from '@actions'

import sideChapterList from './rightSide/sideChapterList.vue'
import sideChapterPpt from './rightSide/sideChapterPpt.vue'

export default {
  components: { sideChapterList, sideChapterPpt },
  props: {
    sid: { type: String, require: false },
    cid: { type: String, require: false },
    id: { type: String, require: false } // 章节id
  },
  data () {
    return {
      SIDEBAR_CHAPTER: 'sidebar_chapter',
      SIDEBAR_PPT: 'sidebar_ppt',
      state: {
        sideBar: 'sidebar_chapter',
        isChapterVideo: false
      },
      chapterList: {
        // title: '',
        // currentChapterId: '11', // 当前章节id
        // course: [{
        //   title: '第一章：重要概念',
        //   chapters: [
        //     { id: '11', time: '28:18', name: '1.1 现值（PV）和终值（FV）' },
        //     { id: '12', time: '19:09', name: '1.2 净现值（NPV）及实际收益率' }
        //   ]
        // }, {
        //   title: '第二章：证券估值',
        //   chapters: [
        //     { id: '21', time: '27:49', name: '2.1 债券和股票的现金流贴现估值方法' },
        //     { id: '22', time: '16:04', name: '2.2 债券评级及债券协议' },
        //     { id: '23', time: '', name: '公司金融第二周测验' },
        //     { id: '24', time: '', name: '公司金融第二周作业' }
        //   ]
        // }],
        // nextVideo: {}, // 下一章 音视频对象
        // prevVideo: {} // 上一章音视频对象
      },
      pptList: {
        // imgUrls: [
        //   'http://pd4t7ae3m.bkt.clouddn.com/imgs-test1.jpg',
        //   'http://pd4t7ae3m.bkt.clouddn.com/imgs-test2.jpg',
        //   'http://pd4t7ae3m.bkt.clouddn.com/imgs-test3.jpg'
        // ], // 所有图片数组
        // current: 0, // 当前跟着音视频走，播放的是第几个图片
        // selectIndex: 0,
        // timeArr: [2, 10] // 时间数组，在这个时间时，图片需要切换到对应下角标图片
      },
      /* 课程资料 */
      courseInfo: [],
      /* 课程大作业 */
      courseWork: {},
      /* 当前选择 - 章节名字 */
      curChapterName: '',
      /* 当前选择 - 章节id */
      chapterId: '',
      /* 章节阅读 */
      chapterRead: {},
      /* 章节问题、作业提交 */
      chapterWork: {}
    }
  },
  beforeRouteUpdate (to, from, next) {
    /* 只有 视频时 才有PPT */
    if (to.name === 'chapterVideo') {
      this.state.isChapterVideo = true
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.chapterAction.getCurrentChapterDetail(to.params.id).then(json => {
        this.pptList = json.image
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
    const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
    cAction.chapterAction.getChapterList(to.params.cid, to.params.sid, to.params.id).then(json => {
      this.chapterList = json.json
      this.courseInfo = json.courseInfo
      this.courseWork = json.courseWork
      /* 章节选择 */
      this.curChapterName = json.curJson.name
      this.chapterId = json.curJson.chapterId
      this.chapterRead = ((json.curJson.type === 4) && json.curJson.chapterRead) || {}
      this.chapterWork = ((json.curJson.type === 3 && json.curJson.work_type === 2) && json.curJson.chapterWork) || {}
    }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    next()
  },
  mounted () {
    /* 只有 视频时 才有PPT */
    if (this.$route.name === 'chapterVideo') {
      this.state.isChapterVideo = true
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.chapterAction.getCurrentChapterDetail(this.id).then(json => {
        this.pptList = json.image
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
    const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
    cAction.chapterAction.getChapterList(this.cid, this.sid, this.id).then(json => {
      this.chapterList = json.json
      this.courseInfo = json.courseInfo
      this.courseWork = json.courseWork
      /* 章节选择 */
      this.curChapterName = json.curJson.name
      this.chapterId = json.curJson.chapterId
      this.chapterRead = ((json.curJson.type === 4) && json.curJson.chapterRead) || {}
      this.chapterWork = ((json.curJson.type === 3 && json.curJson.work_type === 2) && json.curJson.chapterWork) || {}
    }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
  },
  methods: {
    changeSideBar (str) { this.state.sideBar = str }
  }
}
</script>


<style lang="scss" scoped>
  @import './index.css';
</style>
