<template>
	<view class="content">
		<view class="v-header-card">
			<text>0017 1712 5994 杨锦新</text>
			<view class="header-icon-box">
				<zzx-icon name="up" size="12"></zzx-icon>
			</view>
		</view>
		<uv-sticky offset-top="-14">
			<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="normal-course-list">
			<view class="list-header">
				<view class="total">总共<text style="color: #222;">6</text>节</view>
				<view class="total">已核销<text style="color: #222;">6</text>节</view>
				<view class="total">未核销<text style="color: #222;">6</text>节</view>
			</view>
			<view id="normalCourse">
				<view class="v-list-card" v-for="item in 4">
					<view class="list-ard">
						<view class="card-info">
							<view class="time">
								<text>05.06 17：00-19：00</text>
							</view>
							<view class="name">
								第一节：篮球热身运动
							</view>
						</view>
						<view class="card-status">
							<view class="status-btn">已核销</view>
							<!-- <view class="status-btn-not">未核销</view>  -->
							<view :class="[rotate?'icon-tans':'status-icon']" @click="rotate=!rotate">
								<zzx-icon name="up" size="12"></zzx-icon>
							</view>
						</view>
					</view>

					<view class="v-list-fold" :style="{ height:rotate ? `${(4 * 84) - 20 }rpx` : '0',borderTop:rotate?'1rpx solid #F0F0F0':'none' }">
						<view class="item-fold">
							<view class="text">核验人</view>
							<view class="name">杨锦新</view>
						</view>
						<view class="item-fold">
							<view class="text">核验照片</view>
							<image src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode=""></image>
						</view>
						<view class="item-fold">
							<view class="text">核验时间</view>
							<view class="name">2025-05-02 16：14：56</view>
						</view>
					</view>
				</view>
			</view>
			<view id="lessons">
				<view class="v-lessons-list">
					<view class="title">补课</view>
					<view class="list-header">
						<view class="total">总共<text style="color: #222;">6</text>节</view>
						<view class="total">已核销<text style="color: #222;">6</text>节</view>
						<view class="total">未核销<text style="color: #222;">6</text>节</view>
					</view>
					<view class="v-lessons-card">
						<view class="v-list-card" v-for="item in 4">
							<view class="list-ard">
								<view class="card-info">
									<view class="time">
										<text>05.06 17：00-19：00</text>
									</view>
									<view class="name">
										第一节：篮球热身运动
									</view>
								</view>
								<view class="card-status">
									<view class="status-btn">已核销</view>
									<!-- <view class="status-btn-not">未核销</view>  -->
									<view :class="[rotate?'icon-tans':'status-icon']" @click="rotate=!rotate">
										<zzx-icon name="up" size="12"></zzx-icon>
									</view>
								</view>
							</view>
						
							<view class="v-list-fold" :style="{ height:rotate ? `${(4 * 84) - 20 }rpx` : '0',borderTop:rotate?'1rpx solid #F0F0F0':'none' }">
								<view class="item-fold">
									<view class="text">核验人</view>
									<view class="name">杨锦新</view>
								</view>
								<view class="item-fold">
									<view class="text">核验照片</view>
									<image src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode=""></image>
								</view>
								<view class="item-fold">
									<view class="text">核验时间</view>
									<view class="name">2025-05-02 16：14：56</view>
								</view>
							</view>
						</view>
						<view class="item-tips-text">补课表暂未排出</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	const rotate = ref(false);  //核销折叠控制
	const sectionTops = ref<number[]>([]);
	const isScrollingByTab = ref(false);
	const scrollTimer = ref<any>(null);
	const selectList = ref(['正常课', '补课']);
	const sel_index = ref(0);
	const instance = getCurrentInstance();
	// 获取所有模块的位置信息
	const getSectionsTop = () => {
		const ids = ['normalCourse', 'lessons'];
		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 sel_tab = async (i : number) => {
		isScrollingByTab.value = true; // 标记为Tab点击触发的滚动
		sel_index.value = i;
		const ids = ['normalCourse', 'lessons'];
		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
			});
		});
	}
</script>

<style lang="less" scoped>
	.v-header-card {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		font-size: 28rpx;
		color: #222222;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx;

		.header-icon-box {
			transform: rotate(180deg)
		}
	}

	.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;
		}
	}

	.normal-course-list {
		margin-top: 20rpx;

		.list-header {
			display: flex;
			align-items: center;
			gap: 40rpx;
			font-size: 24rpx;
			color: #AAAAAA;
		}

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

			.list-ard {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card-info {
					font-size: 28rpx;
					color: #222222;

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

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

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

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

					.status-btn {
						width: 152rpx;
						height: 48rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 28rpx;
						color: #AAAAAA;
					}

					.status-btn-not {
						width: 152rpx;
						height: 48rpx;
						background: #C8FF0C;
						border-radius: 8rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 28rpx;
						color: #222222;
					}

					.icon-tans {
						transition: all 0.3s;
					}

					.status-icon {
						transition: all 0.4s;
						transform: rotate(180deg);
					}
				}
			}

			.v-list-fold {
				margin-top: 20rpx;
				height: 0rpx;
				overflow: hidden;
				transition: all .4s;
				.item-fold{
					display: flex;
					gap: 20rpx;
					margin-top: 20rpx;
					.text{
						font-size: 28rpx;
						color: #AAAAAA;
					}
					&>image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}
					.name{
						font-size: 28rpx;
						color: #222222;
					}
					
				}
			}
		}

		.v-lessons-list {
			margin-top: 20rpx;

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

			.v-lessons-card {
				margin-top: 20rpx;
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				.list-header {
					display: flex;
					align-items: center;
					gap: 40rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}
				
				.v-list-card {
					margin-top: 20rpx;
					padding: 20rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
				
					.list-ard {
						display: flex;
						align-items: center;
						justify-content: space-between;
				
						.card-info {
							font-size: 28rpx;
							color: #222222;
				
							.time {
								border-left: 8rpx solid #C8FF0C;
				
								&>text {
									margin-left: 20rpx;
								}
							}
				
							.name {
								margin-left: 28rpx;
								margin-top: 20rpx;
							}
						}
				
						.card-status {
							display: flex;
							align-items: center;
							gap: 20rpx;
				
							.status-btn {
								width: 152rpx;
								height: 48rpx;
								background: #F5F5F5;
								border-radius: 8rpx;
								text-align: center;
								line-height: 48rpx;
								font-size: 28rpx;
								color: #AAAAAA;
							}
				
							.status-btn-not {
								width: 152rpx;
								height: 48rpx;
								background: #C8FF0C;
								border-radius: 8rpx;
								text-align: center;
								line-height: 48rpx;
								font-size: 28rpx;
								color: #222222;
							}
				
							.icon-tans {
								transition: all 0.3s;
							}
				
							.status-icon {
								transition: all 0.4s;
								transform: rotate(180deg);
							}
						}
					}
				
					.v-list-fold {
						margin-top: 20rpx;
						height: 0rpx;
						overflow: hidden;
						transition: all .4s;
						// border-top: 1rpx solid #F0F0F0;
						.item-fold{
							display: flex;
							gap: 20rpx;
							margin-top: 20rpx;
							.text{
								font-size: 28rpx;
								color: #AAAAAA;
							}
							&>image{
								width: 160rpx;
								height: 160rpx;
								border-radius: 8rpx;
							}
							.name{
								font-size: 28rpx;
								color: #222222;
							}
							
						}
					}
				}
				.item-tips-text{
					font-size: 24rpx;
					color: #AAAAAA;
					text-align: center;
				}
			}
		}
	}
</style>