<template>
<div class="tab-pane current">
  <ul class="under-control chapter-list current">
    <template v-for="(item, index) in list.course">
      <li v-bind:key="index" class="chapter-item">
        <span class="cpt">{{item.title}}</span>
        <div class="knob-list-wrap">
          <ul class="knob-list">
            <template v-for="(_item, _index) in item.chapters">
              <li v-bind:key="_index" :class="['knob-item', (_item.id === list.currentChapterId ? 'current' : '')]">
                <!-- <ProgressCircle percent={prog} className="play-chapter-progress"/> -->
                <!-- <i className="icon icon-pro" title={`学习进度 ${prog}%`}></i> -->
                <!-- {(type == 'work') ?
                    <Link to={`/courses/${semesterId}/${courseId}/chapters/${o.id}`} className="knob-name" onClick={this.reloadPages}>{o.name}</Link>
                    :
                    <Link to={`/courses/${semesterId}/${courseId}/chapters/${o.id}`} className="knob-name" onClick={this.props.handleClickItem}>{o.name}</Link>
                } -->
                <a :data-vid="_item.id" :data-hasVA='_item.time' class="knob-name" @click='jumpToOtherVA' :data-index='index' :data-index1='_index'>{{_item.name}}</a>
                <i :class="['icon-play-chapter', (_item.time ? 'el-icon-self-iconset0481' : (_item.type === 3 ? 'el-icon-edit-outline' : 'el-icon-self-cc-book'))]"></i>
              </li>
            </template>
          </ul>
        </div>
      </li>
    </template>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    list: { type: Object, require: false },
    sid: { type: String, require: false },
    cid: { type: String, require: false }
  },
  methods: {
    /**
     * 跳转到对应音视频播放页
     */
    jumpToOtherVA (e) {
      let _data = e.target.dataset
      let sid = this.sid
      let cid = this.cid
      let _id = _data.vid
      if (!_data.hasva) {
        /* 如果存在 - 课后习题类型(chapterExam)， type:3、work_type:1 */
        /* 如果存在 - 课后问题类型(chapterWork)， type:3、work_type:2 */
        /* 如果存在 - 课后阅读类型(chapterRead)， type:4 */
        let i1 = _data.index
        let i2 = _data.index1
        let _course = this.list.course[i1]
        if (_course && _course.chapters[i2]) {
          if (_course.chapters[i2].id === 'course_info') {
            this.$router.push({ path: `/player/${sid}/${cid}/course-info/course_info` })
          } else if (_course.chapters[i2].id === 'course_work') {
            this.$router.push({ path: `/player/${sid}/${cid}/course-work/course_work` })
          } else if (_course.chapters[i2].type === 3) {
            if (_course.chapters[i2].work_type === 1) {
              this.$router.push({ path: `/player/${sid}/${cid}/chapter-exam/${_id}` })
            } else if (_course.chapters[i2].work_type === 2) {
              this.$router.push({ path: `/player/${sid}/${cid}/chapter-work/${_id}` })
            }
          } else if (_course.chapters[i2].type === 4) {
            this.$router.push({ path: `/player/${sid}/${cid}/chapter-read/${_id}` })
          }
          return
        }
        this.$message.error('系统未知错误，001')
        return
      }
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}` })
    }
  }
}
</script>
