<template>
	<view class="swim-timer-container">
		<!-- 固定在顶部的计时栏 -->
		<view class="total-time-section">
			<view class="" style="position: relative;">
				<view class="total-time">{{ formatTime(currentTime) }}</view>
				<view class="" @click="Service.GoPage('/pages/userFunc/setCourse?type=1'+'&id='+planId)"
					style="position: absolute; top: 0; right: 20rpx; ">
					<up-icon name="setting" size="22"></up-icon>
				</view>
			</view>
			<!-- 计划信息 -->
			<view class="plan-info" v-if="planId">
				<text class="plan-title">项目名称: {{ planName }}</text>
			</view>
		</view>

		<!-- 选手列表 -->
		<view class="athletes-section">
			<view class="section-header">
				<text class="section-title">{{ stopwatchMode=='interval'?'间隔触发':'一起出发' }}·共{{ groupedAthletes.length }}组</text>
				<text class="athlete-count">{{ athletes.length }}位选手</text>
			</view>

			<view class="athletes-list">
				<view v-for="group in groupedAthletes" :key="group.groupNumber" class="group-wrapper">
					<view class="group-header">
						<view class="group-title">
							<u-icon name="grid" size="18" color="#1890ff"></u-icon>
							<text class="group-label">第{{ group.groupNumber }}组</text>
						</view>
						<text class="group-count">{{ group.athletes.length }}人</text>
					</view>

					<view class="group-athletes">
						<view v-for="(athlete, indexInGroup) in group.athletes" :key="athlete.id"
							@click="handleAthleteFirstButton(athlete, athletes.indexOf(athlete))" class="athlete-item"
							:class="{ finished: athlete.finished }">
							<view class="athlete-number">{{ athletes.indexOf(athlete) + 1 }}</view>
							<view class="athlete-info">
								<text class="athlete-name">{{ athlete.name }}</text>
							</view>
							<view class="time-wrapper">
								<text
									class="athlete-time">{{ !athlete.time? ' 00:00:00 ':formatTime(athlete.time) }}</text>
								<text class="best-time">最快:
									{{ athlete.bestTime !== null ? athlete.quicklyTime: '无' }}</text>
							</view>
							<view class="" style="display: flex;align-items: center; gap: 10rpx;">

								<view @click.stop="resetAthleteTime(athlete)">
									<u-icon name="reload" :bold="true" size="24" color="#1890ff"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%; height: 100rpx;"></view>

		<!-- 右下角悬浮提交按钮 -->
		<view class="fab-submit" @click="submitData">
			<text class="fab-text">提交</text>
		</view>

		<!-- 记录提示弹窗 -->
		<u-popup :show="showRecord" mode="center" :round="20" :closeable="true"  :safeAreaInsetBottom='false' @close="showRecord=false" closeOnClickOverlay>
			<view class="record-notice-modal">
				<view class="notice-header">
					<text class="notice-title">恭喜以下学生打破记录</text>
				</view>
				<view class="notice-table">
					<view class="table-header">
						<text class="header-cell index-cell">序号</text>
						<text class="header-cell name-cell">学生姓名</text>
						<text class="header-cell time-cell">记录时间</text>
					</view>
					<scroll-view scroll-y class="table-body">
						<view v-for="(item,index) in record" class="table-row">
							<text class="row-cell index-cell">{{ index+1 }}</text>
							<text class="row-cell name-cell">{{ item.name }}</text>
							<text class="row-cell time-cell">{{  item.quicklyTime }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<!-- 底部控制按钮 -->
		<view class="control-buttons">
			<view class="button-group" :class="{ 'record-group': isRunning }">
				<button v-if="!isRunning" class="start-btn" @click="startTimer">
					<u-icon name="play-right" size="24" color="#fff"></u-icon>
					<text class="btn-text">开始</text>
				</button>

				<button v-if="isRunning" class="record-btn" @click="recordNextAthlete">
					<u-icon name="checkmark-circle" size="24" color="#fff"></u-icon>
					<text class="btn-text">记录</text>
				</button>
			</view>
			<view class="button-group" :class="{ 'pause-group': isRunning }">
				<button v-if="!isRunning" class="reset-all-btn" @click="resetAll">
					<u-icon name="reload" size="24" color="#fff"></u-icon>
					<text class="btn-text">重置</text>
				</button>
				<button v-if="isRunning" class="reset-all-btn" @click="stopTimer">
					<text class="btn-text"  style="font-size: 28rpx;">暂停</text>
				</button>
			</view>

		</view>

		
	</view>
</template>

<script setup lang="ts">
	import { ref, onUnmounted, computed, onMounted } from 'vue'
	import { Service } from '@/Service/Service'
	import { PlanService } from '@/Service/swimming/PlanService'
	import { onLoad, onShow } from '@dcloudio/uni-app'

	// 定义选手类型
	interface Athlete {
		id : string
		number : string
		name : string
		gender : string
		age : string
		birthday : string
		time : number
		bestTime : number | null
		finished : boolean
		startOffset ?: number
	}

	// 定义分组类型
	interface Group {
		groupNumber : number
		athletes : Athlete[]
	}

	// 计划ID
	const planId = ref('')
	// 项目名称
	let planName = ref('')

	// 选手列表
	const athletes = ref<Array<any>>([])

	// 分组设置
	const groupSize = ref('0')
	
	
	

	// 计时器状态
	const isRunning = ref(false)
	const currentTime = ref(0)
	let timerInterval : number | null = null
	let startTime : number = 0

	// 当前要记录的选手索引
	const currentAthleteIndex = ref(0)

	// 秒表模式
	const stopwatchMode = ref<'interval' | 'together'>('interval')
	// 间隔时间（秒）
	const intervalTime = ref('0')
	let record=ref<Array<any>>([])
	let showRecord=ref(false)
	onLoad((data : any) => {
		planId.value = data.id

	})

	onShow(() => {
		getPlanInfo()
	})

	// 获取计划详情
	const getPlanInfo = () => {
		PlanService.GetPlanInfo(planId.value).then(res => {
			if (res.code == 0) {
				planName.value = res.data.plan.name
				// 将计划数据转换为选手数据
				athletes.value = res.data.plan.users
				groupSize.value = res.data.plan.groupInt
				stopwatchMode.value = res.data.plan.departType == '间隔出发' ? 'interval' : 'together'
				intervalTime.value = res.data.plan.interval
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	// 计算分组
	const groupedAthletes = computed<Group[]>(() => {
		const size = parseInt(groupSize.value) || 2
		const groups : Group[] = []
		let currentGroup : Group | null = null

		athletes.value.forEach((athlete, index) => {
			if (index % size === 0) {
				currentGroup = {
					groupNumber: groups.length + 1,
					athletes: []
				}
				groups.push(currentGroup)
			}
			if (currentGroup) {
				currentGroup.athletes.push(athlete)
			}
		})

		return groups
	})

	// 计算选手的时间偏移量
	const getAthleteOffset = (athlete : any) : number => {
		if (stopwatchMode.value !== 'interval') {
			return 0
		}

		const index = athletes.value.findIndex(a => a.studentId === athlete.studentId)
		const interval = parseFloat(intervalTime.value) || 10
		const size = parseInt(groupSize.value) || 2

		// 根据分组计算偏移：第n组偏移 (n-1) * interval
		const groupNumber = Math.floor(index / size)
		return groupNumber * interval
	}

	// 计算已完成的选手
	const finishedAthletes = computed(() => {
		return athletes.value.filter(a => a.finished)
	})

	// 格式化时间显示
	const formatTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		const ms = Math.floor((seconds % 1) * 100)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`
	}

	// 开始计时
	const startTimer = () => {
		if (isRunning.value) return

		isRunning.value = true
		startTime = Date.now() - currentTime.value * 1000

		timerInterval = setInterval(() => {
			const elapsed = (Date.now() - startTime) / 1000
			currentTime.value = elapsed

			// 更新未完成选手的时间（考虑偏移量）
			athletes.value.forEach(athlete => {
				if (!athlete.finished) {
					const offset = getAthleteOffset(athlete)
					athlete.time = Math.max(0, elapsed - offset)
				}
			})
		}, 16)
	}

	// 停止计时
	const stopTimer = () => {
		if (!isRunning.value) return

		isRunning.value = false
		if (timerInterval) {
			clearInterval(timerInterval)
			timerInterval = null
		}
	}

	// 记录下一个选手
	const recordNextAthlete = () => {
		// 查找下一个未完成的选手
		while (currentAthleteIndex.value < athletes.value.length) {
			const athlete = athletes.value[currentAthleteIndex.value]
			if (athlete.finished) {
				// 已手动计时的学生，跳过
				currentAthleteIndex.value++
			} else {
				break
			}
		}

		if (currentAthleteIndex.value >= athletes.value.length) {
			stopTimer()
			Service.Msg('所有选手已完成')
			return
		}

		const athlete = athletes.value[currentAthleteIndex.value]
		const offset = getAthleteOffset(athlete)
		athlete.finished = true
		athlete.time = Math.max(0, currentTime.value - offset)
		athlete.startOffset = offset

		currentAthleteIndex.value++

		// 如果所有选手都完成了，停止计时
		if (currentAthleteIndex.value >= athletes.value.length) {
			stopTimer()
			Service.Msg('所有选手已完成！')
		}
	}

	// 重置选手时间
	const resetAthleteTime = (athlete : Athlete) => {
		athlete.time = 0
		athlete.finished = false
		athlete.startOffset = undefined

		// 重新排序索引
		reorderAthletes()
	}

	// 处理选手第一个按钮点击
	const handleAthleteFirstButton = (athlete : Athlete, index : number) => {
		// 如果是一起出发模式，记录该选手时间
		if (athlete.finished) {
			Service.Msg('该选手已记录')
			return
		}

		const offset = getAthleteOffset(athlete)
		athlete.finished = true
		athlete.time = Math.max(0, currentTime.value - offset)
		athlete.startOffset = offset

		// 检查是否所有选手都完成了
		const allFinished = athletes.value.every(a => a.finished)
		if (allFinished) {
			stopTimer()
			Service.Msg('所有选手已完成！')
		} else {
			Service.Msg(`${athlete.name} 已记录`)
		}
	}

	// 重新排序选手索引
	const reorderAthletes = () => {
		const unfinished = athletes.value.filter(a => !a.finished)
		currentAthleteIndex.value = athletes.value.length - unfinished.length
	}

	// 记录所有未完成选手
	const recordAll = () => {
		let recordedCount = 0
		athletes.value.forEach(athlete => {
			if (!athlete.finished) {
				athlete.finished = true
				athlete.time = currentTime.value
				recordedCount++
			}
		})

		if (recordedCount > 0) {
			Service.Msg(`已记录${recordedCount}位选手`, 'success')
		} else {
			Service.Msg('没有需要记录的选手')
		}
	}

	// 重置所有
	const resetAll = () => {
		Service.Confirm('确定要重置所有计时吗？', () => {
			stopTimer()
			currentTime.value = 0
			currentAthleteIndex.value = 0

			athletes.value.forEach(athlete => {
				athlete.time = 0
				athlete.finished = false
				athlete.startOffset = undefined
			})
		})
	}
	// 处理数据
	const formatMinuteTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		const ms = Math.floor((seconds % 1) * 1000)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`
	}

	// 提交数据
	const submitData = () => {
		
		const hasData = athletes.value.some(a => a.time > 0)
		const allFinished = athletes.value.every(a => a.finished)
		if (!hasData) {
			Service.Msg('暂无数据可提交')
			return
		}
		// if(!allFinished){
		// 	Service.Msg('还用学生未完成!')
		// 	return
		// }
		stopTimer()
		let data = [{
			planName: "",
			studentId: "",
			studentName: "",
			time: ""
		}]
		data = []
		athletes.value.map((item : any) => {
			data.push({
				planName: planName.value,
				studentId: item.studentId,
				studentName: item.name,
				time: formatMinuteTime(item.time)
			})
		})
		
		PlanService.AddPlanLog(planId.value,'计时项目',JSON.stringify(data),'','','').then(res=>{
			if(res.code==0){
				Service.Msg('提交成功!')
				stopTimer()
				currentTime.value = 0
				currentAthleteIndex.value = 0
				
				athletes.value.forEach(athlete => {
					athlete.time = 0
					athlete.finished = false
					athlete.startOffset = undefined
				})
				
				if(res.data.record.length>0){
					record.value=res.data.record
					showRecord.value=true
				}
			}else{
				Service.Msg(res.msg)
			}
		})

	}


	// 页面卸载时清理计时器
	onUnmounted(() => {
		if (timerInterval) {
			clearInterval(timerInterval)
		}
	})
</script>

<style lang="scss" scoped>
	.swim-timer-container {
		min-height: 100vh;
		background-color: #f6f6f6;
		padding: 20rpx 20rpx;
		padding-top: 180rpx;
	}

	/* 总用时区域 - 固定在顶部 */
	.total-time-section {
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		text-align: center;
		padding: 40rpx 20rpx;
		background-color: #f6f6f6;

		z-index: 100;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.total-time {
			font-size: 80rpx;
			font-weight: bold;
			color: #ff0000;
		}

		.plan-info {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.plan-title {
				font-size: 24rpx;
				color: #666;
				background-color: rgba(255, 255, 255, 0.8);
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				display: inline-block;
			}
		}
	}

	/* 选手列表区域 */
	.athletes-section {
		margin-top: 80rpx;
		margin-bottom: 120rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.athlete-count {
				font-size: 24rpx;
				color: #999999;
				background-color: #f5f5f5;
				padding: 6rpx 16rpx;
				border-radius: 16rpx;
			}
		}

		.athletes-list {
			.group-wrapper {
				margin-bottom: 24rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				overflow: hidden;

				.group-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 28rpx;
					background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
					border-left: 6rpx solid #1890ff;

					.group-title {
						display: flex;
						align-items: center;
						gap: 12rpx;

						.group-label {
							font-size: 30rpx;
							font-weight: 600;
							color: #1890ff;
						}
					}

					.group-count {
						font-size: 24rpx;
						color: #666;
						background-color: rgba(255, 255, 255, 0.8);
						padding: 6rpx 16rpx;
						border-radius: 16rpx;
					}
				}

				.group-athletes {
					padding: 8rpx 16rpx 16rpx 16rpx;
				}
			}

			.athlete-item {
				display: flex;
				align-items: center;
				padding: 24rpx;
				margin-bottom: 12rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.03);
				transition: background-color 0.3s, border-color 0.3s;
				border: 2rpx solid transparent;

				&.finished {
					background-color: #f6ffed;
					border: 2rpx solid #b7eb8f;
				}

				&.fastest {
					background-color: #fff7e6;
					border: 2rpx solid #ffd591;
				}

				.athlete-number {
					width: 56rpx;
					height: 56rpx;
					background-color: #e6f7ff;
					color: #1890ff;
					font-size: 28rpx;
					font-weight: 600;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
				}

				.athlete-info {
					flex: 1;
					margin-right: 30rpx;
					position: relative;

					.athlete-name {
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 6rpx;
						display: block;
					}

					.athlete-meta {
						display: flex;
						flex-direction: column;
						gap: 4rpx;
					}

					.athlete-lane {
						font-size: 24rpx;
						color: #999999;
					}

					.start-offset {
						font-size: 20rpx;
						color: #fa8c16;
						background-color: #fff7e6;
						padding: 2rpx 10rpx;
						border-radius: 8rpx;
						display: inline-flex;
						align-items: center;
						gap: 4rpx;
						width: fit-content;
					}

					.fastest-tag {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 20rpx;
						color: #fa8c16;
						background-color: #fff7e6;
						padding: 2rpx 10rpx;
						border-radius: 8rpx;
					}
				}

				.time-wrapper {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					margin-right: 20rpx;
					min-width: 160rpx;

					.athlete-time {
						font-size: 32rpx;
						font-weight: bold;
						color: #ff0000;
						font-family: 'DIN Alternate', monospace;
					}

					.best-time {
						font-size: 20rpx;
						color: #999;
						margin-top: 4rpx;
					}
				}

				.reset-btn {
					width: 48rpx;
					height: 48rpx;
					background-color: #f5f5f5;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	/* 右下角悬浮提交按钮 */
	.fab-submit {
		position: fixed;
		right: 30rpx;
		bottom: 180rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow:
			0 8rpx 24rpx rgba(250, 140, 22, 0.5),
			0 16rpx 40rpx rgba(0, 0, 0, 0.2);
		z-index: 200;

		&:active {
			transform: scale(0.92);
		}

		.fab-text {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 600;
		}
	}

	/* 底部控制按钮 */
	.control-buttons {
		display: flex;
		gap: 24rpx;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%);
		padding: 32rpx 40rpx;
		// padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);

		.button-group {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.record-group {
			flex: 4;
		}

		.pause-group {
			flex: 1;
		}

		.back-btn,
		.start-btn,
		.pause-btn,
		.reset-all-btn,
		.record-btn,
		.submit-btn {
			flex: 1;
			height: 100rpx;
			border-radius: 20rpx;
			border: none;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 50%;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
				border-radius: 20rpx 20rpx 0 0;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 2rpx;
				background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
			}

			:deep(.u-icon) {
				position: relative;
				z-index: 1;
			}
		}

		.start-btn {
			background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
			color: #ffffff;
			box-shadow: 0 6rpx 20rpx rgba(82, 196, 26, 0.4);

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
			}
		}

		.pause-btn {
			background: linear-gradient(135deg, #fa541c 0%, #ff7a45 100%);
			color: #ffffff;
			box-shadow: 0 6rpx 20rpx rgba(250, 84, 28, 0.4);

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(250, 84, 28, 0.3);
			}
		}

		.reset-all-btn {
			background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
			color: #ffffff;
			box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.4);

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
			}
		}

		.back-btn {
			background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
			color: #ffffff;
			box-shadow: 0 6rpx 20rpx rgba(114, 46, 209, 0.4);

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(114, 46, 209, 0.3);
			}
		}

		.record-btn {
			background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
			color: #ffffff;
			box-shadow: 0 6rpx 20rpx rgba(82, 196, 26, 0.4);

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
			}
		}

		.btn-text {
			font-size: 32rpx;
			color: #ffffff;
			font-weight: 600;
			letter-spacing: 2rpx;
			position: relative;
			z-index: 1;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}

	/* 记录提示弹窗 */
	.record-notice-modal {
		width: 560rpx;
		padding: 30rpx 40rpx 48rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		text-align: center;

		.notice-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;

			.notice-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				margin-top: 16rpx;
			}
		}

		.notice-table {
			width: 100%;

			.table-header {
				display: flex;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				padding: 20rpx 0;
				margin-bottom: 16rpx;

				.header-cell {
					font-size: 26rpx;
					font-weight: 600;
					color: #666666;
					text-align: center;
				}
			}

			.table-body {
				max-height: 360rpx;

				.table-row {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.row-cell {
						font-size: 28rpx;
						color: #333333;
						text-align: center;
					}

					.time-cell {
						color: #ff0000;
						font-family: 'DIN Alternate', monospace;
						font-weight: 600;
					}
				}
			}

			.index-cell {
				width: 80rpx;
			}

			.name-cell {
				flex: 1;
			}

			.time-cell {
				width: 160rpx;
			}
		}
	}
</style>