<template>
  <ul class="chapter-list">
    <li class="chapter-item" v-for="item in chapters" :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) }}</span>
          <i class="el-icon" :class="genIconClass(subItem.type)"></i>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    // 课程详情接口返回的数据
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    chapters: { type: Array, default: () => [] },
    // 当前选中的章节
    active: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  filters: {
    showName(name, data) {
      if ([5, 8].includes(data.type) && data.live) {
        return `${name}(${data.live.start_time})`
      }
      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.type === 1) {
        return
      }
      // zoom直播
      if (data.type === 8) {
        const live = data.live
        const hasRecordUrl = live.enable_record && live.record_url
        if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
          this.$message.error(this.$t('viewerMain.liveEnd'))
          return
        }
        window.open(live.record_url || live.join_url)
        return
      }
      // CC直播
      if (data.type === 5) {
        const live = data.live
        const hasRecordUrl = live.enable_record && live.record_url
        if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
          this.$message.error(this.$t('viewerMain.liveEnd'))
          return
        }
        // 新窗口打开
        const joinUrl = `https://view.csslcloud.net/api/view/index?roomid=${live.room_id}&userid=${live.account_id}&autoLogin=true&viewername=${live.user_name}&viewertoken=${live.play_pass}`
        window.open(live.record_url || joinUrl)
        return
      }
      // 课程大作业
      if (data.id === 'course_work' && !this.data.survey) {
        this.$message(this.$t('viewerMain.teachingEvaluationTips'))
        return
      }
      // 教学评估
      if (data.id === 'teach_evaluation') {
        const { sid, cid } = this.$route.params
        this.$router.push({ name: 'survey', params: { sid, cid } })
        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>
