<template>
	<view class="segmentation-container">
		<!-- 总计时器区域 -->
		<view class="total-time-section">
			<view class="timer-circle">
				<view class="circle-content">
					<view class="timer-sound">
						<text class="sound-text">计时器</text>
					</view>
					<view class="timer-time">{{ formatTime(currentTime) }}</view>
					<view class="timer-duration">{{ formatDuration(currentTime) }}</view>
				</view>
				<view class="timer-controls">
					<u-icon name="reload" size="32" color="#22a6f2" @click="resetAll"></u-icon>
					<u-icon :name="isRunning ? 'pause-circle' : 'play-circle'" size="32" color="#22a6f2"
						@click="toggleTimer"></u-icon>
				</view>
			</view>
		</view>

		<!-- 学生列表 -->
		<view class="students-section">
			<view class="section-header">
				<text class="section-title">学生列表</text>
				<text class="student-count">{{ students.length }}位学生</text>
			</view>

			<view class="students-list">
				<view v-for="(student, index) in students" :key="student.id" class="student-item">
					<view class="student-header">
						<view class="student-number">{{ student.number }}</view>
						<view class="student-info">
							<text class="student-name">{{ student.name }}</text>
							<text class="student-lane">{{ student.lane }}</text>
						</view>
						<view class="student-buttons">
							<button class="record-btn" @click="recordStudentSegment(student)">
								<u-icon name="checkmark" size="18" color="#fff"></u-icon>
								<text class="btn-text">记录</text>
							</button>
							<button class="reset-btn" @click="resetStudent(student)">
								<u-icon name="reload" size="18" color="#fff"></u-icon>
								<text class="btn-text">重置</text>
							</button>
						</view>
					</view>

					<!-- 分段时间块 -->
					<view class="segments-list">
						<view v-for="(segment, segIndex) in student.segments" :key="segIndex" class="segment-item">
							<text class="segment-label">第{{ segIndex + 1 }}段</text>
							<text class="segment-time">{{ segment.time ? formatTime(segment.time) : '--:--.--' }}</text>
						</view>
						<view  v-if="student.segments.length<4"  class="segment-item empty">
							<text class="segment-label">第{{ student.segments.length + 1 }}段</text>
							<text class="segment-time">--:--.--</text>
						</view>
					</view>
				</view>
			</view>
		</view>

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

<script setup lang="ts">
	import { ref, onUnmounted } from 'vue'
	import { Service } from '@/Service/Service'


	

	// 最大分段数
	const maxSegments = 4

	// 学生列表
	const students = ref<Array<any>>([
		{
			id: '1',
			number: '01',
			name: '张三',
			lane: '第一泳道',
			segments: []
		},
		{
			id: '2',
			number: '02',
			name: '李四',
			lane: '第二泳道',
			segments: []
		},
		{
			id: '3',
			number: '03',
			name: '王五',
			lane: '第三泳道',
			segments: []
		},
		{
			id: '4',
			number: '04',
			name: '赵六',
			lane: '第四泳道',
			segments: []
		}
	])

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

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

	// 格式化持续时间
	const formatDuration = (seconds : number) : string => {
		const hours = Math.floor(seconds / 3600)
		const mins = Math.floor((seconds % 3600) / 60)
		let result = ''
		if (hours > 0) {
			result += `${hours}小时`
		}
		if (mins > 0) {
			result += `${mins}分钟`
		}
		if (hours === 0 && mins === 0) {
			result = '0分钟'
		}
		return result
	}

	// 开始计时
	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
		}, 10)
	}

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

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

	// 切换计时器状态
	const toggleTimer = () => {
		if (isRunning.value) {
			stopTimer()
		} else {
			startTimer()
		}
	}

	// 记录学生分段
	const recordStudentSegment = (student : Student) => {
		if (!isRunning.value) {
			Service.Msg('请先开始计时')
			return
		}

		if (student.segments.length >= maxSegments) {
			Service.Msg('已达到最大分段数')
			return
		}

		student.segments.push({
			time: currentTime.value
		})

		Service.Msg(`${student.name} 第${student.segments.length}段已记录`)
	}

	// 重置学生
	const resetStudent = (student : Student) => {
		student.segments = []
		Service.Msg(`${student.name} 已重置`)
	}

	// 重置全部
	const resetAll = () => {
		stopTimer()
		currentTime.value = 0
		students.value.forEach(student => {
			student.segments = []
		})
		Service.Msg('已全部重置')
	}

	// 保存数据
	const saveData = () => {
		// 检查是否有记录的数据
		const hasData = students.value.some(s => s.segments.length > 0)
		if (!hasData) {
			Service.Msg('暂无数据可保存')
			return
		}

		// 这里可以添加保存到后端或本地存储的逻辑
		Service.Msg('保存成功', 'success')

		// 保存后可以选择返回上一页
		setTimeout(() => {
			Service.GoPageBack()
		}, 1000)
	}

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

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

	/* 总计时器区域 */
	.total-time-section {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: center;
	}

	.timer-circle {
		width: 350rpx;
		height: 360rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		padding: 20rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(250, 140, 22, 0.3);

		.circle-content {
			// background-color: #faad14;
			padding: 30rpx;
			border-radius: 50%;
			border: 16rpx solid #faad14;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
		}

		.timer-sound {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 8rpx 16rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 20rpx;

			.sound-text {
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.timer-time {
			font-size: 48rpx;
			font-weight: bold;
		}

		.timer-duration {
			font-size: 24rpx;
			opacity: 0.9;
			background-color: #f6f6f6;
			padding: 4rpx 12rpx;
			border-radius: 4rpx;
		}

		.timer-controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 280rpx;

			u-icon {
				cursor: pointer;
				transition: all 0.2s ease;

				&:hover {
					transform: scale(1.1);
				}
			}
		}
	}

	/* 学生列表区域 */
	.students-section {
		margin-bottom: 20rpx;

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

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

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

		.students-list {
			.student-item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				.student-header {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

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

					.student-info {
						flex: 1;

						.student-name {
							font-size: 30rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 4rpx;
							display: block;
						}

						.student-lane {
							font-size: 24rpx;
							color: #999;
						}
					}

					.student-buttons {
						display: flex;
						gap: 12rpx;

						.record-btn,
						.reset-btn {
							height: 56rpx;
							padding: 0 20rpx;
							border-radius: 8rpx;
							border: none;
							font-size: 24rpx;
							font-weight: 500;
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 6rpx;

							.btn-text {
								font-size: 24rpx;
								color: #fff;
							}
						}

						.record-btn {
							background-color: #52c41a;
						}

						.reset-btn {
							background-color: #faad14;
						}
					}
				}

				/* 分段时间列表 */
				.segments-list {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;

					.segment-item {
						flex: 1;
						min-width: 140rpx;
						background-color: #f5f5f5;
						border-radius: 12rpx;
						padding: 20rpx 16rpx;
						text-align: center;

						&.empty {
							opacity: 0.5;
						}

						.segment-label {
							font-size: 22rpx;
							color: #666;
							display: block;
							margin-bottom: 8rpx;
						}

						.segment-time {
							font-size: 26rpx;
							font-weight: 600;
							color: #333;
							font-family: 'DIN Alternate', monospace;
						}
					}
				}
			}
		}
	}

	/* 保存按钮 */
	.save-btn-wrapper {
		position: fixed;
		bottom: 40rpx;
		right: 30rpx;
		z-index: 100;

		.save-btn {
			width: 140rpx;
			height: 140rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			border-radius: 50%;
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
			box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.5),
				0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
				pointer-events: none;
			}

			&:active {
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4),
					0 2rpx 6rpx rgba(24, 144, 255, 0.2);
			}

			.btn-text {
				font-size: 26rpx;
				color: #fff;
				font-weight: 600;
				letter-spacing: 1rpx;
			}
		}
	}
</style>