<template>
  <div v-loading="!courseInfo" style="min-height:30vh">
    <AddCourse
      v-if="courseInfo"
      @close_addCourse="$router.back()"
      :classify="classifyList_map"
      :nowCheckCourse="courseInfo"
      :isStudy="true"
    />
  </div>
</template>

<script>
import { getCourseClassfiyApi } from '@/api/online-course/online-course'
import AddCourse from '../components/add-course/add-course.vue'
import { getCourseInfoAPI } from '@/api/online-course/my-course'

export default {
  components: { AddCourse },

  data: () => ({ classifyList_map: [], courseInfo: null }),

  activated () {
    this.classifyList_map = []
    this.courseInfo = null
    this.fetchCourseInfo(this.$route.params.courseId)
  },

  methods: {
    async fetchCourseInfo (courseId) {
      const { data } = await getCourseInfoAPI(courseId)
      this.courseInfo = data

      this.getClassifyList(data.courseInfo?.classify)
    },

    async getClassifyList (classifyId) {
      const { data } = await getCourseClassfiyApi()
      const { map } = data.toTree()
      this.classifyList_map = [map[classifyId]]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
