<template>
	<view class="container">
		<image class="bg" src="@/static/images/bg.png" mode="aspectFill"></image>
		<!-- 顶部搜索栏 -->
		<view class="top-bar" :style="{marginTop: menuButtonInfo.top}">
			<view class="search-row" @click="onSearch">
				<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/search.png" mode=""></image>
				<text class="search-placeholder">搜索你感兴趣的内容</text>
			</view>
			<!-- <view class="top-actions">
				<text class="action-icon">⋯</text>
				<text class="action-icon scan">⊙</text>
			</view> -->
		</view>

		<!-- 应用标题与副标题 -->
		<view class="brand">
			<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/title2.png" mode="widthFix"></image>
			<!-- <text class="brand-title">品质韶华·乐享朝夕</text>
			<text class="brand-subtitle">全国89%的中老年人都在用的兴趣内容社区</text> -->
		</view>

		<!-- 主题横幅 Banner -->
		<scroll-view scroll-y class="scroll-content" :scroll-top="scrollTop" :show-scrollbar="false" :lower-threshold="120" @scrolltolower="onScrollToLower">
			<view class="banner" @click="onBannerClick">
				<!-- <image class="banner-bg" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/banner.png" mode="aspectFill"></image> -->
				<view class="inner">
					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
						<!-- <swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
							@click="handleAdvClick(item)">
							<image :src="item.imageUrl" mode=""></image>
						</swiper-item> -->
						<swiper-item class="swiper-item">
							<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/banner2.jpg" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			<!-- 央广原乡行 视频推荐区 -->
			<view class="section video-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/yxbofang.png" mode=""></image>
						<image class="section-title" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/yxy2.png" ></image>
					</view>
					<view class="section-more" @click="onMoreVideos">查看更多
					 <image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/back.png" ></image>
					</view>
				</view>
				<!-- 视频区骨架屏 -->
				<view class="video-skeleton" v-if="videoLoading && !hasVideoContent">
					<view class="sk-tag-row">
						<view class="sk-tag" v-for="i in 4" :key="'vtag-' + i"></view>
					</view>
					<view class="sk-video-card">
						<view class="sk-fv-body">
							<view class="sk-fv-thumb"></view>
							<view class="sk-fv-info">
								<view class="sk-line sk-line-lg"></view>
								<view class="sk-line sk-line-md"></view>
								<view class="sk-line sk-line-md"></view>
								<view class="sk-btn"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="feature-video-card" v-else>
					<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
						<view
							v-for="(tag, idx) in videoTags"
							:key="idx"
							class="tag-item"
							:class="{ active: videoTagIndex == tag.cateId}"
							@click="onVideoTagIndex(tag.cateId)"
						>
							<text>{{ tag.cateName }}</text>
						</view>
					</scroll-view>
					<view class="x-bc" @click="onWatchLive(videos)">
						<view class="fv-thumb">
							<image v-if="videoThumbSrc" class="fv-img" :src="videoThumbSrc" mode="aspectFill"></image>
						</view>
						<view class="fv-info">
							<text class="fv-title">{{videos.courseName}}</text>
							<text class="fv-desc">{{videos.courseDesc||'-'}}</text>
							<view class="btn-watch" @click.stop="onWatchLive(videos)">立即观看</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 免费精品课 -->
			<view class="section course-section">
				<view class="section-head">
					<view class="section-title-wrap">
						<image class="play-icon" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/bofang2.png" mode=""></image>
						<!-- <image class="section-title" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/jpk2.png" ></image> -->
					    <view style="color: rgba(0,0,0,0.85);font-size: 36rpx;font-weight: bold;">精选视频</view>
					 </view>
					<view class="section-more" @click="onMoreCourses">更多视频
					 <image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/back.png" ></image>
					</view>
				</view>
				<view class="nav-row" v-if="navList.length > 0">
					<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
					<view class="nav-inner">
						<view
							v-for="(item, index) in navList"
							:key="item.id"
							:class="['nav-item', { active: item.id == activeId }]"
							@click="onSelectByIndex(item.id)"
						>
							<text>{{ item.categoryName}}</text>
						</view>
					</view>
					</scroll-view>
				</view>
				<!-- 首屏骨架：仅课程列表 -->
				<view class="course-skeleton" v-if="courseSectionLoading && courses.length === 0">
					<view class="sk-course-list">
						<view class="sk-course-card" v-for="i in 3" :key="'course-' + i">
							<view class="sk-course-thumb"></view>
							<view class="sk-course-info">
								<view class="sk-line sk-line-lg"></view>
								<view class="sk-line sk-line-md"></view>
								<view class="sk-course-foot">
									<view class="sk-line sk-line-sm"></view>
									<view class="sk-btn-round"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="course-list-wrap" v-else>
					<view class="course-list" :class="{ 'list-dimmed': courseRefreshing }">
						<view
							v-for="(course, idx) in courses"
							:key="course.courseId"
							class="course-card"
							@click="onCourseClick(course)"
						>
							<view class="course-thumb">
								<image v-if="course.cover" class="course-img" :src="course.cover" mode="aspectFill"></image>
							</view>
							<view class="course-info">
								<text class="course-name">{{ course.name }}</text>
								<view class="x-end" style="justify-content: space-between;">
									<view class="course-meta">
										<image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/renshu.png"></image>
										<text class="meta-count">{{ courseViewsDisplay(course.views) }}</text>
									</view>
									<view class="btn-watch2" @click.stop="onCourseClick(course)">立即观看</view>
								</view>
							</view>
						</view>
					</view>
					<view class="course-refresh-mask" v-if="courseRefreshing">
						<view class="refresh-spinner"></view>
					</view>
				</view>
				<view class="course-loadmore" v-if="courses.length > 0">
					<text v-if="courseLoading">加载中...</text>
					<text v-else-if="!courseHasMore">没有更多了</text>
				</view>
			</view>

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

		<GuidePopup ref="guidePopup" />
	</view>
</template>

<script>
import { listPublicCourseCategory, listPublicCourse, getHisStoreConfig } from '@/api/home.js'
import GuidePopup from './components/GuidePopup.vue'

export default {
	components: {
		GuidePopup
	},
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			videoTagIndex: 0,
			activeId: 0,
			videoTags: [],
			videos:{},
			navList: [],
			courses: [],
			coursePageNum: 1,
			coursePageSize: 10,
			courseLoading: false,
			courseRefreshing: false,
			courseHasMore: true,
			courseRequestId: 0,
			videoLoading: true,
			courseSectionLoading: true,
			videoThumbSrc: '',
			menuButtonInfo: {}, // 胶囊按钮布局信息
			yxy:{},
			scrollTop: 0
		}
	},
	computed: {
		hasVideoContent() {
			return !!(this.videos && this.videos.courseId)
		}
	},
	onLoad() {
		this.getMenuButtonInfo(); // 初始化获取胶囊信息
	},
	onShow() {
		this.loadConfig();
		//this.initPublicVideoData();
		this.initPublicCourseData();
		if (uni.getStorageSync('AppToken')) {
			this.runGuideCheck()
		}
	},
	methods: {
		runGuideCheck() {
			const run = () => {
				if (!this.$refs.guidePopup) return
				this.$refs.guidePopup.syncViewedState()
				this.$refs.guidePopup.check()
			}
			if (this.$refs.guidePopup) run()
			else this.$nextTick(run)
		},
		courseViewsDisplay(views) {
			const raw = views;
			const n = Number(raw);
			if (!Number.isFinite(n) || n < 0) {
				return "0";
			}
			if (n < 100000) {
				return String(Math.floor(n));
			}
			if (n < 1000000) {
				return (n / 10000).toFixed(1) + "w";
			}
			return "100w+";
		},
		onSelectByIndex(cateId) {
			if (cateId === this.activeId || this.courseRefreshing) return;
			this.activeId = cateId;
			this.getPublicCourseList(cateId, { reset: true });
		},
		onVideoTagIndex(cateId) {
			this.videoTagIndex = cateId;
			this.getPublicVideoList(cateId);
		},
		async loadConfig() {
		  try {
		    // 1. 先拿配置（必须等它完成）
		    const res = await getHisStoreConfig({ name: 'moduleShow' })
		    const list = res?.courseChannels || []
		    const y = list.filter(item => item.dictLabel == '原乡行')
		    this.yxy = y[0] || {}
		
		    // 2. 配置拿完，再加载视频（关键！）
		    await this.initPublicVideoData()
		  } catch (err) {
		    console.error('加载配置失败', err)
		    this.yxy = {}
		  }
		},
		async initPublicVideoData() {
			const hasCache = this.videoTags.length > 0 && this.hasVideoContent
			if (!hasCache) this.videoLoading = true
			try {
				const res = await listPublicCourseCategory({homePage:1,yxxTag:this.yxy.dictValue||1, pageNum: 1, pageSize: 4 });
				const list = (res && res.data && res.data.list) || [];
				this.videoTags = list
				if (this.videoTags.length > 0) {
					this.videoTagIndex = this.videoTags[0].cateId;
					await this.getPublicVideoList(this.videoTagIndex);
				} else {
					this.videos = {};
					this.videoThumbSrc = '';
				}
			} catch (e) {
				this.videoTags = [];
				this.videos = {};
				this.videoThumbSrc = '';
			} finally {
				this.videoLoading = false
			}
		},
		async initPublicCourseData() {
			const hasCache = this.navList.length > 0 && this.courses.length > 0
			if (!hasCache) this.courseSectionLoading = true
			try {
				const res = await listPublicCourseCategory({ homePage:1, pageNum: 1, pageSize: 10 ,yxxTag:0});
				const list = (res && res.data && res.data.list) || [];
				const mapped = list.map(item => ({
					id: item.cateId,
					categoryName: item.cateName
				}));
				this.navList = [{ id:0, categoryName: '精选' }, ...mapped];
				this.activeId = 0;
				await this.getPublicCourseList(this.activeId, { reset: true });
			} catch (e) {
				this.navList = [];
				this.courses = [];
				this.courseHasMore = false;
				this.courseSectionLoading = false
			}
		},
		preloadVideoThumb(src) {
			if (!src) {
				this.videoThumbSrc = ''
				return Promise.resolve()
			}
			if (this.videoThumbSrc === src) return Promise.resolve()
			return new Promise(resolve => {
				uni.getImageInfo({
					src,
					success: () => {
						this.videoThumbSrc = src
						resolve()
					},
					fail: () => {
						this.videoThumbSrc = src
						resolve()
					}
				})
			})
		},
		async getPublicVideoList(subCateId) {
			const hasCache = this.hasVideoContent && this.videos.imgUrl
			if (!hasCache) this.videoLoading = true
			try {
				const res = await listPublicCourse({
					recommendSlot:1,
					yxxTag:this.yxy.dictValue||1,
					pageNum: 1,
					pageSize: 1,
					subCateId: subCateId
				});
				const list = (res && res.data && res.data.list) || [];
				this.videos = list[0] || {}
				await this.preloadVideoThumb(this.videos.imgUrl)
			} catch (e) {
				this.videos = {};
				this.videoThumbSrc = '';
			} finally {
				this.videoLoading = false
			}
		},
		async getPublicCourseList(subCateId, options = {}) {
			const { reset = false } = options;
			if (this.courseLoading && !reset) return;
			if (!reset && !this.courseHasMore) return;
			const requestId = ++this.courseRequestId;
			if (reset) {
				this.coursePageNum = 1;
				this.courseHasMore = true;
				if (this.courses.length > 0) {
					this.courseRefreshing = true;
				} else {
					this.courseSectionLoading = true;
				}
			}
			this.courseLoading = true;
			const params = {
				recommendSlot: 3,
				yxxTag: 0,
				pageNum: this.coursePageNum,
				pageSize: this.coursePageSize,
			};
			if (subCateId !== 0) {
				params.subCateId = subCateId;
			}
			try {
				const res = await listPublicCourse(params);
				if (requestId !== this.courseRequestId) return;
				const list = (res && res.data && res.data.list) || [];
				const mappedList = list.map(item => ({
					courseId: item.courseId,
					name: item.courseName || '',
					views: item.watchUserCount || 0,
					cover: item.imgUrl || ''
				}));
				this.courses = reset ? mappedList : this.courses.concat(mappedList);
				this.courseHasMore = mappedList.length >= this.coursePageSize;
				if (this.courseHasMore) {
					this.coursePageNum += 1;
				}
			} catch (e) {
				if (requestId !== this.courseRequestId) return;
				if (reset) {
					this.courses = [];
				}
				this.courseHasMore = false;
			} finally {
				if (requestId !== this.courseRequestId) return;
				this.courseLoading = false;
				this.courseRefreshing = false;
				if (reset) this.courseSectionLoading = false;
			}
		},
		onScrollToLower() {
			if (this.courseLoading || !this.courseHasMore) return;
			this.getPublicCourseList(this.activeId);
		},
		// 获取胶囊按钮布局参数
		getMenuButtonInfo() {
			// 微信小程序API（Uniapp可直接用uni.getMenuButtonBoundingClientRect）
			const menuBtn = uni.getMenuButtonBoundingClientRect();
			if (menuBtn) {
				this.menuButtonInfo = {
					top: menuBtn.top - 3 + 'px', // 胶囊顶部距离
					height: menuBtn.height + 'px', // 胶囊高度
					centerY: (menuBtn.top + menuBtn.height / 2) + 'px', // 胶囊垂直居中Y坐标
					right: menuBtn.right + 'px' // 胶囊右侧距离
				};
			}
		},
		onSearch() {
			// 可跳转搜索页
			uni.navigateTo({ url: '/pages_index/courseSearch' })
		},
		onBannerClick() {
			//uni.navigateTo({ url: '/pages_index/course' })
		},
		onMoreVideos() {
			uni.navigateTo({ url: '/pages_index/video' })
		},
		onWatchLive(video) {
			if (video && video.courseId) {
				uni.navigateTo({ url: '/pages_index/courseDetail?courseId=' + video.courseId})
				return;
			}
		},
		onMoreCourses() {
			uni.navigateTo({ url: '/pages_index/course' })
		},
		onCourseClick(course) {
			if (course && course.courseId) {
				uni.navigateTo({ url: '/pages_index/courseDetail?courseId=' + course.courseId})
				return;
			}
			//uni.navigateTo({ url: '/pages_index/courseDetail'})
		},
	}
}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #F4F6F7;
}

/* 顶部搜索 */
.top-bar {
	display: flex;
	align-items: center;
	padding: 0 24rpx 30rpx;
	position: relative;
}
.search-row {
	width: 500rpx;
	display: flex;
	align-items: center;
	height: 76rpx;
	padding: 0 24rpx;
	background: rgba(255,255,255,0.5);
	border-radius: 38rpx;
	image{
		width: 44rpx;
		height: 44rpx;
	}
}

.search-placeholder {
	margin-left: 12rpx;
	font-size: 32rpx;
	color: rgba(0,0,0,0.25);
}
.top-actions {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}
.action-icon {
	font-size: 36rpx;
	color: #333;
	margin-right: 16rpx;
}
.action-icon.scan {
	font-size: 40rpx;
}

/* 品牌标题 */
.brand {
	padding: 0 68rpx 30rpx;
	//background: #fff;
	position: relative;
	image{
		width: 100%;
	}
}
.brand-title {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}
.brand-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* Banner */
.banner {
	position: relative;
	height: 210rpx;
	margin: 0 24rpx 40rpx;
	border-radius: 16rpx;
	overflow: hidden;
	//background: linear-gradient(135deg, #87CEEB 0%, #E0F4FF 100%);
	.inner {
		width: 100%;
		height: 210rpx;
		border-radius: 10rpx;
		overflow: hidden;
	
		.swiper,
		.swiper-item,
		.swiper-item image {
			width: 100%;
			height: 100%;
		}
	
	}
}
.banner-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.banner-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.15);
}
.banner-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
	margin-bottom: 8rpx;
}
.banner-desc {
	font-size: 24rpx;
	color: rgba(255,255,255,0.95);
}

/* 滚动内容区 */
.scroll-content {
	flex: 1;
	height: 0;
}
.section {
	padding: 0 24rpx 32rpx;
}
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28rpx;
}
.section-title {
	width: 226rpx;
	height: 36rpx;
}
.section-title-wrap {
	display: flex;
	align-items: center;
}
.play-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 10rpx;
}
.section-more {
	font-size: 26rpx;
	color: #999;
	image{
		width: 16rpx;
		height: 20rpx;
	}
}

/* 横向标签 */
.tag-scroll {
	white-space: nowrap;
	margin-bottom: 5rpx;
	height: 80rpx;
}
.tag-item {
	position: relative;
	display: inline-block;
	/* 底部预留空间，避免伪元素三角被 scroll-view / 父级 overflow 裁切 */
	padding: 6rpx 24rpx;
	margin-right: 24rpx;
	border-radius: 10rpx;
	background: rgba(255,255,255,0.5);
}
.tag-item text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
}
.tag-item.active {
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
}
.tag-item.active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -13rpx;
	z-index: 10;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 18rpx solid transparent;
	border-right: 18rpx solid transparent;
	border-top: 14rpx solid #FF233C;
}
.tag-item.active text {
	color: #fff;
}

/* 特色视频卡片 */
.feature-video-card {
	display: flex;
	//align-items: center;
	flex-direction: column;
	background: linear-gradient( 135deg, #5F111A 0%, #37050B 100%);
	border-radius: 30rpx;
	overflow: hidden;
	padding: 30rpx 20rpx;
}
.fv-thumb {
	position: relative;
	width: 360rpx;
	height: 240rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.fv-img {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
}
.live-tag {
	position: absolute;
	left:0;
	top: 20rpx;
	display: flex;
	align-items: center;
	width: 130rpx;
	height: 44rpx;
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 0rpx 8rpx 8rpx 0rpx;
}
.live-tag text {
	font-size: 28rpx;
	color: #fff;
	margin-left: 6rpx;
}
.live-dot {
	width: 12rpx;
	height: 12rpx;
	background: #fff;
	border-radius: 50%;
	animation: blink 1s infinite;
}
@keyframes blink {
	50% { opacity: 0.5; }
}
.fv-info {
	flex: 1;
	//padding: 20rpx 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
}
.fv-title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	text-align:center;
	font-style: normal;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.fv-desc {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 44rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 红色按钮 */
.btn-watch {
	width: 188rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: #FFFFFF;
	border-radius: 12rpx;
	margin-top: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #3F040B;
}
.btn-watch2 {
	width: 168rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
	border-radius: 32rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #FFFFFF;
}
.course-section{
	.nav-row {
		display: flex;
		align-items: center;
		padding-bottom:24rpx;
		// gap: 20rpx;
	}
	.nav-all {
		flex-shrink: 0;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 40rpx;
		color: rgba(0,0,0,0.85);
		line-height: 56rpx;
	}
	.nav-all.active {
		color: #FF233C;
		font-weight: 600;
	}
	.nav-scroll {
		flex: 1;
		white-space: nowrap; /* 必须加！横向滚动核心 */
	}
	.nav-inner {
		display: inline-flex;
		padding:0;
		gap: 20rpx;
	}
	.nav-item {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 10rpx 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0,0,0,0.85);
		line-height: 44rpx;
	}
	.nav-item.active {
		background: #FF233C;
		color: #fff;
		font-weight: 600;
	}
}
/* 课程列表 */
.course-list-wrap {
	position: relative;
}
.course-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	transition: opacity 0.2s ease;
}
.course-list.list-dimmed {
	opacity: 0.55;
}
.course-refresh-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.refresh-spinner {
	width: 48rpx;
	height: 48rpx;
	border: 4rpx solid #e8e8e8;
	border-top-color: #FF233C;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.course-loadmore {
	padding: 20rpx 0 4rpx;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}
.course-card {
	display: flex;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 20rpx;
}
.course-thumb {
	position: relative;
	width: 296rpx;
	height: 222rpx;
	border-radius: 20rpx;
	overflow: hidden;
	flex-shrink: 0;
}
.course-img {
	width: 100%;
	height: 100%;
	background: #BB6D6D;
}
.course-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 8rpx 12rpx;
	background: linear-gradient(transparent, rgba(0,0,0,0.6));
	font-size: 22rpx;
	color: #fff;
}
.course-info {
	flex: 1;
	padding-left: 24rpx;
	// padding: 20rpx 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}
.course-name {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.course-meta {
	display: flex;
	align-items: center;
	image{
		width: 30rpx;
		height: 30rpx;
	}
	
}
.meta-icon {
	font-size: 24rpx;
	margin-right: 6rpx;
	color: #999;
}
.meta-count {
	margin-left: 10rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #666666;
}

/* 底部占位（为全局 tabBar 留出空间） */
.bottom-placeholder {
	height: 120rpx;
}

/* 骨架屏通用 */
@mixin sk-shimmer {
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.sk-line {
	height: 28rpx;
	border-radius: 6rpx;
	@include sk-shimmer;
}
.sk-line-lg { width: 90%; }
.sk-line-md { width: 70%; margin-top: 16rpx; }
.sk-line-sm { width: 40%; }

@keyframes skeleton-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

/* 视频区骨架 */
.video-skeleton {
	.sk-tag-row {
		white-space: nowrap;
		margin-bottom: 5rpx;
		height: 80rpx;
		overflow: hidden;
	}
	.sk-tag {
		display: inline-block;
		width: 120rpx;
		height: 56rpx;
		margin-right: 24rpx;
		border-radius: 10rpx;
		@include sk-shimmer;
	}
	.sk-video-card {
		background: linear-gradient(135deg, #5F111A 0%, #37050B 100%);
		border-radius: 30rpx;
		padding: 30rpx 20rpx;
	}
	.sk-fv-body {
		display: flex;
		align-items: flex-start;
	}
	.sk-fv-thumb {
		width: 360rpx;
		height: 240rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		@include sk-shimmer;
	}
	.sk-fv-info {
		flex: 1;
		min-width: 0;
		padding-top: 8rpx;
	}
	.sk-btn {
		width: 188rpx;
		height: 64rpx;
		margin-top: 28rpx;
		border-radius: 12rpx;
		@include sk-shimmer;
	}
}

/* 课程区骨架 */
.course-skeleton {
	.sk-course-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}
	.sk-course-card {
		display: flex;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.sk-course-thumb {
		width: 296rpx;
		height: 222rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
		@include sk-shimmer;
	}
	.sk-course-info {
		flex: 1;
		padding-left: 24rpx;
		min-width: 0;
	}
	.sk-course-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.sk-btn-round {
		width: 168rpx;
		height: 64rpx;
		border-radius: 32rpx;
		@include sk-shimmer;
	}
}

</style>
