<template>
  <CourseDetail 
    v-if="courseId"
    :course-id="courseId"
    :show-back-button="true"
    back-button-text="返回课程列表"
    @back="handleBack"
    @start-learning="handleStartLearning"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { CourseDetail } from '@/views/course/components';

defineOptions({
  name: 'CourseDetailView'
});

const router = useRouter();
const route = useRoute();

const courseId = computed(() => route.query.courseId as string || '');

// 返回上一页
function handleBack() {
  router.back();
}

// 开始学习课程
function handleStartLearning(courseId: string, chapterIndex: number, nodeIndex: number) {
  // 跳转到课程学习页面
  router.push({
    path: '/study-plan/course-study',
    query: {
      courseId,
      chapterIndex: chapterIndex.toString(),
      nodeIndex: nodeIndex.toString()
    }
  });
}
</script>

<style lang="scss" scoped>

</style>

