<template>
  <div class="course-tag-wrapper" v-show="loaded">
    <div class="course-tag-hd">
      <h1 class="course-title">{{chapter.name}}</h1>
    </div>
    <div class="course-tag-bd">
      <div class="course-tag-main">
        <ul class="tag-list">
          <li class="tag-item" v-for="item in tagList" :key="item.id" @click="onClick(item)">
            <div class="tag-item__title">
              <span>{{item.title}}</span>
            </div>
            <div class="tag-item__free" v-if="item.free">(免费)</div>
            <div class="tag-item__arrow">
              <van-icon name="arrow" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/course.js'
export default {
  name: 'CourseTagList',
  metaInfo() {
    return {
      title: this.detail.course_name || ''
    }
  },
  data() {
    return {
      loaded: false,
      detail: { chapters: [] }
    }
  },
  computed: {
    courseId() {
      return this.$route.params.courseId
    },
    chapterId() {
      return this.$route.params.chapterId
    },
    chapter() {
      const found = this.detail.chapters.find(item => item.id === this.chapterId)
      return found || {}
    },
    tagList() {
      return this.chapter.tag || []
    },
    isTest() {
      return this.$route.query.is_test === '1'
    },
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  methods: {
    // 获取知识点列表
    getCourseTagList() {
      this.loaded = false
      api.getCourseTagList(this.courseId).then(response => {
        this.loaded = true
        this.detail = response
      })
    },
    onClick({ id }) {
      const path = `/exam/courseNodeExam?tag_id=${id}`
      if (this.isWeapp) {
        if (this.isTest) {
          // 知识点测试
          const src = encodeURIComponent(`${window.location.origin}${path}`)
          wx.miniProgram.navigateTo({ url: `/pages/web/index?src=${src}` })
        } else {
          wx.miniProgram.navigateTo({
            url: `/pages/web/index?src=${window.location.origin}/course/tag/${id}`
          })
        }
      } else {
        if (this.isTest) {
          // 知识点测试
          this.$router.push({ path })
        } else {
          this.$router.push({ name: 'courseTagItem', params: { id } })
        }
      }
    }
  },
  beforeMount() {
    this.getCourseTagList()
  }
}
</script>
<style lang="scss" scoped>
.course-tag-wrapper {
  min-height: 100vh;
  background-color: #eee;
  box-sizing: border-box;
}
.course-tag-hd {
  position: sticky;
  top: 0;
  padding: 20px;
  background-color: #fff;
  z-index: 10;
}
.course-tag-bd {
  padding: 20px;
}
.course-tag-main {
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
}
.course-title {
  font-size: 15px;
  font-weight: bold;
  color: #222;
}
.tag-title {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  line-height: 24px;
}
.tag-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
}
.tag-item + .tag-item {
  border-top: 1px solid #eee;
}
.tag-item__title {
  flex: 1;
  overflow: hidden;
  span {
    display: inline-block;
    padding: 0 15px;
    font-size: 13px;
    color: #fff;
    line-height: 24px;
    background: #f47885;
    border-radius: 12px;
  }
}
.tag-item__free {
  margin-left: 10px;
  color: #999;
}
.tag-item__arrow {
  margin-left: 10px;
  height: 16px;
  font-size: 16px;
  color: #999;
}
</style>
