<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-hasVA='_item.time' @click='jumpToOtherVA' :data-index='index' :data-index1='_index' class="knot-name">{{_item.name}}</a>
              <i :class="['el-icon', (_item.time ? 'el-icon-self-iconset0481' : (_item.type === 3 ? 'el-icon-edit-outline' : 'el-icon-self-cc-book'))]"></i>
            </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) {
      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>

<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>
