<template>
	<zzx-navbar :scrollable="true" :back="true" title="赛事详情"></zzx-navbar>
	<view class="detail-header">
		<view class="header-bg">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" interval="3000">
				<swiper-item class="swiper-item" v-for="item in 3">
					<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?rs=1&pid=ImgDetMain"
						mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="back-icon" :style="{paddingTop:(statusBarHeight+10)+'px'}" @click="RouterUtils.back()">
			<zzx-icon name="back"></zzx-icon>
		</view>
	</view>
	<view class="swipertips-box" :style="{height:(statusBarHeight+130)+'px'}">
		<view class="d-header-user">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="5000" :vertical="true"
				:circular="true" :disable-touch="true">
				<swiper-item v-for="(item,index) in groupedMessages" :key="index">
					<view class="">
						<view class="item-info" v-for="(msg, msgIndex) in item" :key="msgIndex">
							<image src="/src/static/hot-icon2.png" mode=""></image>
							<view class="d-swiper-tips">
								{{msg}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="content">
		<view class="d-timedown-card">
			<view class="d-title">距离报名结束</view>
			<view class="timedown">
				<view class="time">{{days}}</view>
				<view class="unit">天</view>
				<view class="time">{{hours}}</view>
				<view class="unit">:</view>
				<view class="time">{{minutes}}</view>
				<view class="unit">:</view>
				<view class="time">{{seconds}}</view>
			</view>
			<view class="timedown-tips">
				<view class="tips-icon">!</view>
				<view class="tips-text">报名成功后，不支持退款。</view>
			</view>
		</view>
		<view class="d-events-card">
			<view class="e-title">
				<view class="name">张三</view>
				<view class="belong">
					主办单位：观山湖城运
				</view>
			</view>
			<view class="d-cell">
				<view class="cell-title">首届RC遥控模型赛车大赛</view>
				<view class="cell-time">
					<zzx-icon name="e-icon1" size="16"></zzx-icon>
					<view style="margin-bottom:10rpx;">比赛时间：2025.05.05</view>
				</view>
				<view class="cell-item">
					<view class="text-item">
						<zzx-icon name="e-icon2" size="16"></zzx-icon>
						<view class="">遥控模型赛车1个项目</view>
					</view>
					<zzx-icon name="ashRight" size="14"></zzx-icon>
				</view>
				<view class="cell-item">
					<view class="text-item">
						<zzx-icon name="e-icon3" size="16"></zzx-icon>
						<view class="">活动玩法</view>
					</view>
					<zzx-icon name="ashRight" size="14"></zzx-icon>
				</view>
				<view class="cell-item-num">
					<view class="item-text">
						<zzx-icon name="e-icon4" size="16"></zzx-icon>
						<view class="">已报名人数：3423</view>
					</view>
					<view class="cell-num-header">
						<view class="img" v-for="item in 3">
							<image src="/src/static/hot-icon2.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="d-addressinfo">
				<view class="address">
					<zzx-icon name="location" size="16"></zzx-icon>
					<view class="text">比赛地点：八匹马全龄运动空间球场</view>
				</view>
				<view class="info">
					<view class="nav">
						<zzx-icon name="navigation"></zzx-icon>
						<view class="">3.3km</view>
					</view>
					<view class="phone">
						<zzx-icon name="phone"></zzx-icon>
						<view class="">电话</view>
					</view>
				</view>
			</view>
		</view>
		<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="d-eventsplan-card" id="detail">
			<view class="splan-title">总共3个安排</view>
			<view class="events-list">
				<view class="list-item" v-for="item in 4">
					<view class="time"><text>05.06 17：00</text></view>
					<view class="text">赛前准备预热</view>
				</view>
			</view>
		</view>
		<view class="d-explain" id="notice">
			<view class="explain-title">图文说明</view>
			<view class="d-explain-card">
				图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明
				图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明
				图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明
				图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明图文说明
			</view>
		</view>
	</view>
	<view style="height: 170rpx;"></view>
	<view class="d-footer">
		<button hover-class="hover-style" @click="toRegidterPage">马上报名</button>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed, onUnmounted, getCurrentInstance, nextTick } from 'vue';
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	import { RouterUtils } from '@/utils/util';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	const statusBarHeight = ref(0);
	const messages = ref([
		'张**报名了',
		'李**报名了',
		'王**报名了'
	]);
	const sectionTops = ref<number[]>([]);
	const isScrollingByTab = ref(false);
	const scrollTimer = ref<any>(null);
	const sel_index = ref(0);
	const selectList = ref(['赛程安排', '图文说明']);
	const instance = getCurrentInstance();
	// 设置报名结束时间 (格式：YYYY-MM-DD HH:mm:ss)
	const endTime = ref<string>('2025-06-15 23:59:59');

	const days = ref<string>('00');
	const hours = ref<string>('00');
	const minutes = ref<string>('00');
	const seconds = ref<string>('00');
	onMounted(() => {
		updateCountdown();
		timer = setInterval(updateCountdown, 1000) as unknown as number;// 设置每秒更新
		get_navheight();
		nextTick(() => {
			setTimeout(() => getSectionsTop(), 300);
		});
	});

	onUnmounted(() => {  	// 组件卸载时的生命周期
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	});
	const groupedMessages = computed(() => {   	// 将消息分成4组，每组2条
		const groups = [];
		for (let i = 0; i < messages.value.length; i += 2) {
			groups.push(messages.value.slice(i, i + 2));
		}
		return groups;
	});
	const toRegidterPage = () => {
		uni.navigateTo({
			url: '/pages/index/eventsRegister/index'
		})
	}
	const get_navheight = () => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
	}

	// 获取所有模块的位置信息
	const getSectionsTop = () => {
		const ids = ['detail', 'notice'];
		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 = ['detail', 'notice'];
		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
			});
		});
	}

	// 倒计时
	let timer : number | null = null;
	const updateCountdown = () => {
		const now = new Date().getTime();
		const endDate = new Date(endTime.value).getTime();
		const timeLeft = endDate - now;
		if (timeLeft <= 0) {
			days.value = '00';
			hours.value = '00';
			minutes.value = '00';
			seconds.value = '00';
			if (timer) {
				clearInterval(timer);
				timer = null;
			}
			return;
		}
		// 计算剩余时间
		const d = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
		const h = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		const m = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
		const s = Math.floor((timeLeft % (1000 * 60)) / 1000);
		// 格式化为两位数
		days.value = d.toString().padStart(2, '0');
		hours.value = h.toString().padStart(2, '0');
		minutes.value = m.toString().padStart(2, '0');
		seconds.value = s.toString().padStart(2, '0');
	};
</script>

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

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

			.swiper {
				width: 100%;
				height: 432rpx;

				.swiper-item {
					width: 100%;
					height: 432rpx;

					&>image {
						width: 100%;
						height: 432rpx;
					}
				}
			}
		}

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

	.swipertips-box {
		position: relative;

		.d-header-user {
			width: 300rpx;
			height: 146rpx;
			position: absolute;
			bottom: 0rpx;
			left: 20rpx;
			overflow: hidden;

			&>swiper {
				height: 100%;
			}

			.item-info {
				width: 190rpx;
				height: 54rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10rpx;
				margin-bottom: 20rpx;

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

				.d-swiper-tips {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.content {
		.d-timedown-card {
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			text-align: center;

			.d-title {
				margin: auto;
				width: 216rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #C8FF0C 0%, #F2FFC7 79%, rgba(255, 255, 255, 0) 100%);
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 54rpx;
			}

			.timedown {
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;

				.time {
					width: 80rpx;
					height: 80rpx;
					background: rgba(200, 255, 12, 0.5);
					border-radius: 16rpx;
					font-weight: 800;
					font-size: 44rpx;
					color: #222222;
					text-align: center;
					line-height: 80rpx;
				}

				.unit {
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
				}
			}

			.timedown-tips {
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10rpx;

				.tips-icon {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background: #FFA347;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					line-height: 30rpx;
				}

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

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

			.e-title {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 88rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.name {
					width: 140rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #FDD143;
					border-radius: 8rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

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

			.d-cell {
				margin-top: 20rpx;

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

				.cell-time {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 24rpx;
					color: #222222;
				}

				.cell-item {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.text-item {
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-size: 24rpx;
						color: #222222;

						&>view {
							margin-bottom: 10rpx;
						}
					}
				}

				.cell-item-num {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-text {
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-size: 24rpx;
						color: #222222;

						&>view {
							margin-bottom: 10rpx;
						}
					}

					.cell-num-header {
						display: flex;
						align-items: center;

						.img {
							&>image {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
							}
						}
					}
				}
			}

			.d-addressinfo {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-top: 1rpx solid #F0F0F0;

				.address {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
				}

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

					.nav {
						text-align: center;
						font-size: 22rpx;
						color: #222222;
					}

					.phone {
						text-align: center;
						font-size: 22rpx;
						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:98rpx;
				height: 20rpx;
				background-color: #C8FF0C;
				border-radius: 4rpx;
				left: 50%;
				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;
			}
		}

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

			.events-list {
				.list-item {
					margin-top: 20rpx;

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

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

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

		.d-explain {
			margin-top: 20rpx;

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

			.d-explain-card {
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				margin-top: 20rpx;
			}
		}
	}
	.d-footer{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		&>button{
			margin-top: 20rpx;
			width: 686rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			line-height: 100rpx;
		}
		&>button::after{
			border: none;
		}
		.hover-style{
			color: #7a7a7a;
		}
	}
</style>