<template>
	<view class="course-detail-page">
		<view class="safe-top"></view>
		<scroll-view scroll-y class="page-scroll">
			<view class="page-body">
				<view v-if="showVideoPlayer" class="video-wrap">
					<video
						id="course-video-player"
						class="course-video"
						:src="currentVideo.url"
						:poster="banner.poster"
						controls
						autoplay
						show-center-play-btn
						object-fit="cover"
					></video>
					<view class="video-close" @click="closeVideo">
						<uni-icons type="closeempty" color="#ffffff" :size="18" />
					</view>
					<view class="video-title">正在播放：{{ currentVideo.title }}</view>
				</view>

				<view v-else class="banner-wrap">
					<view class="banner-head">
						<text class="brand">绵若启航</text>
						<view class="teacher-mini">
							<view class="teacher-avatar">杨</view>
							<view>
								<text class="mini-name">杨导</text>
								<text class="mini-role">就业规划师</text>
							</view>
						</view>
					</view>
					<text class="banner-title">义务/直招/军校 规划提升课</text>
					<text class="banner-sub">【实用技能+实战攻略】</text>
					<view class="banner-bottom">
						<view class="dots">
							<view v-for="i in 3" :key="i" class="dot" :class="{ active: i === 1 }"></view>
						</view>
						<view class="qr-tag">二维码</view>
					</view>
					<text class="banner-note">家长端：解陪伴难题，当坚实后盾；青年端：全阶段覆盖，促职业进阶</text>
				</view>

				<view class="info-card">
					<view class="price-row">
						<view class="price-left">
							<text class="price-tag">优惠价</text>
							<text class="price">¥99.00</text>
							<text class="origin">¥999.00</text>
						</view>
					</view>
					<view class="title-row">
						<text class="course-title">家长篇 —— 参军子女成长护航指南</text>
						<text class="lesson-count">有5节</text>
					</view>
					<view class="summary-box">
						聚焦亲子沟通、子女规划、部队对接等关键痛点，提供可执行实操路径，兼顾效果与合规边界。
					</view>
					<view class="stats-box">
						<view class="stats-item">
							<text class="stats-label">现有课程</text>
							<text class="stats-value">5</text>
						</view>
						<view class="stats-line"></view>
						<view class="stats-item">
							<text class="stats-label">有5人学习</text>
							<text class="stats-value">5</text>
						</view>
					</view>
				</view>

				<view class="teacher-entry" @click="openTeacher">
					<view class="entry-left">
						<view class="entry-avatar">杨</view>
						<view>
							<text class="entry-name">规划杨 老师</text>
							<text class="entry-year">15年</text>
						</view>
					</view>
					<uni-icons type="arrow-right" color="#8a93a3" :size="15" />
				</view>

				<view class="tab-area">
					<view class="tab-head">
						<view
							v-for="tab in tabs"
							:key="tab.key"
							class="tab-item"
							:class="{ active: activeTab === tab.key }"
							@click="activeTab = tab.key"
						>
							{{ tab.label }}
						</view>
					</view>

					<view v-if="activeTab === 'catalog'" class="catalog-list">
						<view
							v-for="(item, index) in chapters"
							:key="item.id"
							class="catalog-item"
							@click="playChapter(item)"
						>
							<view class="catalog-main">
								<text class="video-tag">视频</text>
								<text class="catalog-title">{{ index + 1 }}. {{ item.title }}</text>
							</view>
							<view class="catalog-sub">
								<text>时长 --:-- | 播放 -- 次</text>
							</view>
							<uni-icons type="locked-filled" color="#c3cad6" :size="16" />
						</view>
					</view>

					<view v-else-if="activeTab === 'detail'" class="text-panel">
						课程聚焦家长在子女参军过程中的核心需求，通过5节针对性课程，围绕亲子沟通、发展路径、意愿引导、部队对接、合规拜访等维度，系统解决家长常见困惑，帮助家长建立长期可持续的支持方式。
					</view>

					<view v-else class="review-panel">
						<text class="empty-comment">暂无评论！</text>
						<view class="comment-box">
							<input class="comment-input" placeholder="请输入您的观点" />
							<uni-icons type="star-filled" color="#ffb84d" :size="18" />
						</view>
					</view>
				</view>

				<view class="bottom-holder"></view>
			</view>
		</scroll-view>

		<view class="action-bar">
			<view class="action-left">
				<view class="quick-item" @click="goHome">
					<uni-icons type="home-filled" color="#6e7a8c" :size="20" />
					<text>首页</text>
				</view>
				<view class="quick-item" @click="goProfile">
					<uni-icons type="person-filled" color="#6e7a8c" :size="20" />
					<text>个人中心</text>
				</view>
			</view>
			<view class="buy-btn" @click="onBuy">立即购买</view>
		</view>
	</view>
</template>

<script>
const demoVideo = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';

export default {
	data() {
		return {
			courseId: 'parent-guard',
			activeTab: 'catalog',
			tabs: [
				{ key: 'catalog', label: '课程目录' },
				{ key: 'detail', label: '课程详情' },
				{ key: 'review', label: '学员评价' }
			],
			banner: {
				poster: ''
			},
			showVideoPlayer: false,
			currentVideo: {
				title: '',
				url: demoVideo
			},
			chapters: [
				{ id: 'c1', title: '亲子沟通与参军意愿引导', url: demoVideo },
				{ id: 'c2', title: '子女发展路径与目标拆解', url: demoVideo },
				{ id: 'c3', title: '部队对接流程及关键节点', url: demoVideo },
				{ id: 'c4', title: '家长陪伴与情绪管理实操', url: demoVideo },
				{ id: 'c5', title: '合规沟通边界与风险规避', url: demoVideo }
			]
		};
	},
	onLoad(options) {
		if (options && options.courseId) {
			this.courseId = options.courseId;
		}
	},
	methods: {
		playChapter(item) {
			this.currentVideo = {
				title: item.title,
				url: item.url
			};
			this.showVideoPlayer = true;
		},
		closeVideo() {
			this.showVideoPlayer = false;
		},
		openTeacher() {
			uni.navigateTo({
				url: '/pages/military/teacher-detail/teacher-detail'
			});
		},
		goHome() {
			uni.switchTab({
				url: '/pages/military/home/home'
			});
		},
		goProfile() {
			uni.switchTab({
				url: '/pages/military/profile/profile'
			});
		},
		onBuy() {
			uni.showToast({
				title: '请先完成支付流程接入',
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.course-detail-page {
	min-height: 100vh;
	background: #f4f5f8;
}

.safe-top {
	height: var(--status-bar-height);
}

.page-scroll {
	height: 100vh;
}

.page-body {
	padding: 0 24rpx;
}

.banner-wrap {
	margin-top: 14rpx;
	padding: 22rpx;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #d24141 0%, #a71e1e 100%);
	color: #ffffff;
}

.banner-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	font-size: 24rpx;
	font-weight: 700;
}

.teacher-mini {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.teacher-avatar {
	width: 52rpx;
	height: 52rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 700;
}

.mini-name {
	display: block;
	font-size: 22rpx;
}

.mini-role {
	display: block;
	font-size: 20rpx;
	opacity: 0.9;
}

.banner-title {
	display: block;
	margin-top: 20rpx;
	font-size: 40rpx;
	font-weight: 700;
	line-height: 1.25;
}

.banner-sub {
	display: block;
	margin-top: 10rpx;
	font-size: 24rpx;
	opacity: 0.95;
}

.banner-bottom {
	margin-top: 18rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dots {
	display: flex;
	gap: 10rpx;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.dot.active {
	background: #ffffff;
}

.qr-tag {
	width: 86rpx;
	height: 86rpx;
	border-radius: 12rpx;
	background: #ffffff;
	color: #ad1f1f;
	font-size: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-note {
	display: block;
	margin-top: 14rpx;
	font-size: 20rpx;
	line-height: 1.5;
	opacity: 0.92;
}

.video-wrap {
	margin-top: 14rpx;
	position: relative;
}

.course-video {
	width: 100%;
	height: 380rpx;
	border-radius: 20rpx;
	background: #000;
}

.video-close {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	width: 52rpx;
	height: 52rpx;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-title {
	position: absolute;
	left: 14rpx;
	bottom: 12rpx;
	padding: 6rpx 12rpx;
	border-radius: 10rpx;
	font-size: 20rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
}

.info-card {
	margin-top: 18rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	background: #ffffff;
}

.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price-left {
	display: flex;
	align-items: baseline;
	gap: 12rpx;
}

.price-tag {
	padding: 4rpx 10rpx;
	border-radius: 8rpx;
	font-size: 18rpx;
	color: #ffffff;
	background: #e53b3b;
}

.price {
	font-size: 40rpx;
	font-weight: 700;
	color: #e53b3b;
}

.origin {
	font-size: 22rpx;
	color: #a7afbc;
	text-decoration: line-through;
}

.title-row {
	margin-top: 14rpx;
	display: flex;
	justify-content: space-between;
	gap: 16rpx;
}

.course-title {
	flex: 1;
	font-size: 30rpx;
	font-weight: 700;
	color: #27364c;
}

.lesson-count {
	font-size: 22rpx;
	color: #6c7788;
	writing-mode: vertical-rl;
	letter-spacing: 4rpx;
}

.summary-box {
	margin-top: 14rpx;
	padding: 14rpx;
	border-radius: 12rpx;
	background: #eef5ff;
	font-size: 23rpx;
	line-height: 1.6;
	color: #5a6780;
}

.stats-box {
	margin-top: 14rpx;
	height: 98rpx;
	border-radius: 14rpx;
	background: #f7f9fd;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.stats-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.stats-label {
	font-size: 22rpx;
	color: #7b8798;
}

.stats-value {
	margin-top: 6rpx;
	font-size: 30rpx;
	font-weight: 700;
	color: #25354c;
}

.stats-line {
	width: 1px;
	height: 54rpx;
	background: #d9e1ee;
}

.teacher-entry {
	margin-top: 14rpx;
	padding: 18rpx;
	border-radius: 16rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.entry-left {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.entry-avatar {
	width: 62rpx;
	height: 62rpx;
	border-radius: 50%;
	background: #d83737;
	color: #fff;
	font-size: 26rpx;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.entry-name {
	display: block;
	font-size: 27rpx;
	font-weight: 700;
	color: #2a3950;
}

.entry-year {
	display: inline-flex;
	margin-top: 8rpx;
	padding: 2rpx 10rpx;
	border-radius: 999rpx;
	font-size: 20rpx;
	color: #d54242;
	background: #ffecec;
}

.tab-area {
	margin-top: 16rpx;
	border-radius: 18rpx;
	background: #ffffff;
	overflow: hidden;
}

.tab-head {
	display: flex;
	padding: 0 14rpx;
	border-bottom: 1px solid #eef2f8;
}

.tab-item {
	position: relative;
	margin-right: 34rpx;
	height: 84rpx;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #6b768a;
}

.tab-item.active {
	color: #d53a3a;
	font-weight: 700;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12rpx;
	height: 6rpx;
	border-radius: 6rpx;
	background: #d53a3a;
}

.catalog-list,
.text-panel,
.review-panel {
	padding: 14rpx;
}

.catalog-item {
	padding: 14rpx 8rpx;
	border-bottom: 1px solid #eef2f8;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.catalog-item:last-child {
	border-bottom: none;
}

.catalog-main {
	display: flex;
	align-items: center;
	gap: 10rpx;
	max-width: 82%;
}

.video-tag {
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
	font-size: 18rpx;
	color: #ffffff;
	background: #4a9cf6;
}

.catalog-title {
	font-size: 25rpx;
	color: #2f3f56;
}

.catalog-sub {
	position: absolute;
	left: 0;
	bottom: -24rpx;
	font-size: 19rpx;
	color: #9ca6b6;
}

.catalog-item {
	position: relative;
	padding-bottom: 34rpx;
}

.text-panel {
	font-size: 25rpx;
	line-height: 1.7;
	color: #4c5a72;
}

.empty-comment {
	display: block;
	font-size: 26rpx;
	color: #7a8598;
}

.comment-box {
	margin-top: 20rpx;
	height: 80rpx;
	padding: 0 16rpx;
	border-radius: 12rpx;
	border: 1px solid #dbe3ef;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.comment-input {
	flex: 1;
	font-size: 24rpx;
}

.bottom-holder {
	height: 160rpx;
}

.action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(100rpx + env(safe-area-inset-bottom));
	padding: 0 24rpx env(safe-area-inset-bottom);
	background: #ffffff;
	border-top: 1px solid #e8edf6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99;
}

.action-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #6e7a8c;
}

.buy-btn {
	height: 72rpx;
	padding: 0 54rpx;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 700;
	color: #ffffff;
	background: #2ea35b;
	display: flex;
	align-items: center;
}
</style>
