<template>
	<view class="hunyang-container">
		<!-- 
			混氧训练页面主容器
			包含：头部信息、倒计时装置、底部控制按钮
		-->

		<!-- 项目信息头部 -->
		<view class="card-section header-section" style="position: relative;">
			<view class="header-content">
				<!-- 训练项目名称 -->
				<view class="project-name">{{ name }}</view>
				<!-- 总训练时长显示 -->
				<view class="total-duration">
					<text class="duration-label">计划总时长:</text>
					<!-- 格式化显示总时长 -->
					<text class="duration-value">{{ formatTotalDuration(totalDuration) }}</text>
				</view>
			</view>
			<view class="" style="position: absolute; top: 20rpx; right: 30rpx; ">
				<up-icon @click="Service.GoPage('/pages/userFunc/addHunyang?id='+planId)" name="setting"
					size="22"></up-icon>
			</view>
		</view>

		<!-- 多个倒计时装置区域 -->
		<view class="card-section timer-section">
			<!-- 区域标题 -->
			<view class="section-title">倒计时装置</view>

			<view class="multi-timers-wrapper">
				<!-- 
					使用v-for循环渲染每个训练计划
					:active类用于高亮当前正在执行的计划
				-->
				<view v-for="(plan, index) in plans" :key="plan.id" class="timer-item"
					:class="{ active: currentPlanIndex === index }">
					<view class="timer-horizontal">
						<!-- 
							训练状态显示区域
							根据不同状态显示：休息中/已完成/计划X
						-->
						<view class="timer-status" :class="{ resting: timerStates[index].isResting }">
							<text v-if="timerStates[index].isResting" class="status-label">休息中</text>
							<text v-else-if="timerStates[index].isCompleted" class="status-label">已完成</text>
							<text v-else class="status-label">计划{{ index + 1 }}</text>
						</view>
						<!-- 
							倒计时显示区域
							根据状态显示训练时间或休息时间
						-->
						<view class="timer-display" :class="{ resting: timerStates[index].isResting }">
							<text v-if="timerStates[index].isResting"
								class="display-time">{{ formatRestCountdown(timerStates[index].restCountdown) }}</text>
							<text v-else class="display-time">{{ formatCountdown(timerStates[index].countdown) }}</text>
						</view>
						<!-- 
							完成圈数显示
							显示已完成的圈数/总圈数
						-->
						<view class="timer-laps">
							<text class="laps-text">{{ timerStates[index].completedLaps }}/{{ plan.circle }}圈</text>
						</view>
					</view>

					<!-- 计划详细信息 -->
					<view class="plan-info-bar">
						<view class="info-item">
							<text class="info-label">目标:</text>
							<text class="info-value">{{ plan.target }}秒</text>
						</view>
						<view class="info-item">
							<text class="info-label">休息:</text>
							<text class="info-value">{{ plan.rest }}秒</text>
						</view>
					</view>
				</view>

				<!-- 空状态提示 -->
				<view v-if="plans.length === 0" class="empty-timer">
					<text class="empty-text">暂无训练计划，请添加</text>
				</view>
			</view>
		</view>

		<!-- 底部控制按钮区域 -->
		<view class="bottom-controls">
			<view class="controls-inner">
				<!-- 
					开始按钮 - 仅在未运行时显示
					点击开始所有训练计划
				-->
				<view v-if="!isRunning" class="control-btn start-btn" @click="startAll">
					<u-icon name="play-circle" size="32" color="#fff"></u-icon>
					<text class="btn-text">开始</text>
				</view>
				<!-- 
					暂停按钮 - 仅在运行时显示
					点击暂停所有训练
				-->
				<view v-else class="control-btn pause-btn" @click="pauseAll">
					<u-icon name="pause-circle" size="32" color="#fff"></u-icon>
					<text class="btn-text">暂停</text>
				</view>
				<!-- 
					重置按钮
					点击重置所有训练状态
				-->
				<view class="control-btn reset-btn" @click="resetAll">
					<u-icon name="reload" size="32" color="#fff"></u-icon>
					<text class="btn-text">重置</text>
				</view>
			</view>
		</view>

		<!-- 保存悬浮按钮 -->
		<view class="save-float-btn" @click="saveData">
			<text class="btn-text">保存</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	// 导入必要的Vue组合式API和项目服务
	import { ref, computed, onUnmounted } from 'vue'
	import { Service } from '@/Service/Service'
	import { PlanService } from '@/Service/swimming/PlanService'
	import { onLoad, onShow } from '@dcloudio/uni-app'

	// 定义训练计划的数据结构接口
	interface PlanItem {
		id : string          // 计划唯一标识
		targetTime : number  // 目标训练时间（秒）
		restTime : number    // 休息时间（秒）
		lapCount : number    // 训练圈数
	}

	// 定义计时器状态的数据结构接口
	interface TimerState {
		isRunning : boolean      // 是否正在运行
		isResting : boolean      // 是否处于休息状态
		isCompleted : boolean    // 是否已完成
		countdown : number       // 倒计时（秒）
		restCountdown : number   // 休息倒计时（秒）
		completedLaps : number   // 已完成圈数
	}

	// 训练计划列表，使用ref实现响应式
	const plans = ref<Array<any>>([
	])

	// 每个计划的计时器状态，与plans一一对应
	const timerStates = ref<TimerState[]>([])
	// 当前正在执行的训练计划索引
	const currentPlanIndex = ref(0)
	// 训练是否正在运行的状态
	const isRunning = ref(false)
	// 主计时器间隔ID，用于控制全局计时
	const mainInterval = ref<number | null>(null)

	// 训练计划ID，从页面参数获取
	let planId = ref('')

	let name = ref('')

	// 页面加载时触发，获取训练计划信息
	onLoad((data : any) => {
		planId.value = data.id

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

	// 获取计划详情
	// 通过PlanService获取指定ID的训练计划，并初始化计时器状态
	const getPlanInfo = () => {
		PlanService.GetPlanInfo(planId.value).then(res => {
			if (res.code == 0) {
				// 解析计划数据并初始化计时器状态
				name.value = res.data.plan.name
				plans.value = JSON.parse(res.data.plan.project)
				initTimerStates()
			} else {
				// 显示错误信息
				Service.Msg(res.msg)
			}
		})
	}

	// 初始化计时器状态
	// 为每个计划创建对应的计时器状态对象，重置所有状态
	const initTimerStates = () => {
		timerStates.value = plans.value.map(() => ({
			isRunning: false,
			isResting: false,
			isCompleted: false,
			countdown: 0,
			restCountdown: 0,
			completedLaps: 0
		}))
	}

	// 开始所有训练计划
	// 检查是否有计划，如果没有则提示用户
	// 设置运行状态并启动第一个计划
	const startAll = () => {
		if (plans.value.length === 0) {
			Service.Msg('请先添加训练计划')
			return
		}

		isRunning.value = true

		// 启动指定索引的计划
		const startPlan = (index : number) => {
			// 如果索引超出范围，停止所有训练并显示完成消息
			if (index >= plans.value.length) {
				stopAll()
				Service.Msg('所有计划训练完成！', 'success')
				return
			}

			// 设置当前计划索引并获取对应的状态
			currentPlanIndex.value = index
			const plan = plans.value[index]
			const state = timerStates.value[index]

			// 设置计划为运行状态，并初始化倒计时
			state.isRunning = true
			if (state.countdown === 0 && !state.isResting) {
				state.countdown = plan.target
			}
		}

		// 启动当前计划
		startPlan(currentPlanIndex.value)

		// 设置主计时器，每10毫秒更新一次
		mainInterval.value = setInterval(() => {
			const index = currentPlanIndex.value
			// 如果索引超出范围，停止所有训练
			if (index >= plans.value.length) {
				stopAll()
				return
			}

			const plan = plans.value[index]
			const state = timerStates.value[index]

			// 如果处于休息状态，更新休息倒计时
			if (state.isResting) {
				state.restCountdown -= 0.01
				if (state.restCountdown <= 0) {
					// 休息结束，重置休息状态并开始训练
					state.isResting = false
					state.restCountdown = 0
					state.countdown = plan.target
				}
			} else {
				// 训练状态，更新训练倒计时
				state.countdown -= 0.01
				if (state.countdown <= 0) {
					// 训练完成一圈，增加完成圈数
					state.completedLaps += 1

					// 如果达到总圈数，标记为已完成并启动下一个计划
					if (state.completedLaps >= plan.circle) {
						state.isRunning = false
						state.isCompleted = true
						currentPlanIndex.value += 1
						startPlan(currentPlanIndex.value)
					} else {
						// 否则进入休息状态
						state.isResting = true
						state.restCountdown = plan.rest
					}
				}
			}
		}, 10)
	}

	// 暂停所有训练
	// 调用stopAll方法暂停训练
	const pauseAll = () => {
		stopAll()
	}

	// 停止所有训练
	// 重置运行状态，清除主计时器
	const stopAll = () => {
		isRunning.value = false
		// 重置所有计划的运行状态
		timerStates.value.forEach(state => {
			state.isRunning = false
		})
		// 清除主计时器
		if (mainInterval.value) {
			clearInterval(mainInterval.value)
			mainInterval.value = null
		}
	}

	// 重置所有训练状态
	// 停止训练，重置当前计划索引，重置所有计时器状态
	const resetAll = () => {
		stopAll()
		currentPlanIndex.value = 0
		// 重置所有计时器状态
		timerStates.value.forEach(state => {
			state.isResting = false
			state.isCompleted = false
			state.countdown = 0
			state.restCountdown = 0
			state.completedLaps = 0
		})
	}

	// 格式化倒计时显示
	// 将秒数格式化为"分:秒"格式
	const formatCountdown = (seconds : number) : string => {
		const totalSeconds = Math.max(0, Math.floor(seconds))
		const minutes = Math.floor(totalSeconds / 60)
		const secs = totalSeconds % 60
		return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
	}

	// 格式化休息倒计时显示
	// 将秒数格式化为"分:秒"格式
	const formatRestCountdown = (seconds : number) : string => {
		const totalSeconds = Math.max(0, Math.floor(seconds))
		const minutes = Math.floor(totalSeconds / 60)
		const secs = totalSeconds % 60
		return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
	}

	// 格式化总时长显示
	// 将秒数格式化为"分:秒"格式
	const formatTotalDuration = (seconds : number) : string => {
		if (seconds === 0) return '0分0秒'
		const minutes = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		return `${minutes}分${secs}秒`
	}



	// 计算总训练时长
	// 根据所有计划的训练时间和休息时间计算总时长
	const totalDuration = computed(() => {
		return plans.value.reduce((total, plan) => {
			const planTime = plan.target * plan.circle
			const restTime = plan.rest * (plan.circle - 1)
			return total + planTime + restTime
		}, 0)
	})



	// 保存数据
	const saveData = () => {
		if (plans.value.length === 0) {
			Service.Msg('没有可保存的训练计划')
			return
		}

		// 构建要保存的数据
		const saveData = {
			name: name.value,
			project: JSON.stringify(plans.value),
			totalDuration: totalDuration.value
		}

		
	}


	// 页面卸载时触发
	// 确保停止所有训练，避免内存泄漏
	onUnmounted(() => {
		stopAll()
	})

	// 格式化总时长显示
	// 将秒数格式化为"小时:分:秒"或"分:秒"或"秒"格式


	// 页面卸载时触发
	// 确保停止所有训练，避免内存泄漏
	onUnmounted(() => {
		stopAll()
	})
</script>

<style lang="scss" scoped>
	.hunyang-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 20rpx;
		padding-bottom: 240rpx;
	}

	.card-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.header-section {
		background: #ffffff;
		color: #333333;
	}

	.header-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.project-name {
		font-size: 36rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}

	.total-duration {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: #f0f0f0;
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
	}

	.duration-label {
		font-size: 24rpx;
		color: #666666;
	}

	.duration-value {
		font-size: 28rpx;
		font-weight: 500;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 16rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4rpx;
			height: 20rpx;
			background: #4a90e2;
			border-radius: 2rpx;
		}
	}

	.empty-timer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 20rpx;

		.empty-text {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.timer-section {
		background: #ffffff;
	}

	.multi-timers-wrapper {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.timer-item {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		transition: all 0.2s ease;

		&.active {
			border-color: #4a90e2;
			box-shadow: 0 0 0 2rpx rgba(74, 144, 226, 0.1);
		}

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

	.timer-horizontal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 12rpx;
		gap: 12rpx;
	}

	.timer-status {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		background: #e6f0ff;
		border: 1rpx solid #d0e3ff;
		min-width: 100rpx;

		&.resting {
			background: #fff8e6;
			border-color: #ffe0b2;
		}

		.status-label {
			font-size: 22rpx;
			font-weight: 500;
			color: #4a90e2;
		}

		&.resting .status-label {
			color: #ff9800;
		}
	}

	.timer-display {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.display-time {
			font-size: 56rpx;
			font-weight: bold;
			font-family: 'Helvetica Neue', monospace;
			color: #4a90e2;
			letter-spacing: 1rpx;
		}

		&.resting .display-time {
			color: #ff9800;
			animation: countdownFlash 0.5s ease-in-out infinite;
		}
	}

	.timer-laps {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 16rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		min-width: 100rpx;

		.laps-text {
			font-size: 22rpx;
			color: #666666;
			font-weight: 400;
		}
	}

	.bottom-controls {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		padding: 16rpx 24rpx 24rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 100;
		border-top: 1rpx solid #e0e0e0;
	}

	.controls-inner {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.control-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 20rpx 16rpx;
		border-radius: 8rpx;
		transition: all 0.2s ease;
		flex: 1;
	}

	.control-btn:active {
		transform: scale(0.98);
	}

	.btn-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.start-btn {
		background-color: #4caf50;
	}

	.pause-btn {
		background-color: #ff9800;
	}

	.reset-btn {
		background-color: #2196f3;
	}

	.plan-info-bar {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		padding-top: 10rpx;
		border-top: 1rpx dashed #e0e0e0;

		.info-item {
			display: flex;
			align-items: center;
			gap: 6rpx;
		}

		.info-label {
			font-size: 20rpx;
			color: #666666;
		}

		.info-value {
			font-size: 20rpx;
			color: #333333;
			font-weight: 500;
		}
	}

	@keyframes countdownFlash {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}
	}

	/* 保存悬浮按钮样式 */
	.save-float-btn {
		position: fixed;
		bottom: 240rpx;
		right: 30rpx;
		background-color: #2196f3;
		padding: 40rpx;
		border-radius: 50%;
		box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
		z-index: 101;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.save-float-btn:active {
		transform: scale(0.95);
	}

	.save-float-btn .btn-text {
		font-size: 20rpx;
	}
</style>