<template>
  <div class="main-container">
    <div class="course-title">{{detail.course_name}}</div>
    <van-tabs
      class="main-tabs"
      v-model="tabActive"
      color="#2b7ce9"
      :sticky="true"
      :line-height="2"
      @click="onTabClick"
    >
      <van-tab title="课程学习" name="0">
        <course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
      </van-tab>
      <van-tab title="知识点速学" name="1">
        <course-tag :courseId="courseId" style="margin-left:-0.4rem;margin-right:-0.4rem;"></course-tag>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CourseChapter from './courseChapter.vue'
import CourseTag from '../tag/index.vue'
import * as api from '@/api/course.js'
export default {
  name: 'CourseLearnItem',
  components: { CourseChapter, CourseTag },
  metaInfo: {
    title: '课程内容'
  },
  data() {
    return {
      tabActive: '0',
      detail: {}
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        this.tabActive = route.query.tab || '1'
      }
    }
  },
  computed: {
    courseId() {
      return this.$route.params.id
    }
  },
  methods: {
    onTabClick(name) {
      // this.$router.replace({ query: { tab: name } })
    },
    // 课程学习
    getCourse() {
      api.getCourse(this.courseId).then(response => {
        response.chapters = response.chapters.filter(item => {
          item.children = item.children.filter(child => child.type === 2)
          return item.children.length
        })
        this.detail = response
      })
    }
  },
  beforeMount() {
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.course-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  padding: 20px 0 10px;
}
</style>
