<template>
<div class="tab-pane">
  <ul class="chapter-list">
    <template v-for="(item, index) in list.course">
      <li v-bind:key="index" class="chapter-item">
        <h4>{{item.title}}</h4>
        <ul class="knot-list">
          <template v-for="(_item, _index) in item.chapters">
            <li v-bind:key="_index" :class="['knob-item', (_item.id === list.currentChapterId ? 'on' : '')]">
              <a :data-vid="_item.id" :data-type="_item.video_provider" :data-hasVA='_item.time' @click='jumpToOtherVA' :data-index='index' :data-count='_index' class="knot-name">
                {{_item.name + (_item.type === 5 ? ("(" + _item.live.statusStr + ")") : "") }}
              </a>
              <template v-if="_item.type !== 5">
                <i :class="['el-icon', (_item.time ? 'el-icon-self-iconset0481' : (_item.type === 3 ? 'el-icon-edit-outline' : 'el-icon-self-cc-book'))]"></i>
              </template>
            </li>
          </template>
        </ul>
      </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) {
      const _data = e.target.dataset
      const sid = this.sid
      const cid = this.cid
      const _id = _data.vid
      const type = _data.type
      if (!_data.hasva) {
        /* 如果存在 - 课后习题类型(chapterExam)， type:3、work_type:1 */
        /* 如果存在 - 课后问题类型(chapterWork)， type:3、work_type:2 */
        /* 如果存在 - 课后阅读类型(chapterRead)， type:4 */
        const i1 = _data.index
        const i2 = _data.count
        const _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') {
            if (!this.list.survey) {
              this.$message('请先填写教学评估，然后完成大作业。')
              return
            }
            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}` })
          } else if (_course.chapters[i2].id === 'teach_evaluation') {
            // window.localStorage.setItem('headerInfo', JSON.stringify(this.headerInfo))
            this.$router.push({ path: `/survey/${sid}/${cid}` })
          } else if (_course.chapters[i2].type === 'exam') {
            this.$router.push({ path: `/player/${sid}/${cid}/exam/${_id}` })
          } else if (_course.chapters[i2].type === 5) {
            const status = _course.chapters[i2].live.live_status
            if (status !== 0 && status !== 1 && status !== 103) {
              this.$message.error(_course.chapters[i2].live.statusStr)
              return
            }
            const enableRecord = _course.chapters[i2].live.enable_record
            if (status === 103 && enableRecord !== undefined && enableRecord !== null && !enableRecord) {
              this.$message.info('该直播没有回放')
              return
            }
            this.$router.push({ path: `/player/${sid}/${cid}/live/${_id}` })
          }
          return
        }
        this.$message.error('系统未知错误，002')
        return
      }
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}/${type}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-pane {
  display: block;
  height: 100%;
  overflow: auto;
  /* 章列表样式 */
  .chapter-list {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow: hidden;
    .chapter-item {
      h4 {
        padding: 10px 22px;
        margin: 0;
        font-size: 15px;
        color: #b0b0b0;
        background-color: #2f2f2f;
      }
      /* 节列表样式 */
      .knot-list {
        margin: 0;
        padding: 0;
        line-height: 1.6;
        overflow: hidden;
        li {
          position: relative;
          &.on {
            background: #3c3c3c;
            a {
              color: #b49441;
            }
          }
          &:hover {
            background: #3c3c3c;
          }
          &:before {
            display: block;
            content: "";
            position: absolute;
            left: 13px;
            top: 16px;
            z-index: 10;
            width: 18px;
            height: 18px;
            background: #5b5b5b;
            border: 2px solid #5b5b5b;
            border-radius: 50%;
          }
          &:after {
            display: block;
            content: "";
            position: absolute;
            left: 22px;
            top: 0;
            z-index: 5;
            width: 1px;
            height: 100px;
            background: #616161;
          }
        }
        .knot-name {
          display: block;
          padding: 15px 35px 15px 40px;
          font-size: 14px;
          color: #909090;
          text-decoration: none;
          cursor: pointer;
        }
      }
      /* 章节后面小图标的样式 */
      .el-icon {
        position: absolute;
        font-size: 16px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

</style>
