<template>
	<view class="course-detail-page">
		<!-- 自定义导航栏 -->
		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<uni-icons type="left" size="24" color="#333"></uni-icons>
				</view>
				<view class="nav-title">{{ courseDetail.title || '肝硬化与重症肝病' }}</view>
				<view class="nav-right" @click="goShare">
					<uni-icons type="redo" size="24" color="#333"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 页面内容 -->
		<view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 主横幅 -->
			<view class="main-banner">
				<image :src="courseDetail.index_img || '/static/lunbo_bg.png'" mode="aspectFill" class="banner-image"></image>
				
			</view>

			<!-- 课程信息 -->
			<view class="course-info">
				<view class="course-header">
					<text class="course-title">{{ courseDetail.title || '肝硬化与重症肝病' }}</text>
					<view class="course-meta">
						<text class="lesson-count" v-if="courseDetail.study_num > 0">{{ courseDetail.study_num || 0 }}人学·</text>
						<text class="lesson-count">{{ courseDetail.video_num || 0 }}节课·{{ courseDetail.status === 1 ? '已完结' : '进行中' }}</text>
						<text class="lesson-count" v-if="courseDetail.fuli_num > 0 && courseDetail.special_type_name == '福利课堂'">·福利剩余{{ courseDetail.fuli_remaining || 0 }}</text>
					</view>
				</view>
				<view class="course-tags">
					<view class="tag-item" v-if="courseDetail.fuli_bon > 0">
						<text class="tag-text">福利课堂</text>
					</view>
					<text class="reward-info" v-if="courseDetail.fuli_bon > 0">课程学完预期将返还{{ courseDetail.fuli_bon }}积分</text>
				</view>
			</view>

			<!-- 限时优惠模块 -->
			<view class="limited-offer" v-if="showLimitedOffer">
				<view class="offer-left">
					<view class="price-info">
						<text class="current-price">¥{{ currentPriceYuan.toFixed(2) }}</text>
						<text class="original-price" v-if="originalPriceYuan > 0">¥{{ originalPriceYuan.toFixed(2) }}</text>
					</view>
					<view class="offer-tag">
						<text class="tag-text">限时优惠</text>
					</view>
				</view>
				<view class="offer-right">
					<text class="countdown-text">距离优惠结束还剩</text>
					<view class="countdown-timer">
						<text class="days">{{ countdown.days }}天</text>
						<view class="time-segments">
							<view class="time-box">{{ countdown.hours }}</view>
							<text class="time-separator">:</text>
							<view class="time-box">{{ countdown.minutes }}</view>
							<text class="time-separator">:</text>
							<view class="time-box">{{ countdown.seconds }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 永久优惠模块（样式同限时优惠，但无倒计时） -->
			<view class="limited-offer permanent" v-if="showPermanentOffer">
				<view class="offer-left">
					<view class="price-info">
						<text class="current-price">¥{{ currentPriceYuan.toFixed(2) }}</text>
						<text class="original-price" v-if="originalPriceYuan > 0">¥{{ originalPriceYuan.toFixed(2) }}</text>
					</view>
					<view class="offer-tag">
						<text class="tag-text">永久优惠</text>
					</view>
				</view>
			</view>

			<!-- 标签导航 -->
			<view class="tab-nav">
				<view class="tab-item" :class="{ active: activeTab === 'intro' }" @click="switchTab('intro')">
					<text class="tab-text">课程介绍</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'catalog' }" @click="switchTab('catalog')">
					<text class="tab-text">课程目录</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'reviews' }" @click="switchTab('reviews')" data-tab="reviews">
					<text class="tab-text">评价({{ courseDetail.comment_num || 0 }})</text>
				</view>
			</view>

			<!-- 课程介绍内容 -->
			<view class="course-intro" v-if="activeTab === 'intro'">
				

				<!-- 课程描述 -->
				<view class="course-description" v-if="courseDetail.descs">
					<view class="description-content" v-html="courseDetail.descs"></view>
				</view>
				
				
			</view>

			<!-- 课程目录内容 -->
			<view class="course-catalog" v-if="activeTab === 'catalog'">
				<!-- 课程概览 -->
				<!-- <view class="catalog-overview">
					<view class="overview-item">
						<text class="overview-label">总课时</text>
						<text class="overview-value">{{ courseDetail.video_num || 0 }}节课</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">总时长</text>
						<text class="overview-value">约{{ Math.ceil((courseDetail.video_num || 0) * 0.75) }}小时</text>
					</view>
					<view class="overview-item">
						<text class="overview-label">学习进度</text>
						<text class="overview-value">{{ courseDetail.study_status || 0 }}%</text>
					</view>
				</view> -->

				<!-- 课程章节列表 -->
				<view class="chapter-list">
					<view class="chapter-item" v-for="(chapter, index) in chapterList" :key="index" @click="toggleChapter(index)">
						<view class="chapter-header">
							<view class="chapter-info">
								<view class="chapter-title">
									<uni-icons :type="chapter.expanded ? 'down' : 'right'" size="16" color="#666"></uni-icons>
									<text class="chapter-name">{{ chapter.title }}</text>
								</view>
								<!-- <view class="chapter-meta">
									<text class="lesson-count">{{ chapter.lessons.length }}节课</text>
									<text class="duration">{{ chapter.duration }}</text>
								</view> -->
							</view>
							<!-- <view class="chapter-status">
								<text class="status-text" :class="chapter.status">{{ chapter.statusText }}</text>
							</view> -->
						</view>
						
						<!-- 课时列表 -->
						<view class="lesson-list" v-if="chapter.expanded">
							<view class="lesson-item" v-for="(lesson, lessonIndex) in chapter.lessons" :key="lessonIndex" @click="goLesson(lesson)">
								<view class="lesson-info">
									<view class="lesson-title">
										<uni-icons type="play-circle" size="20" color="#999"></uni-icons>
										<text class="lesson-name">{{ lesson.title }}</text>
									</view>
									<view class="lesson-meta">
										<text class="lesson-duration">{{ lesson.duration }}</text>
										<!-- <text class="lesson-teacher">{{ lesson.teacher }}</text> -->
									</view>
								</view>
								<view class="lesson-status">
									<text class="status-text" :class="lesson.status">{{ lesson.statusText }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价内容 -->
			<view class="course-reviews" v-if="activeTab === 'reviews'">
				<view class="review-header">
					<text class="review-title">课程评价</text>
					<view class="review-actions-header">
						<text class="review-count">共{{ reviewTotal || courseDetail.comment_num || 0 }}条评价</text>
						<button class="write-review-btn" @click="goToReview" v-if="courseDetail.is_buy === 1">
							{{ courseDetail.is_commented === 1 ? '追加评论' : '写评价' }}
						</button>
					</view>
				</view>
				
				<view class="review-list" v-if="courseDetail.comment_num > 0">
					<view class="review-item" v-for="(review, index) in reviewList" :key="index">
						<view class="review-user">
							<image :src="review.avatar" mode="aspectFill" class="user-avatar"></image>
							<view class="user-info">
								<text class="user-name">{{ review.userName }}</text>
								<view class="user-rating">
									<uni-icons v-for="star in 5" :key="star" 
										:type="star <= review.rating ? 'star-filled' : 'star'" 
										size="16" 
										:color="star <= review.rating ? '#FFB800' : '#E0E0E0'">
									</uni-icons>
								</view>
							</view>
							<text class="review-time">{{ review.time }}</text>
						</view>
						<view class="review-content">
							<text class="review-text">{{ review.content }}</text>
						</view>
						
						<!-- 回复按钮 -->
						<view class="review-actions">
							<view class="reply-btn" @click="showReplyInput(review.id)">
								<uni-icons type="chat" size="16" color="#666"></uni-icons>
								<text class="reply-text">回复</text>
							</view>
						</view>
						
						<!-- 二级评论列表 -->
						<view class="reply-list" v-if="review.replies && review.replies.length > 0">
							<view class="reply-item" v-for="(reply, replyIndex) in review.replies" :key="reply.id">
								<view class="reply-user">
									<image :src="reply.avatar" mode="aspectFill" class="reply-avatar"></image>
									<view class="reply-info">
										<view class="reply-header">
											<text class="reply-name">{{ reply.userName }}</text>
											<text class="reply-time">{{ reply.time }}</text>
											<text v-if="reply.isAuthor" class="author-tag">讲师</text>
										</view>
										<text class="reply-content">{{ reply.content }}</text>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 回复输入框 -->
						<view class="reply-input-container" v-if="activeReplyId === review.id">
							<view class="reply-input-wrapper">
								<input 
									class="reply-input" 
									v-model="replyText" 
									placeholder="写下你的回复..."
									:focus="activeReplyId === review.id"
								/>
								<view class="reply-input-actions">
									<button class="cancel-btn" @click="cancelReply">取消</button>
									<button class="submit-btn" @click="submitReply(review.id)">发送</button>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 加载更多 -->
					<view class="load-more" v-if="reviewPage < reviewPages && reviewList.length > 0">
						<button class="load-more-btn" @click="loadMoreReviews" :disabled="reviewLoading">
							<text v-if="!reviewLoading">加载更多</text>
							<text v-else>加载中...</text>
						</button>
					</view>
					
					<!-- 已加载全部 -->
					<view class="load-all" v-if="reviewPage >= reviewPages && reviewList.length > 0">
						<text class="load-all-text">已加载全部评论</text>
					</view>
				</view>
				
				<!-- 空评价状态 -->
				<view class="empty-reviews" v-if="reviewList.length === 0 && !reviewLoading">
					<view class="empty-icon">
						<uni-icons type="chat" size="80" color="#E0E0E0"></uni-icons>
					</view>
					<text class="empty-text">暂无评价</text>
					<text class="empty-desc" v-if="courseDetail.is_buy === 1 && courseDetail.is_commented === 1">
						您已经评价过此课程，可以追加评论
					</text>
					<text class="empty-desc" v-else-if="courseDetail.is_buy === 1">
						成为第一个评价的人吧
					</text>
					<text class="empty-desc" v-else>
						购买课程后即可评价
					</text>
				</view>
				
				<!-- 加载中状态 -->
				<view class="loading-reviews" v-if="reviewLoading && reviewList.length === 0">
					<view class="loading-icon">
						<uni-icons type="spinner-cycle" size="80" color="#E0E0E0"></uni-icons>
					</view>
					<text class="loading-text">加载中...</text>
				</view>
			</view>
		</view>

		<!-- 底部购买栏 -->
		<view class="bottom-bar" v-if="courseDetail.is_buy === 0">
			<view class="price-section">
				<text class="price" >¥{{ currentPriceYuan.toFixed(2) }}</text>
			</view>
			<view class="buy-section">
				<button class="buy-btn" @click="goBuy" >立即购买</button>
			</view>
		</view>
		<view class="bottom-bar" v-else>
			<button class="buy-btn" @click="goStudy" style=" width: 100%;background-color: #4CAF50;color: #fff;">开始学习</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import course_api from "@/api/course_api.js"
import { onLoad } from '@dcloudio/uni-app'

onLoad((options) => {
  courseId.value = options.id // 已支持 App-Plus
  console.log('课程ID:', options.id)
})
const courseId = ref(0)



// 响应式数据
const statusBarHeight = ref(0)
const navBarHeight = ref(88)
const activeTab = ref('intro') // 默认激活课程介绍标签
const courseDetail = ref({})
// 倒计时与价格展示
const countdown = ref({
	days: 0,
	hours: '00',
	minutes: '00',
	seconds: '00'
})
let countdownTimer = null // 倒计时定时器
const showLimitedOffer = ref(false)
const showPermanentOffer = ref(false)
const currentPriceYuan = ref(0)
const originalPriceYuan = ref(0)
// 课程目录数据
const chapterList = ref([])
// 回复相关状态
const activeReplyId = ref(null)
const replyText = ref('')


// 方法
const getSystemInfo = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
	// #ifdef MP-WEIXIN
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
	// #ifdef APP-PLUS
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
}


const startCountdown = (endTime) => {
	if (!endTime) return
	countdownTimer = setInterval(() => {
		const now = new Date().getTime()
		const distance = endTime - now
		
		if (distance < 0) {
			// 倒计时结束
			clearInterval(countdownTimer)
			countdown.value = {
				days: 0,
				hours: '00',
				minutes: '00',
				seconds: '00'
			}
			return
		}
		
		// 计算剩余时间
		const days = Math.floor(distance / (1000 * 60 * 60 * 24))
		const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
		const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
		const seconds = Math.floor((distance % (1000 * 60)) / 1000)
		
		// 更新倒计时数据
		countdown.value = {
			days: days,
			hours: hours.toString().padStart(2, '0'),
			minutes: minutes.toString().padStart(2, '0'),
			seconds: seconds.toString().padStart(2, '0')
		}
	}, 1000)
}

const goBack = () => {
	uni.navigateBack()
}

const goShare = () => {
	uni.showToast({
		title: '分享功能',
		icon: 'none'
	})
}

const goBuy = () => {
	uni.redirectTo({
		url:'/pages_course/course_payment/course_payment?id='+courseId.value
	})
}

const goStudy = () => {
	uni.showToast({
		title: '开始学习',
		icon: 'none'
	})
}

const reviewList = ref([])
const reviewPage = ref(1)
const reviewTotal = ref(0)
const reviewPages = ref(1)
const reviewLoading = ref(false)

const getReviewList = () => {
	if (reviewLoading.value) return
	
	reviewLoading.value = true
	console.log('获取评论列表', courseId.value, reviewPage.value)
	
	course_api.listExcellencourseComment(courseId.value, reviewPage.value).then(res => {
		console.log('评论列表数据:', res)
		if (res.code == 200) {
			const data = res.data
			
			// 更新分页信息
			reviewTotal.value = data.total || 0
			reviewPages.value = data.pages || 1
			
			// 处理评论数据
			if (data.list && data.list.length > 0) {
				// 如果是第一页，直接替换；否则追加
				if (reviewPage.value === 1) {
					reviewList.value = data.list.map(item => ({
						id: item.id,
						userName: item.user_name || '匿名用户',
						avatar: '/static/icon_home_my_patient.png', // 默认头像
						rating: Math.floor(item.star / 2), // 将10分制转换为5分制
						time: formatDate(item.create_date),
						content: item.comment || '',
						replies: item.excellentcourse_comment_list ? item.excellentcourse_comment_list.map(reply => ({
							id: reply.id,
							userName: reply.user_name || '匿名用户',
							avatar: '/static/icon_home_my_patient.png',
							time: formatDate(reply.create_date),
							content: reply.comment || '',
							isAuthor: false
						})) : []
					}))
				} else {
					// 追加数据
					const newReviews = data.list.map(item => ({
						id: item.id,
						userName: item.user_name || '匿名用户',
						avatar: '/static/icon_home_my_patient.png',
						rating: Math.floor(item.star / 2),
						time: formatDate(item.create_date),
						content: item.comment || '',
						replies: item.excellentcourse_comment_list ? item.excellentcourse_comment_list.map(reply => ({
							id: reply.id,
							userName: reply.user_name || '匿名用户',
							avatar: '/static/icon_home_my_patient.png',
							time: formatDate(reply.create_date),
							content: reply.comment || '',
							isAuthor: false
						})) : []
					}))
					reviewList.value.push(...newReviews)
				}
			}
		} else {
			uni.showToast({
				title: res.msg || '获取评论失败',
				icon: 'none'
			})
		}
	}).catch(err => {
		console.error('获取评论列表失败:', err)
		uni.showToast({
			title: '获取评论失败',
			icon: 'none'
		})
	}).finally(() => {
		reviewLoading.value = false
	})
}

// 格式化日期
const formatDate = (dateStr) => {
	if (!dateStr) return ''
	
	try {
		const date = new Date(dateStr)
		const now = new Date()
		const diff = now - date
		
		// 小于1分钟
		if (diff < 60 * 1000) {
			return '刚刚'
		}
		// 小于1小时
		if (diff < 60 * 60 * 1000) {
			return `${Math.floor(diff / (60 * 1000))}分钟前`
		}
		// 小于1天
		if (diff < 24 * 60 * 60 * 1000) {
			return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
		}
		// 小于7天
		if (diff < 7 * 24 * 60 * 60 * 1000) {
			return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
		}
		
		// 超过7天显示具体日期
		return date.toLocaleDateString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit'
		})
	} catch (e) {
		return dateStr
	}
}

// 加载更多评论
const loadMoreReviews = () => {
	if (reviewPage.value < reviewPages.value && !reviewLoading.value) {
		reviewPage.value++
		getReviewList()
	}
}

// 刷新评论列表
const refreshReviews = () => {
	reviewPage.value = 1
	reviewList.value = []
	getReviewList()
}

const switchTab = (tab) => {
	activeTab.value = tab
	console.log('切换到标签:', tab)
	if (tab == 'reviews') {
		refreshReviews()
	}
}

const toggleChapter = (index) => {
	chapterList.value[index].expanded = !chapterList.value[index].expanded
	console.log('切换章节:', chapterList.value[index].title)
}

const goLesson = (lesson) => {
	console.log('进入课时:', lesson.title)
	if (courseDetail.value.is_buy === 0) {
		uni.showToast({
			title: '请先购买课程',
			icon: 'none'
		})
	} else {
		// 跳转到视频播放页面
		uni.navigateTo({
			url: `/pages_course/video/video?vid=${lesson.vid}&title=${encodeURIComponent(lesson.title)}`
		})
	}
}

const showReplyInput = (reviewId) => {
	activeReplyId.value = reviewId
	replyText.value = ''
}

const cancelReply = () => {
	activeReplyId.value = null
	replyText.value = ''
}

const submitReply = (reviewId) => {
	if (!replyText.value.trim()) {
		uni.showToast({
			title: '请输入回复内容',
			icon: 'none'
		})
		return
	}
	
	

	// 找到对应的评价
	const review = reviewList.value.find(item => item.id === reviewId)

	
	if (review) {
		course_api.addExcellencourseComment({
			excellentcourse_id: courseId.value,
			comment: replyText.value.trim(),
			p_id: reviewId,
			star:0,
			type:0
		}).then(res => {
			console.log('评价提交结果:', res)
			if(res.code == 200){
				uni.hideLoading()
				// 添加新回复
				const newReply = {
					id: Date.now(),
					userName: '我',
					avatar: '/static/icon_home_my_patient.png',
					time: new Date().toLocaleDateString(),
					content: replyText.value.trim(),
					isAuthor: false
				}
				
				if (!review.replies) {
					review.replies = []
				}
				review.replies.push(newReply)
				
				// 重置状态
				activeReplyId.value = null
				replyText.value = ''
				
				uni.showToast({
					title: '回复成功',
					icon: 'none'
				})
			}
		})

		
	}
}

const goToReview = () => {
	uni.navigateTo({
		url: '/pages_course/course_review/course_review?id=' + courseId.value + '&is_commented=' + courseDetail.value.is_commented
	})
}

const getCourseDetail = () => {
			course_api.excellencourseDetail(courseId.value).then(res => {
		console.log('课程详情数据:', res)
		if(res.code == 200){
			const data = res.data
			courseDetail.value = data
			
			// 调试 is_commented 字段
			console.log('is_commented 字段值:', data.is_commented)
			console.log('is_buy 字段值:', data.is_buy)
			
			// 更新页面数据
			updatePageData(data)
			// 优惠价格与倒计时
			const now = Date.now()
			const beginTs = data.discount_begin_date ? new Date(data.discount_begin_date).getTime() : null
			const endTs = data.discount_end_date ? new Date(data.discount_end_date).getTime() : null
			const originalCents = data.account || 0
			let finalCents = originalCents
			showLimitedOffer.value = false
			showPermanentOffer.value = false
			if (data.discount_type === 1 && data.discount_price > 0) {
				finalCents = data.discount_price
				showPermanentOffer.value = true
			} else if (data.discount_type === 2 && data.discount_price > 0) {
				const inWindow = (!beginTs || beginTs <= now) && (!!endTs && endTs > now)
				if (inWindow) {
					finalCents = data.discount_price
					showLimitedOffer.value = true
					startCountdown(endTs)
				}
			}
			currentPriceYuan.value = (finalCents || 0) / 100
			originalPriceYuan.value = (originalCents || 0) / 100
		} else {
			uni.showToast({
				title: res.msg || '获取课程详情失败',
				icon: 'none'
			})
		}
	}).catch(err => {
		console.error('获取课程详情失败:', err)
		uni.showToast({
			title: '获取课程详情失败',
			icon: 'none'
		})
	})
}

// 更新页面数据
const updatePageData = (data) => {
	// 更新课程标题
	if (data.title) {
		// 更新页面标题
		uni.setNavigationBarTitle({
			title: data.title
		})
	}
	
	// 更新课程目录数据
	if (data.excellentcourse_first_title_list && data.excellentcourse_first_title_list.length > 0) {
		chapterList.value = data.excellentcourse_first_title_list.map((chapter, index) => {
			// 计算该章节的总时长
			let totalDuration = 0
			if (chapter.excellentcourse_second_title_list) {
				chapter.excellentcourse_second_title_list.forEach(lesson => {
					if (lesson.time) {
						const timeParts = lesson.time.split(':')
						if (timeParts.length === 2) {
							totalDuration += parseInt(timeParts[0]) + parseInt(timeParts[1]) / 60
						}
					}
				})
			}
			
			return {
				id: chapter.id,
				title: chapter.title,
				duration: totalDuration > 0 ? `约${Math.ceil(totalDuration)}分钟` : '约45分钟',
				expanded: false,
				status: data.is_buy === 1 ? 'unlocked' : 'locked',
				statusText: data.is_buy === 1 ? '已解锁' : '未解锁',
				lessons: chapter.excellentcourse_second_title_list ? chapter.excellentcourse_second_title_list.map((lesson, lessonIndex) => {
					// 从标题中提取讲师姓名
					let teacherName = '未知讲师'
					if (lesson.title && lesson.title.includes('-')) {
						teacherName = lesson.title.split('-')[0]
					}
					
					return {
						id: lesson.id,
						title: lesson.title,
						duration: lesson.time || '未知时长',
						teacher: teacherName,
						status: (data.is_buy === 1 || lesson.type === 0) ? 'unlocked' : 'locked',
						statusText: (data.is_buy === 1 || lesson.type === 0) ? (lesson.type === 0 ? '试播' : '已解锁') : '未解锁',
						vid: lesson.vid,
						type: lesson.type
					}
				}) : []
			}
		})
	}
	
	// 更新评价数量
	if (data.comment_num !== undefined) {
		// 评价数量已经在模板中通过响应式数据绑定，无需手动更新DOM
		console.log('评价数量:', data.comment_num)
	}
	
	// 更新学习状态
	if (data.study_status !== undefined) {
		// 可以根据学习状态更新UI
		console.log('学习状态:', data.study_status)
	}
	
	// 更新价格信息
	if (data.discount_price !== undefined && data.discount_price > 0) {
		// 如果有优惠价格，更新价格显示
		console.log('优惠价格:', data.discount_price)
	}
	
	// 更新福利信息
	if (data.fuli_bon !== undefined) {
		console.log('福利积分:', data.fuli_bon)
	}
}

onMounted(() => {
	getSystemInfo()
	startCountdown()
	getCourseDetail()
	// 初始化评论列表
	getReviewList()
})

onUnmounted(() => {
	// 清除定时器
	if (countdownTimer) {
		clearInterval(countdownTimer)
	}
})
</script>

<style lang="scss">
.course-detail-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

// 导航栏
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	
	.nav-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #FF4757;
		}
	}
}

.page-content {
	background-color: #f5f5f5;
}

// 主横幅
.main-banner {
	position: relative;
	height: 400rpx;
	overflow: hidden;
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	
	.banner-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		
		.banner-title {
			font-size: 48rpx;
			color: #1976D2;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(255,255,255,0.8);
		}
	}
}

// 课程信息
.course-info {
	background-color: #fff;
	padding: 32rpx 24rpx;
	
	.course-header {
		margin-bottom: 24rpx;
		
		.course-title {
			display: block;
			font-size: 36rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 16rpx;
		}
		
		.course-meta {
			.lesson-count {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	
	.course-tags {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.tag-item {
			.tag-text {
				background-color: #FF4757;
				color: #fff;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
			}
		}
		
		.reward-info {
			font-size: 24rpx;
			color: #666;
			flex: 1;
			margin-left: 24rpx;
		}
	}
}

// 限时优惠模块
.limited-offer {
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	margin: 24rpx;
	border-radius: 20rpx;
	padding: 32rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
	
	.offer-left {
		flex: 2;
		
		.price-info {
			position: relative;
			margin-bottom: 16rpx;
			
			.current-price {
				font-size: 48rpx;
				color: #fff;
				font-weight: bold;
				margin-right: 16rpx;
			}
			
			.original-price {
				font-size: 28rpx;
				color: #fff;
				text-decoration: line-through;
				opacity: 0.8;
			}
		}
		
		.offer-tag {
			display: inline-block;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 8rpx 16rpx;
			
			.tag-text {
				font-size: 22rpx;
				color: #FF6B6B;
				font-weight: 600;
			}
		}
	}
	
	.offer-right {
		flex: 1;
		text-align: center;
		
		.countdown-text {
			display: block;
			font-size: 24rpx;
			color: #fff;
			margin-bottom: 12rpx;
		}
		
		.countdown-timer {
			.days {
				display: block;
				font-size: 28rpx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.time-segments {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;
				
				.time-box {
					background-color: #FF8E53;
					color: #fff;
					font-size: 24rpx;
					font-weight: 600;
					padding: 8rpx 12rpx;
					border-radius: 8rpx;
					min-width: 40rpx;
					text-align: center;
				}
				
				.time-separator {
					color: #fff;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}
	}
}

// 永久优惠优化：去除右侧留白、更紧凑的左区布局
.limited-offer.permanent {
	justify-content: flex-start;

	.offer-left {
		flex: initial;
		display: flex;
		align-items: center;
		gap: 16rpx;

		.price-info {
			margin-bottom: 0;
		}
	}

	.offer-right { display: none; }
}

// 标签导航
.tab-nav {
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	display: flex;
	
	.tab-item {
		flex: 1;
		padding: 24rpx 0;
		text-align: center;
		position: relative;
		
		.tab-text {
			font-size: 28rpx;
			color: #666;
		}
		
		&.active {
			.tab-text {
				color: #FF4757;
				font-weight: 600;
			}
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #FF4757;
				border-radius: 2rpx;
			}
		}
	}
}

// 课程介绍内容
.course-intro {
	background-color: #fff;
	padding: 32rpx 24rpx;
	
	.intro-banner {
		background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
		padding: 24rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		text-align: center;
		
		.intro-title {
			font-size: 32rpx;
			color: #1976D2;
			font-weight: 600;
		}
	}
	
	.course-description {
		margin-bottom: 32rpx;
		
		.description-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 16rpx;
		}
		
		.description-content {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			
			img {
				max-width: 100%;
				height: auto;
				border-radius: 8rpx;
				margin: 16rpx 0;
			}
		}
	}
	
	.instructors {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
		gap: 32rpx;
		
		.instructor-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			
			.instructor-avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
				border: 4rpx solid #f0f0f0;
			}
			
			.instructor-info {
				.instructor-name {
					display: block;
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 8rpx;
					word-break: break-all;
				}
				
				.instructor-hospital {
					display: block;
					font-size: 22rpx;
					color: #666;
					line-height: 1.3;
				}
			}
		}
	}
}

// 课程目录内容
.course-catalog {
	background-color: #fff;
	padding: 32rpx 24rpx;
	
	.catalog-overview {
		display: flex;
		justify-content: space-around;
		padding: 24rpx;
		background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		
		.overview-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			
			.overview-label {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 8rpx;
			}
			
			.overview-value {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}
		}
	}
	
	.chapter-list {
		.chapter-item {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
			
			.chapter-header {
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f0f0f0;
				
				.chapter-info {
					flex: 1;
					
					.chapter-title {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						
						.chapter-name {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
							margin-left: 12rpx;
						}
					}
					
					.chapter-meta {
						display: flex;
						gap: 24rpx;
						margin-left: 28rpx;
						
						.lesson-count, .duration {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
				
				.chapter-status {
					.status-text {
						font-size: 24rpx;
						padding: 8rpx 16rpx;
						border-radius: 12rpx;
						
						&.locked {
							background-color: #F5F5F5;
							color: #999;
						}
						
						&.unlocked {
							background-color: #E8F5E8;
							color: #4CAF50;
						}
						
						&.completed {
							background-color: #E3F2FD;
							color: #2196F3;
						}
					}
				}
			}
			
			.lesson-list {
				background-color: #FAFAFA;
				
				.lesson-item {
					padding: 20rpx 24rpx 20rpx 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.lesson-info {
						flex: 1;
						
						.lesson-title {
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							
							.lesson-name {
								font-size: 26rpx;
								color: #333;
								margin-left: 12rpx;
							}
						}
						
						.lesson-meta {
							display: flex;
							gap: 24rpx;
							margin-left: 32rpx;
							
							.lesson-duration, .lesson-teacher {
								font-size: 22rpx;
								color: #666;
							}
						}
					}
					
					.lesson-status {
						.status-text {
							font-size: 22rpx;
							padding: 6rpx 12rpx;
							border-radius: 8rpx;
							
							&.locked {
								background-color: #F5F5F5;
								color: #999;
							}
							
							&.unlocked {
								background-color: #E8F5E8;
								color: #4CAF50;
							}
							
							&.completed {
								background-color: #E3F2FD;
								color: #2196F3;
							}
						}
					}
				}
			}
		}
	}
}

// 评价内容
.course-reviews {
	background-color: #fff;
	padding: 32rpx 24rpx;
	
	.review-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		
		.review-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
		}
		
		.review-actions-header {
			display: flex;
			align-items: center;
			gap: 24rpx;
			
			.review-count {
				font-size: 26rpx;
				color: #666;
			}
			
			.write-review-btn {
				background-color: #FF4757;
				color: #fff;
				border: none;
				padding: 12rpx 24rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	
	.review-list {
		.review-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.review-user {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.user-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				
				.user-info {
					flex: 1;
					
					.user-name {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}
					
					.user-rating {
						display: flex;
						gap: 4rpx;
					}
				}
				
				.review-time {
					font-size: 22rpx;
					color: #999;
				}
			}
			
			.review-content {
				.review-text {
					font-size: 26rpx;
					color: #333;
					line-height: 1.6;
				}
			}
			
			// 回复按钮
			.review-actions {
				margin-top: 16rpx;
				
				.reply-btn {
					display: inline-flex;
					align-items: center;
					gap: 8rpx;
					padding: 12rpx 20rpx;
					background-color: #f8f9fa;
					border-radius: 20rpx;
					
					.reply-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			// 二级评论列表
			.reply-list {
				margin-top: 16rpx;
				padding-left: 32rpx;
				border-left: 2rpx solid #f0f0f0;
				
				.reply-item {
					padding: 16rpx 0;
					
					.reply-user {
						display: flex;
						align-items: flex-start;
						
						.reply-avatar {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-right: 12rpx;
							margin-top: 4rpx;
						}
						
						.reply-info {
							flex: 1;
							
							.reply-header {
								display: flex;
								align-items: center;
								gap: 12rpx;
								margin-bottom: 8rpx;
								
								.reply-name {
									font-size: 24rpx;
									color: #333;
									font-weight: 500;
								}
								
								.reply-time {
									font-size: 20rpx;
									color: #999;
								}
								
								.author-tag {
									font-size: 20rpx;
									color: #fff;
									background-color: #FF4757;
									padding: 4rpx 8rpx;
									border-radius: 8rpx;
								}
							}
							
							.reply-content {
								font-size: 24rpx;
								color: #333;
								line-height: 1.5;
							}
						}
					}
				}
			}
			
			// 回复输入框
			.reply-input-container {
				margin-top: 16rpx;
				padding: 16rpx;
				background-color: #f8f9fa;
				border-radius: 12rpx;
				
				.reply-input-wrapper {
					.reply-input {
						width: 100%;
						height: 60rpx;
						padding: 0 16rpx;
						background-color: #fff;
						border: 1rpx solid #e0e0e0;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #333;
						margin-bottom: 12rpx;
					}
					
					.reply-input-actions {
						display: flex;
						gap: 12rpx;
						justify-content: flex-end;
						
						.cancel-btn {
							padding: 8rpx 20rpx;
							background-color: #f0f0f0;
							color: #666;
							border: none;
							border-radius: 8rpx;
							font-size: 24rpx;
						}
						
						.submit-btn {
							padding: 8rpx 20rpx;
							background-color: #FF4757;
							color: #fff;
							border: none;
							border-radius: 8rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	
	// 加载更多
	.load-more {
		padding: 32rpx 0;
		text-align: center;
		
		.load-more-btn {
			background-color: #f8f9fa;
			color: #666;
			border: 1rpx solid #e0e0e0;
			padding: 16rpx 48rpx;
			border-radius: 24rpx;
			font-size: 26rpx;
			
			&:disabled {
				opacity: 0.6;
				color: #999;
			}
		}
	}
	
	// 已加载全部
	.load-all {
		padding: 32rpx 0;
		text-align: center;
		
		.load-all-text {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	// 加载中状态
	.loading-reviews {
		padding: 80rpx 0;
		text-align: center;
		
		.loading-icon {
			margin-bottom: 24rpx;
			animation: spin 1s linear infinite;
		}
		
		.loading-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
	
	// 空评价状态
	.empty-reviews {
		padding: 80rpx 0;
		text-align: center;
		
		.empty-icon {
			margin-bottom: 24rpx;
		}
		
		.empty-text {
			display: block;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 12rpx;
		}
		
		.empty-desc {
			display: block;
			font-size: 24rpx;
			color: #ccc;
		}
	}
}

// 底部购买栏
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #fff;
	border-top: 1rpx solid #e5e5e5;
	display: flex;
	align-items: center;
	padding: 0 24rpx 20rpx 24rpx;
	z-index: 999;
	
	.price-section {
		flex: 1;
		
		.price {
			font-size: 48rpx;
			color: #FF4757;
			font-weight: bold;
		}
	}
	
	.buy-section {
		.buy-btn {
			background-color: #FF4757;
			color: #fff;
			border: none;
			padding: 24rpx 48rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
}
</style>
