<script setup lang="ts">
import ViewCourseInfo from '../components/ViewCourseInfo.vue'
import ViewCourseInfoTop from '../components/ViewCourseInfoTop.vue'
import ViewCourseChapter from '../components/ViewCourseChapter.vue'
import Operation from '../components/Operation.vue'
import { getViewCourseDetails } from '../api'

const route = useRoute()

// const router = useRouter()

const id = route.query.id as string

const courseDetails: any = ref({})

const chapters = ref<any[]>([])
onMounted(() => {
  // 课程详情
  handleGetViewCourseDetails()
})
const handleGetViewCourseDetails = () => {
  getViewCourseDetails({ id: id }).then((res: any) => {
    courseDetails.value = res.data
    if (courseDetails.value.chapters[0]?.children) {
      chapters.value = courseDetails.value.chapters[0].children.reduce((a: any, b: any) => {
        b.children.map((item: any, index: number) => {
          index === 0 ? (item.show = true) : (item.show = false)
          return item
        })
        a.push(b)
        return a
      }, [])
    }
  })
}

const handleFresh = () => {
  handleGetViewCourseDetails()
}
</script>
<template>
  <AppCard title="查阅课程">
    <Operation :data="courseDetails" @update="handleFresh"></Operation>
    <div class="course-view">
      <ViewCourseInfoTop :data="courseDetails"></ViewCourseInfoTop>

      <div class="course-left_info">
        <ViewCourseInfo :data="courseDetails" class="info_bottom" :id="id"></ViewCourseInfo>
        <ViewCourseChapter
          v-if="Object.keys(courseDetails).length"
          :data="chapters"
          class="info_chapter"
        ></ViewCourseChapter>
      </div>
    </div>
  </AppCard>
</template>
<style lang="scss" scoped>
.course-view {
  border: 1px solid #bfbfbf;

  border-radius: 10px;
  display: flex;
  flex-direction: column;
  .course-left_info {
    display: flex;
    .info_bottom {
      width: 67%;
    }
    .info_chapter {
      width: 25%;
    }
  }
}
</style>
