<template>
  <div class="main-container" v-show="loaded">
    <div class="course-title">{{detail.course_name}}</div>
    <van-tabs
      class="main-tabs"
      v-model="tabActive"
      color="#2b7ce9"
      :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">
        <div class="tab-content">
          <course-tag :courseId="courseId"></course-tag>
        </div>
      </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',
      loaded: false,
      detail: {}
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // this.tabActive = route.query.tab || '0'
      }
    }
  },
  computed: {
    courseId() {
      return this.$route.params.id
    }
  },
  methods: {
    onTabClick(name) {
      // this.$router.replace({ query: { tab: name } })
    },
    // 课程学习
    getCourse() {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      this.loaded = false
      api
        .getCourse(this.courseId)
        .then(response => {
          this.loaded = true
          response.chapters = response.chapters.filter(item => {
            item.children = item.children.filter(child => child.type === 2)
            return item.children.length
          })
          this.detail = response
        })
        .finally(() => {
          this.$toast.clear()
        })
    }
  },
  beforeMount() {
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.course-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  padding: 20px 0 10px;
}
.tab-content {
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  min-height: 100vh;
  background: #eee;
  padding: 0.4rem;
}
</style>
