<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 { getVideoDetails } from '../api'

// 路由
const route = useRoute()
const id = route.query.id as string
let videoDetails: any = ref({})

// 获取详情
getVideoDetails({ id: id }).then(res => {
  videoDetails.value = res.data
})
</script>

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