<template>
	<view class="course-page">
		<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
			<view class="safe-top"></view>
			<view class="page-body">
			<text class="page-title">课程分类</text>

			<view class="search-row">
				<view class="search-box" @click="onTap('搜索关键词')">
					<uni-icons type="search" color="#8a94a6" :size="16" />
					<text class="search-placeholder">搜索关键词</text>
				</view>
				<view class="search-btn" @click="onTap('搜索')">搜索</view>
			</view>

			<view class="sort-row">
				<view
					v-for="(item, index) in sortTabs"
					:key="item"
					class="sort-item"
					:class="{ active: selectedSort === index }"
					@click="selectedSort = index"
				>
					{{ item }}
				</view>
			</view>

			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-wrap">
					<view
						v-for="(item, index) in categories"
						:key="item"
						class="category-item"
						:class="{ selected: selectedCategory === index }"
						@click="selectedCategory = index"
					>
						{{ item }}
					</view>
				</view>
			</scroll-view>

			<view class="buy-row">
				<view
					v-for="(item, index) in buyTabs"
					:key="item"
					class="buy-item"
					:class="{ active: selectedBuy === index }"
					@click="selectedBuy = index"
				>
					{{ item }}
				</view>
			</view>

			<text class="count-text">共2个内容</text>

			<view class="course-list">
				<view v-for="item in courses" :key="item.title" class="course-card" @click="openCourse(item)">
					<view class="cover-block">
						<text class="cover-label">{{ item.coverLabel }}</text>
						<view class="qr-box">QR</view>
						<text class="vip-tag">VIP专享</text>
					</view>
					<view class="course-info">
						<text class="course-title">{{ item.title }}</text>
						<text class="teacher">规划杨·15年</text>
						<view class="rank-tag">口碑总榜第1名</view>
						<view class="price-row">
							<text class="price">¥99.00</text>
							<view class="trial-btn" @click.stop="openCourse(item)">
								<uni-icons type="videocam-filled" color="#ffffff" :size="12" />
								<text>试听</text>
							</view>
						</view>
					</view>
				</view>
			</view>

				<view class="bottom-space"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			enterActive: false,
			sortTabs: ['最热', '最新', '低价优先', '高价优先'],
			buyTabs: ['全部', '未购买', '已购买'],
			categories: [
				'全部分类',
				'青年篇：入伍成长进阶实战课',
				'职场',
				'年度日更',
				'央国企',
				'家长篇：入伍子女成长护航课',
				'测试'
			],
			selectedSort: 0,
			selectedCategory: 0,
			selectedBuy: 0,
			courses: [
				{
					id: 'parent-guard',
					title: '《家长篇 —— 参军子女成长护航指南》',
					coverLabel: '家长篇\n成长护航'
				},
				{
					id: 'youth-growth',
					title: '《青年篇 —— 军旅成长进阶实战手册》',
					coverLabel: '青年篇\n进阶实战'
				}
			]
		};
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		onTap(label) {
			uni.showToast({
				title: `${label} 可点击`,
				icon: 'none'
			});
		},
		openCourse(course) {
			const courseId = course && course.id ? course.id : 'parent-guard';
			uni.navigateTo({
				url: `/pages/military/course-detail/course-detail?courseId=${courseId}`
			});
		}
	}
};
</script>

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

.page-content {
	min-height: 100vh;
}

.page-fade {
	opacity: 0;
	transform: translateY(8rpx);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-fade.enter-active {
	opacity: 1;
	transform: translateY(0);
}

.safe-top {
	height: calc(var(--status-bar-height) + 16rpx);
}

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

.page-title {
	display: block;
	text-align: center;
	font-size: 38rpx;
	font-weight: 700;
	color: #28364d;
}

.search-row {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
}

.search-box {
	flex: 1;
	height: 74rpx;
	padding: 0 22rpx;
	border-radius: 16rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
}

.search-placeholder {
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #8a94a6;
}

.search-btn {
	margin-left: 14rpx;
	height: 74rpx;
	padding: 0 30rpx;
	border-radius: 16rpx;
	font-size: 26rpx;
	color: #ffffff;
	font-weight: 600;
	background: #ff8a33;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sort-row,
.buy-row {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	gap: 34rpx;
	white-space: nowrap;
}

.sort-item,
.buy-item {
	font-size: 25rpx;
	color: #8994a7;
	padding-bottom: 10rpx;
	border-bottom: 4rpx solid transparent;
}

.sort-item.active,
.buy-item.active {
	color: #ff8a33;
	font-weight: 700;
	border-color: #ff8a33;
}

.category-scroll {
	margin-top: 18rpx;
	white-space: nowrap;
}

.category-wrap {
	display: inline-flex;
	gap: 16rpx;
	padding-bottom: 4rpx;
}

.category-item {
	padding: 12rpx 18rpx;
	border-radius: 26rpx;
	font-size: 22rpx;
	background: #f0f2f6;
	color: #4f5d74;
}

.category-item.selected {
	background: #ff8a33;
	color: #ffffff;
}

.count-text {
	display: block;
	margin-top: 18rpx;
	font-size: 24rpx;
	color: #7a8697;
}

.course-list {
	margin-top: 12rpx;
}

.course-card {
	margin-bottom: 18rpx;
	padding: 18rpx;
	border-radius: 22rpx;
	background: #ffffff;
	display: flex;
	box-shadow: 0 8rpx 20rpx rgba(35, 48, 70, 0.08);
}

.cover-block {
	width: 200rpx;
	border-radius: 16rpx;
	padding: 14rpx;
	background: linear-gradient(145deg, #f06a64 0%, #de3f3f 100%);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cover-label {
	font-size: 24rpx;
	line-height: 1.4;
	white-space: pre-line;
	font-weight: 600;
}

.qr-box {
	margin-top: 10rpx;
	width: 58rpx;
	height: 58rpx;
	border-radius: 10rpx;
	background: #ffffff;
	color: #d44545;
	font-size: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vip-tag {
	margin-top: 10rpx;
	font-size: 20rpx;
	color: #fff6cc;
}

.course-info {
	margin-left: 18rpx;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.course-title {
	font-size: 28rpx;
	line-height: 1.4;
	font-weight: 700;
	color: #2b3950;
}

.teacher {
	margin-top: 10rpx;
	font-size: 22rpx;
	color: #778399;
}

.rank-tag {
	margin-top: 10rpx;
	padding: 6rpx 12rpx;
	border-radius: 999rpx;
	font-size: 20rpx;
	align-self: flex-start;
	color: #2f8d4f;
	background: #e6f6eb;
}

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

.price {
	font-size: 36rpx;
	font-weight: 700;
	color: #f05d31;
}

.trial-btn {
	height: 56rpx;
	padding: 0 20rpx;
	border-radius: 14rpx;
	background: #ff8a33;
	display: flex;
	align-items: center;
	gap: 8rpx;
	color: #ffffff;
	font-size: 24rpx;
}

.bottom-space {
	height: 180rpx;
}
</style>
