<script setup lang="ts">
import ViewTop from '../components/ViewTop.vue'
import ViewCenter from '../components/ViewCenter.vue'
import Operation from '../components/Operation.vue'
import ResourceCourseList from '@/components/ResourceCourseList.vue'
import DataAccess from '@/components/DataAccess.vue'

import { getLessonDetails } from '../api'

const route = useRoute()
let lessonDetails: any = ref({})

const id = route.query.id as string
// 获取详情
getLessonDetails({ id: id }).then((res: any) => {
  lessonDetails.value = res.data
})
</script>

<template>
  <AppCard title="教案资源信息">
    <Operation v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></Operation>
    <ViewTop v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewTop>
    <ViewCenter v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewCenter>
    <DataAccess v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></DataAccess>
  </AppCard>
  <ResourceCourseList title="教案资源关联使用课程" :list="lessonDetails.course_list"></ResourceCourseList>
</template>
