<template>
  <ul class="chapter-list">
    <li class="chapter-item" v-for="item in data" :key="item.id">
      <h4>{{item.name}}</h4>
      <ul class="chapter-item-list">
        <li
          v-for="subItem in item.children"
          :key="subItem.id"
          @click="onClick(subItem)"
          :class="{'is-active': subItem.id === (active ? active.id : '')}"
        >
          <span class="chapter-item-list__name">{{subItem.name | showName(subItem.type)}}</span>
          <i class="el-icon" :class="genIconClass(subItem.type)"></i>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    data: { type: Array, default: () => [] },
    // 当前选中的章节
    active: { type: Object, default: () => {} }
  },
  data() {
    return {
      otherList: [
        {
          name: '大作业及资料',
          children: [
            { name: '课程大作业', id: 'course_work' },
            { name: '课程资料', id: 'course_info' },
            { name: '教学评估', id: 'teach_evaluation' }
          ]
        }
      ]
    }
  },
  computed: {
    list() {
      return this.data.concat(this.otherList)
    }
  },
  filters: {
    showName(name, type) {
      return name
    }
  },
  methods: {
    genIconClass(type) {
      const map = {
        2: 'el-icon-self-iconset0481',
        3: 'el-icon-edit-outline',
        4: 'el-icon-self-cc-book'
      }
      return map[type] || 'el-icon-self-cc-book'
    },
    onClick(data) {
      // 课程大作业
      // if (data.id === 'course_work') {
      //   this.$router.push({ name: 'viewerCourseWork' })
      //   return
      // }
      // 课程资料
      // if (data.id === 'course_info') {
      //   this.$router.push({ name: 'viewerCourseFile' })
      //   return
      // }
      this.$router.push({
        name: 'viewerCourseChapter',
        params: { id: data.id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 章列表样式 */
.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;
    }
    /* 节列表样式 */
    .chapter-item-list {
      margin: 0;
      padding: 0;
      line-height: 1.6;
      overflow: hidden;
      li {
        position: relative;
        &.is-active {
          background: #3c3c3c;
          .chapter-item-list__name {
            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;
        }
      }
      .chapter-item-list__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%);
      color: #a0a0a0;
    }
  }
}
</style>
