<template>
	<zzx-navbar :scrollable="true" :back="true" title="详情"></zzx-navbar>
	<view class="detail-header">
		<image class="header-bg"
			src="https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0"
			mode="widthFix"></image>
		<view class="back-icon" :style="{paddingTop:(statusBarHeight+10)+'px'}" @click="RouterUtils.back()">
			<zzx-icon name="back"></zzx-icon>
		</view>
		<view :style="{height:(statusBarHeight+70)+'px'}"></view>
		<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
			<view class="swiper-inner">
				<video src="https://vod.v.jstv.com/2025/05/09/JSTV_JSGGNEW_1746791056693_2lBi96K_114.mp4"></video>
				<image v-for="item in 4"
					src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"
					mode=""></image>
			</view>
		</scroll-view>
	</view>
	<view :style="{height:(statusBarHeight+34)+'px'}"></view>
	<view class="header-info">
		<view class="c-price-info">
			<view class="price-info">
				<view class="new-price">￥25.9</view>
				<view class="old-price">￥80.9</view>
			</view>
			<view class="sales">年售150</view>
		</view>
		<view class="c-name">
			一对一篮球30分钟室内精品课程，一对一篮球
			30分钟室内精品课程
		</view>
		<view class="c-detail-info">
			<view class="c-time">课时：05.06-05.31</view>
			<view class="c-address">
				<view class="">上课地点：观山湖区第十二小学</view>
				<zzx-icon name="ashRight" size="10"></zzx-icon>
			</view>
			<view class="c-instructor">授课教练：杨锦新</view>
		</view>
		<view class="c-line"></view>
		<view class="c-rules">限制：每人限购一张</view>
	</view>
	<view class="content">
		<uv-sticky offset-top="70">
			<view class="detail-select">
				<view :class="sel_index===index?'select-text':'notsel-text'" v-for="(item,index) in selectList"
					:key="index" @click="sel_tab(index)">
					<text>{{item}}</text>
				</view>
			</view>
		</uv-sticky>
		<view class="c-tabbar">
			<view class="c-tabbar-detail" id="detail">
				详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容
				详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容详情富文本内容
				详情富文本内容详情富文本内容详情富文本内容详情富文本内容
			</view>
			<view class="c-notice" id="notice">
				<view class="title">购买须知</view>
				<view class="tips-text">
					<view class="text">
						<view class="">1.购买后，需按照课表按时上课；</view>
						<view class="">2.如有特殊情况，需上传相关证明；</view>
						<view class="">3.由于特殊情况耽误了课程，后续会发布补课表，集中补课</view>
					</view>
					<view class="more">
						<text>查看更多</text>
						<zzx-icon name="more" size="10"></zzx-icon>
					</view>
				</view>
			</view>
			<view class="c-schedule" id="schedule">
				<view class="title">课程表</view>
				<view class="list-card">
					<view class="card-title">总共6节</view>
					<view class="schedule-list" v-for="item in 5">
						<view class="time">
							<text>05.06 17：00-19：00</text>
						</view>
						<view class="name">第一节：篮球热身运动</view>
					</view>
					<view class="more">
						<text>查看更多</text>
						<zzx-icon name="more" size="10"></zzx-icon>
					</view>
				</view>
			</view>
			<view class="appraise-card" id="appraise">
				<view class="appraise-title">
					<view class="title">评价</view>
					<view class="comments">
						<view class="a-star">
							<zzx-icon name="star" size="10"></zzx-icon>
							<text>4.8</text>
						</view>
						<view class="a-text">| 37人评论</view>
					</view>
				</view>
				<view class="appraise-info" v-for="item in 5">
					<view class="a-user-info">
						<view class="info">
							<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
							<view class="name">詹姆斯</view>
						</view>
						<view class="time">03-20</view>
					</view>
					<view class="a-score">
						<text>4.0</text>
						<uni-rate :readonly="true" size="16" :value="2" />
					</view>
					<view class="a-content">
						詹姆四对孩子很有耐心，也非常照顾小朋友的情绪，
						值得推荐！
					</view>
					<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
						<view class="scroll-view-item_H uni-bg-red" v-for="item in 5">
							<image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
	<view style="height: 100rpx;"></view>
	<view class="c-bottom">
		<view class="c-share">
			<zzx-icon name="share"></zzx-icon>
			<view class="">分享</view>
		</view>
		<view class="c-buy-btn">
			<view class="buy">
				<view class="buy-text">直接购买</view>
				<view class="buy-price">
					<text>￥25.9</text>
					<text>省10</text>
				</view>
			</view>
			<view class="gratis" @click="toOrderPage">
				免费试听
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
	import { RouterUtils } from '@/utils/util';
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	const statusBarHeight = ref(0);
	const sectionTops = ref<number[]>([]);
	const isScrollingByTab = ref(false);
	const scrollTimer = ref<any>(null);
	const sel_index = ref(0);
	const selectList = ref(['详情', '须知', '课表', '评价']);
	const instance = getCurrentInstance();
	onMounted(() => {
		get_navheight()
		nextTick(() => {
			setTimeout(() => getSectionsTop(), 300);
		});
	})

	// 获取所有模块的位置信息
	const getSectionsTop = () => {
		const ids = ['detail', 'notice', 'schedule', 'appraise'];
		const query = uni.createSelectorQuery().in(instance.proxy);
		ids.forEach(id => {
			query.select(`#${id}`).boundingClientRect();
		});
		query.exec((rects) => {
			// 计算各模块相对于页面顶部的距离
			sectionTops.value = rects.map((rect:any) => rect.top -130);
		})
	};

	//滚动事件
	onPageScroll((e) => {
		if (isScrollingByTab.value) return;
		if (scrollTimer.value) return;
		scrollTimer.value = setTimeout(() => {
			updateActiveTab(e.scrollTop);
			scrollTimer.value = null;
		}, 100);
	});
	// 根据滚动位置更新激活的Tab
	const updateActiveTab = (scrollTop : number) => {
		const offset = 130;
		const scrollPosition = scrollTop + offset;
		let activeIndex = 0;
		for (let i = 0; i < sectionTops.value.length; i++) {
			if (scrollPosition >= sectionTops.value[i]) {
				activeIndex = i;
			} else {
				break; // 模块位置已排序，可提前结束
			}
		}
		if (sel_index.value !== activeIndex) {
			sel_index.value = activeIndex;
		}
	};
	const get_navheight = () => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
	}
	const sel_tab = async (i : number) => {
		isScrollingByTab.value = true; // 标记为Tab点击触发的滚动
		sel_index.value = i;
		const ids = ['detail', 'notice', 'schedule', 'appraise'];
		const id = ids[i];
		await scrollToTop();
		await nextTick();
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select(`#${id}`).boundingClientRect(data => {
			if (!data) return;
			uni.pageScrollTo({
				scrollTop: data.top - 130,
				duration: 500,
				complete: () => {
					setTimeout(() => {
						isScrollingByTab.value = false;
					}, 300);
				}
			});
		}).exec();
	}

	const scrollToTop = () => {
		return new Promise(resolve => {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0,
				success: resolve
			});
		});
	}
	
	const toOrderPage=()=>{
		RouterUtils.to_page('/pages/index/submitOrder/index')
	}
</script>

<style lang="less" scoped>
	.detail-header {
		position: relative;

		.header-bg {
			position: absolute;
			width: 100%;
			z-index: -100;
		}

		.back-icon {
			position: absolute;
			left: 20rpx;
			z-index: 9999;
		}

		.header-swiper {
			position: absolute;
			width: 740rpx;
			white-space: nowrap;
			overflow: hidden;

			/* 隐藏滚动条 */
			/deep/ ::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				background: transparent;
			}

			.swiper-inner {
				display: inline-flex;
				align-items: center;
				gap: 14rpx;
				height: 100%;

				&>video,
				&>image {
					width: 220rpx;
					height: 126rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
			}
		}
	}

	.header-info {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		.c-price-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-info {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.new-price {
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}

				.old-price {
					font-size: 24rpx;
					color: #AAAAAA;
					text-decoration: line-through;
				}
			}

			.sales {
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.c-name {
			margin-top: 44rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
		}

		.c-detail-info {
			font-size: 24rpx;
			color: #AAAAAA;

			.c-time {
				margin-top: 20rpx;
			}

			.c-address {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.c-instructor {
				margin-top: 20rpx;
			}
		}

		.c-line {
			border: 1rpx solid #F0F0F0;
			margin-top: 20rpx;
		}

		.c-rules {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #222222;
		}
	}

	.detail-select {
		display: flex;
		align-items: center;
		gap: 60rpx;
		margin-top: 20rpx;
		height: 80rpx;
		background-color: #F6F6F6;

		.select-text,
		.notsel-text {
			position: relative;
			transition: all 0.3s ease;
		}

		.select-text {
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
			position: relative;
		}

		.notsel-text {
			font-size: 32rpx;
			color: #AAAAAA;
		}

		.select-text::after {
			position: absolute;
			content: '';
			width: 40rpx;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			left: 050%;
			transform: translateX(-50%);
			bottom: -16rpx;
			transition: all 0.3s ease;
			opacity: 1;
		}

		.notsel-text::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			width: 0;
			height: 20rpx;
			background-color: #C8FF0C;
			border-radius: 4rpx;
			transform: translateX(-50%);
			opacity: 0;
			transition: all 0.3s ease;
		}
	}

	.c-tabbar {
		margin-top: 10rpx;

		.c-tabbar-detail {
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 20rpx;
		}

		.c-notice {
			margin-top: 20rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.tips-text {
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 20rpx;

				.text {
					font-size: 24rpx;
					color: #222222;

					&>view {
						margin-top: 20rpx;
					}
				}

				.more {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 20rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}

		.c-schedule {
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.list-card {
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 20rpx;
				font-size: 24rpx;
				color: #222222;

				.card-title {}

				.schedule-list {
					margin-top: 20rpx;

					.time {
						border-left: 8rpx solid #D3FD76;

						&>text {
							margin-left: 20rpx;
						}
					}

					.name {
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}

				.more {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 20rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}

		.appraise-card {
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			margin-top: 20rpx;

			.appraise-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-weight: 800;
					font-size: 32rpx;
					color: #222222;
				}

				.comments {
					display: flex;
					align-items: center;
					gap: 16rpx;

					.a-star {
						font-size: 24rpx;
						color: #FDD143;
					}

					.a-text {
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}

			.appraise-info {
				margin-top: 20rpx;

				.a-user-info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info {
						display: flex;
						align-items: center;
						gap: 20rpx;

						&>image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.name {
							font-weight: bold;
							font-size: 24rpx;
							color: #222222;
						}
					}

					.time {
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}

				.a-score {
					font-size: 24rpx;
					color: #AAAAAA;
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin-top: 20rpx;
				}

				.a-content {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #222222;
				}

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					height: 220rpx;
					margin-top: 20rpx;
					border-bottom: 1rpx solid #F0F0F0;

					.scroll-view-item_H {
						display: inline-block;
						text-align: center;
						margin-right: 14rpx;

						&>image {
							width: 202rpx;
							height: 200rpx;
							background: #D8D8D8;
							border-radius: 32rpx;
						}
					}
				}
			}
		}
	}
	.c-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width:95%;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		.c-share{
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			text-align: center;
		}
		.c-buy-btn{
			display: flex;
			align-items: center;
			gap: 16rpx;
			.buy{
				width: 226rpx;
				height: 100rpx;
				background: #222222;
				border-radius: 60rpx;
				text-align: center;
				.buy-text{
					margin-top: 8rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #D3FD76;
				}
				.buy-price{
					color: #D3FD76;
					&>text:first-child{
						font-weight: bold;
						font-size: 28rpx;
					}
					&>text:last-child{
						margin-left: 6rpx;
						font-size: 22rpx;
					}
				}
			}
			.gratis{
				width: 226rpx;
				height: 100rpx;
				background: #D3FD76;
				border-radius: 60rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
				line-height: 100rpx ;
			}
		}
	}
</style>