<template>
  <view class="course-detail">
    <view class="header">
      <image class="cover" :src="course.cover || '/static/default-course.png'" mode="aspectFill" />
      <view class="overlay">
        <text class="title">{{ course.title }}</text>
        <text class="meta">{{ course._count?.lessons || 0 }} 课时 · {{ course.chapters?.length || 0 }} 章节</text>
        <text class="price" v-if="course.isFree">免费</text>
        <text class="price paid" v-else>¥{{ course.price }}</text>
      </view>
    </view>
    <view class="body">
      <view class="section">
        <text class="section-title">课程简介</text>
        <text class="desc">{{ course.description }}</text>
      </view>
      <view class="section">
        <text class="section-title">课程目录</text>
        <view class="chapter-list">
          <view class="chapter" v-for="ch in course.chapters" :key="ch.id">
            <text class="chapter-title">{{ ch.title }}</text>
            <view class="lesson-list">
              <view class="lesson" v-for="les in ch.lessons" :key="les.id" @tap="goLesson(les.id)">
                <text class="lesson-title">{{ les.title }}</text>
                <text class="lesson-status" v-if="les.completed">✅</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'

const course = ref<any>({})

onMounted(async () => {
  const id = Number((uni as any).getCurrentInstance()?.router?.params?.id || '')
  try {
    course.value = await api.courses.detail(id)
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  }
})

const goLesson = (lessonId: number) => {
  uni.navigateTo({ url: `/pages/lesson/index?id=${lessonId}&courseId=${course.value.id}` })
}
</script>

<style scoped>
.course-detail { }
.header { position: relative; }
.cover { width: 100%; height: 400rpx; }
.overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 40rpx 30rpx;
}
.title { font-size: 36rpx; font-weight: bold; color: var(--card); display: block; }
.meta { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
.price { font-size: 28rpx; color: var(--brand); margin-top: 12rpx; display: inline-block; }
.price.paid { color: #ff6b6b; }
.body { padding: 30rpx; }
.section { margin-bottom: 40rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block; }
.desc { font-size: 26rpx; color: var(--muted-foreground); line-height: 1.6; }
.chapter { margin-bottom: 20rpx; background: var(--card); border-radius: 12rpx; overflow: hidden; }
.chapter-title { font-size: 28rpx; font-weight: 500; padding: 20rpx 24rpx; background: var(--muted); display: block; }
.lesson { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 24rpx; border-bottom: 1rpx solid var(--muted); }
.lesson:last-child { border-bottom: none; }
.lesson-title { font-size: 26rpx; color: var(--foreground); }
.lesson-status { font-size: 24rpx; }
</style>
