<template>
	<view class="project-container">
		<!-- 计划时长 -->
		<view class="card-section">
			<view class="section-title">计划时长</view>
			<view class="plan-duration-display">
				<text class="duration-value">{{ formatPlanTime(planDuration) }}</text>
			</view>
		</view>

		<!-- 计时器列表 -->
		<view class="card-section">
			<view class="section-header">
				<text class="section-title">计时器列表</text>
				<view class="add-btn" @click="addTimer">
					<u-icon name="plus" size="18" color="#fff"></u-icon>
					<text class="add-text">添加</text>
				</view>
			</view>

			<view class="timers-grid">
				<view v-for="(timer, index) in timers" :key="timer.id" class="timer-card-wrapper">
					<view class="timer-circle" @click="openTimerDetail(timer)">
						<!-- 删除按钮 -->
						<view class="delete-btn-wrapper">
							<view class="delete-btn" @click.stop="deleteTimer(timer, index)">
								<u-icon name="trash" size="16" color="#fff"></u-icon>
							</view>
						</view>

						<view class="circle-content">
							<view class="timer-sound">
								<text class="sound-text">{{ timer.studentName || '计时器 ' + (index + 1) }}</text>
							</view>
							<view class="timer-time">{{ formatTime(timer.currentTime) }}</view>
							<view class="timer-duration">{{ formatDuration(timer.currentTime) }}</view>
						</view>

						<!-- 休息时长 - 有休息时间就显示 -->
						<view class="rest-time" v-if="timer.totalRestTime > 0 || timer.status === 'paused'">
							<text class="rest-label">休息</text>
							<text class="rest-value">{{ formatRestTime(timer.displayRestTime) }}</text>
						</view>

					<view class="timer-controls">
							<view class="" @click.stop="recordTimer(timer)">
								<u-icon name="edit-pen" size="32" color="#22a6f2"></u-icon>
							</view>
							<view v-if="timer.status !== 'completed'" @click.stop="toggleTimer(timer)" class="">
								<u-icon 
									:name="timer.status === 'running' ? 'pause-circle' : 'play-circle'" size="32"
									color="#22a6f2"></u-icon>
							</view>
							<view v-if="timer.status !== 'completed'" @click.stop="completeTimer(timer)" class="">
								<u-icon  name="checkmark-circle" size="32"
									color="#52c41a"></u-icon>
							</view>
							<u-icon v-else name="checkmark-circle" size="32" color="#52c41a"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-buttons-section">
			<view class="bottom-buttons">
				<!-- 全部开始按钮 -->
				<button v-if="!hasRunningTimers" class="bottom-btn start-all-btn" @click="startAllTimers">
					<u-icon name="play-circle" size="20" color="#fff"></u-icon>
					<text class="btn-text">全部开始</text>
				</button>
				<!-- 全部暂停按钮 -->
				<button v-else class="bottom-btn pause-all-btn" @click="pauseAllTimers">
					<u-icon name="pause-circle" size="20" color="#fff"></u-icon>
					<text class="btn-text">全部暂停</text>
				</button>
				<!-- 提交按钮 -->
				<button class="bottom-btn submit-btn" @click="submitData">
					<u-icon name="checkmark" size="20" color="#fff"></u-icon>
					<text class="btn-text">提交</text>
				</button>
			</view>
		</view>

		<!-- 底部弹出框 - 秒表详情 -->
		<u-popup v-model:show="showTimerDetail" mode="bottom" :round="20" :closeable="true" closeOnClickOverlay>
			<view class="timer-detail-popup">
				<!-- 姓名显示 -->
				<view class="detail-name">{{ selectedTimer?.studentName || '计时器' }}</view>

				<!-- 秒表显示 -->
				<view class="stopwatch-display">
					<text class="stopwatch-time">{{ formatStopwatchTime(selectedTimer?.currentTime || 0) }}</text>
					<text class="stopwatch-millis">{{ formatMillis(selectedTimer?.currentTime || 0) }}</text>
				</view>

				<!-- 休息时间显示 -->
				<view class="stopwatch-rest" v-if="selectedTimer?.displayRestTime > 0 || selectedTimer?.status === 'paused'">
					<text class="rest-label">休息时间</text>
					<text class="rest-time-value">{{ formatRestTime(selectedTimer?.displayRestTime || 0) }}</text>
				</view>

				<!-- 记录列表 -->
				<scroll-view scroll-y class="records-list"
					v-if="selectedTimer?.records && selectedTimer.records.length > 0">
					<view v-for="(record, idx) in selectedTimer.records" :key="idx" class="record-item">
						<view class="record-info">
							<text class="record-index">记录 {{ selectedTimer.records.length - idx }}</text>
							<text class="record-time">{{ formatFullTime(record.time) }}</text>
						</view>
						<view v-if="record.restTime > 0" class="record-rest">
							<text class="rest-tag">休息</text>
							<text class="rest-value">{{ formatRestTime(record.restTime) }}</text>
						</view>
					</view>
				</scroll-view>

				<!-- 按钮组 -->
				<view class="detail-buttons">
					<view class="detail-btn detail-btn-reset" @click="resetSelectedTimer">
						<u-icon name="reload" size="24" color="#fff"></u-icon>
						<text class="btn-label">重置</text>
					</view>
					<view class="detail-btn detail-btn-main" @click="toggleSelectedTimer">
						<u-icon :name="selectedTimer?.status === 'running' ? 'pause' : 'play-right'" size="32" color="#fff"></u-icon>
						<text class="btn-label">{{ selectedTimer?.status === 'running' ? '暂停' : '开始' }}</text>
					</view>
					<view class="detail-btn detail-btn-record" @click="recordLap" :class="{ disabled: selectedTimer?.status !== 'running' }">
						<u-icon name="edit-pen" size="24" :color="selectedTimer?.status === 'running' ? '#fff' : '#bfbfbf'"></u-icon>
						<text class="btn-label">记录</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

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

	interface RecordItem {
		time : number
		restTime : number
	}

	interface TimerItem {
		id : string
		currentTime : number
		status : 'idle' | 'running' | 'paused' | 'completed'
		studentName : string
		totalRestTime : number
		pauseStartTime : number
		displayRestTime : number
		lastRecordRestTime : number
		records ?: RecordItem[]
	}

	// 计划时长（秒）
	const planDuration = ref(3600)

	// 学生列表（用于选择学生）
	const studentNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八']

	// 计时器列表

	const timers = ref<TimerItem[]>([
		{ id: '1', currentTime: 0, status: 'idle', studentName: studentNames[0], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0, lastRecordRestTime: 0, records: [] },
		{ id: '2', currentTime: 0, status: 'idle', studentName: studentNames[1], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0, lastRecordRestTime: 0, records: [] }
	])

	// 底部弹出框相关
	const showTimerDetail = ref(false)
	const selectedTimer = ref<TimerItem | null>(null)

	// 计时器间隔 - 主计时器
	const timerIntervals = ref<Map<string, { interval : number, startTime : number }>>(new Map())
	// 休息时间计时器
	const restTimerIntervals = ref<Map<string, number>>(new Map())

	// 计算是否有正在运行的计时器
	const hasRunningTimers = computed(() => {
		return timers.value.some(timer => timer.status === 'running')
	})

	// 格式化计划时间显示
	const formatPlanTime = (seconds : number) : string => {
		const hours = Math.floor(seconds / 3600)
		const mins = Math.floor((seconds % 3600) / 60)
		if (hours > 0) {
			return `${hours}小时${mins}分钟`
		}
		return `${mins}分钟`
	}

	// 格式化时间显示
	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 formatRestTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
	}

	// 格式化秒表显示 (MM:SS)
	const formatStopwatchTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
	}

	// 格式化毫秒显示
	const formatMillis = (seconds : number) : string => {
		const millis = Math.floor((seconds % 1) * 100)
		return `.${millis.toString().padStart(2, '0')}`
	}

	// 格式化完整时间 (MM:SS.xx)
	const formatFullTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		const millis = Math.floor((seconds % 1) * 100)
		return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${millis.toString().padStart(2, '0')}`
	}

	// 添加计时器
	const addTimer = () => {
		const nextIndex = timers.value.length % studentNames.length
		timers.value.push({
			id: Date.now().toString(),
			currentTime: 0,
			status: 'idle',
			studentName: studentNames[nextIndex],
			totalRestTime: 0,
			pauseStartTime: 0,
			displayRestTime: 0,
			lastRecordRestTime: 0,
			records: []
		})
		Service.Msg('添加成功', 'success')
	}

	// 删除计时器
	const deleteTimer = (timer : TimerItem, index : number) => {
		uni.showModal({
			title: '确认删除',
			content: `确定要删除 ${timer.studentName || '计时器 ' + (index + 1)} 吗？`,
			success: (res) => {
				if (res.confirm) {
					// 先停止计时器
					if (timer.status === 'running') {
						stopSingleTimer(timer)
					}
					if (timer.status === 'paused') {
						stopRestTimer(timer)
					}
					// 从列表中移除
					timers.value = timers.value.filter(t => t.id !== timer.id)
					Service.Msg('删除成功')
				}
			},
		})
	}

	// 开始主计时器
	const startTimer = (timer : TimerItem) => {
		if (timer.status === 'running') return

		// 停止休息计时器，保存当前休息时间
		if (timer.status === 'paused') {
			stopRestTimer(timer)
			// 计算这次暂停的休息时间间隔，累加到lastRecordRestTime
			const currentPauseRestTime = timer.displayRestTime - timer.totalRestTime
			timer.lastRecordRestTime += currentPauseRestTime
		}

		timer.status = 'running'
		const startTime = Date.now() - timer.currentTime * 1000

		const interval = setInterval(() => {
			const elapsed = (Date.now() - startTime) / 1000
			timer.currentTime = elapsed
		}, 10)

		timerIntervals.value.set(timer.id, { interval, startTime })
	}

	// 停止单个主计时器
	const stopSingleTimer = (timer : TimerItem) => {
		if (timer.status !== 'running') return

		timer.status = 'paused'

		const timerData = timerIntervals.value.get(timer.id)
		if (timerData) {
			clearInterval(timerData.interval)
			timerIntervals.value.delete(timer.id)
		}

		// 开始休息计时器，从总休息时间继续，自动计算休息时间间隔
		startRestTimer(timer)
	}

	// 开始休息计时器
	const startRestTimer = (timer : TimerItem) => {
		timer.pauseStartTime = Date.now()

		const interval = setInterval(() => {
			const elapsed = (Date.now() - timer.pauseStartTime) / 1000
			timer.displayRestTime = timer.totalRestTime + elapsed
		}, 10)

		restTimerIntervals.value.set(timer.id, interval)
	}

	// 停止休息计时器
	const stopRestTimer = (timer : TimerItem) => {
		const interval = restTimerIntervals.value.get(timer.id)
		if (interval) {
			clearInterval(interval)
			restTimerIntervals.value.delete(timer.id)
		}
		// 保存这次的休息时间到总休息时间
		timer.totalRestTime = timer.displayRestTime
	}

	// 停止所有计时器
	const stopAllTimers = () => {
		timers.value.forEach(timer => {
			if (timer.status === 'running') {
				stopSingleTimer(timer)
			}
		})
	}

	// 全部开始
	const startAllTimers = () => {
		timers.value.forEach(timer => {
			if (timer.status !== 'completed' && timer.status !== 'running') {
				startTimer(timer)
			}
		})
		Service.Msg('全部已开始')
	}

	// 全部暂停
	const pauseAllTimers = () => {
		timers.value.forEach(timer => {
			if (timer.status === 'running') {
				stopSingleTimer(timer)
			}
		})
		Service.Msg('全部已暂停')
	}

	// 切换计时器状态
	const toggleTimer = (timer : TimerItem) => {
		if (timer.status === 'completed') return
		if (timer.status === 'running') {
			stopSingleTimer(timer)
		} else {
			startTimer(timer)
		}
	}

	// 完成计时器
	const completeTimer = (timer : TimerItem) => {
		// 如果正在暂停中，保存休息时间
		if (timer.status === 'paused') {
			stopRestTimer(timer)
		}

		// 先停止当前计时器
		stopSingleTimer(timer)
		timer.status = 'completed'

		// 停止所有其他计时器
		stopAllTimers()

		Service.Msg('已完成，所有计时器已暂停', 'success')
	}

	// 记录计时
	const recordTimer = (timer : TimerItem) => {
		if (timer.status !== 'running') {
			Service.Msg('请在运行中记录')
			return
		}
		if (!timer.records) {
			timer.records = []
		}
		timer.records.push({ time: timer.currentTime, restTime: timer.lastRecordRestTime })
		timer.lastRecordRestTime = 0
		Service.Msg('已记录')
	}

	// 重置计时器
	const resetTimer = (timer : TimerItem) => {
		stopSingleTimer(timer)
		stopRestTimer(timer)
		timer.currentTime = 0
		timer.status = 'idle'
		timer.totalRestTime = 0
		timer.displayRestTime = 0
		timer.pauseStartTime = 0
		timer.lastRecordRestTime = 0
		timer.records = []
		Service.Msg('已重置')
	}

	// 打开计时器详情
	const openTimerDetail = (timer : TimerItem) => {
		selectedTimer.value = timer
		showTimerDetail.value = true
	}

	// 记录圈数
	const recordLap = () => {
		if (!selectedTimer.value) {
			Service.Msg('未选择计时器')
			return
		}

		// 如果是暂停状态，需要先保存当前的休息时间
		if (selectedTimer.value.status === 'paused') {
			stopRestTimer(selectedTimer.value)
			const currentRestTime = selectedTimer.value.displayRestTime - selectedTimer.value.totalRestTime
			selectedTimer.value.lastRecordRestTime += currentRestTime
			selectedTimer.value.totalRestTime = selectedTimer.value.displayRestTime
		}

		// 如果不是运行状态，提示需要先开始
		if (selectedTimer.value.status !== 'running') {
			Service.Msg('请先开始计时器')
			return
		}

		// 创建记录数组
		if (!selectedTimer.value.records) {
			selectedTimer.value.records = []
		}

		// 保存当前休息时间到记录
		selectedTimer.value.records.push({
			time: selectedTimer.value.currentTime,
			restTime: selectedTimer.value.lastRecordRestTime
		})

		// 重置上次记录的休息时间
		selectedTimer.value.lastRecordRestTime = 0
		Service.Msg('已记录')
	}

	// 切换选中的计时器
	const toggleSelectedTimer = () => {
		if (selectedTimer.value) {
			toggleTimer(selectedTimer.value)
		}
	}

	// 重置选中的计时器
	const resetSelectedTimer = () => {
		if (selectedTimer.value) {
			resetTimer(selectedTimer.value)
		}
	}

	// 提交数据
	const submitData = () => {
		// 先暂停所有计时器
		pauseAllTimers()

		// 检查是否有数据
		const hasData = timers.value.some(timer => timer.currentTime > 0 || timer.totalRestTime > 0)
		if (!hasData) {
			Service.Msg('暂无数据可提交')
			return
		}

		// 这里可以添加提交到后端的逻辑
		Service.Msg('提交成功', 'success')

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

	// 页面卸载时清理所有计时器
	onUnmounted(() => {
		timerIntervals.value.forEach(({ interval }) => {
			clearInterval(interval)
		})
		restTimerIntervals.value.forEach((interval) => {
			clearInterval(interval)
		})
	})
</script>

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

	/* 卡片区域 */
	.card-section {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #262626;
		margin-bottom: 28rpx;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 28rpx;
			background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
			border-radius: 3rpx;
		}
	}

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

		.section-title {
			margin-bottom: 0;
		}

		.add-btn {
			display: flex;
			align-items: center;
			gap: 10rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			padding: 14rpx 28rpx;
			border-radius: 32rpx;
			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			transition: all 0.3s ease;

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

			.add-text {
				font-size: 26rpx;
				color: #fff;
				font-weight: 500;
			}
		}
	}

	/* 计划时长显示 */
	.plan-duration-display {
		text-align: center;
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
		border-radius: 20rpx;
		border: 2rpx solid #bae7ff;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 100%;
			height: 200%;
			background: linear-gradient(
				45deg,
				transparent 40%,
				rgba(255, 255, 255, 0.3) 50%,
				transparent 60%
			);
			animation: shimmer 3s infinite;
		}

		@keyframes shimmer {
			0% {
				transform: translateX(-100%);
			}
			100% {
				transform: translateX(100%);
			}
		}

		.duration-value {
			font-size: 42rpx;
			font-weight: 700;
			color: #1890ff;
			position: relative;
			z-index: 1;
			font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
		}
	}

	/* 计时器网格 */
	.timers-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
	}

	/* 计时器卡片包装器 */
	.timer-card-wrapper {
		display: flex;
		justify-content: center;
	}

	/* 计时器圆形 - 一比一复原 segmentation 页面 */
	.timer-circle {
		width: 320rpx;
		min-height: 380rpx;
		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);

		/* 删除按钮包装器 */
		.delete-btn-wrapper {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			z-index: 10;

			.delete-btn {
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(135deg, #ff4d4f 0%, #d9363e 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.4);
				transition: all 0.2s ease;

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

		.circle-content {
			padding: 26rpx;
			border-radius: 50%;
			border: 14rpx solid #faad14;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 14rpx;
		}

		.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: 22rpx;
				font-weight: 500;
				color: #333;
			}
		}

		.timer-time {
			font-size: 42rpx;
			font-weight: bold;
			color: #333;
		}

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

		/* 休息时长 */
		.rest-time {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-top: 16rpx;
			padding: 8rpx 20rpx;
			background-color: #fff7e6;
			border-radius: 20rpx;

			.rest-label {
				font-size: 20rpx;
				color: #fa8c16;
				font-weight: 500;
			}

			.rest-value {
				font-size: 22rpx;
				color: #fa8c16;
				font-weight: bold;
				font-family: 'DIN Alternate', monospace;
			}
		}

		.timer-controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 260rpx;
			margin-top: 16rpx;

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

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

	/* 底部按钮区域 */
	.bottom-buttons-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 100;
	}

	.bottom-buttons {
		display: flex;
		gap: 20rpx;

		.bottom-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 16rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			font-weight: 600;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: all 0.2s ease;

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

			.btn-text {
				font-size: 28rpx;
				color: #fff;
				font-weight: 600;
			}
		}

		/* 全部开始按钮 */
		.start-all-btn {
			background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
		}

		/* 全部暂停按钮 */
		.pause-all-btn {
			background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
		}

		/* 提交按钮 */
		.submit-btn {
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		}
	}

	/* 计时器卡片可点击 */
	.timer-circle {
		cursor: pointer;
		transition: all 0.2s ease;

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

	/* 底部弹出框样式 - 简洁版 */
	.timer-detail-popup {
		padding: 50rpx 40rpx;
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		min-height: 450rpx;
		max-height: 75vh;
		display: flex;
		flex-direction: column;
	}

	/* 详情姓名 */
	.detail-name {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #8c8c8c;
		margin-bottom: 40rpx;
		letter-spacing: 2rpx;
	}

	/* 秒表显示 */
	.stopwatch-display {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.stopwatch-time {
		font-size: 100rpx;
		font-weight: 300;
		color: #1a1a1a;
		font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
		letter-spacing: 2rpx;
	}

	.stopwatch-millis {
		font-size: 48rpx;
		font-weight: 300;
		color: #bfbfbf;
		font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
		margin-left: 4rpx;
	}

	/* 休息时间显示 */
	.stopwatch-rest {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
		margin-bottom: 40rpx;
		padding: 16rpx 32rpx;
		background-color: #fff7e6;
		border-radius: 16rpx;

		.rest-label {
			font-size: 26rpx;
			color: #fa8c16;
			font-weight: 500;
		}

		.rest-time-value {
			font-size: 32rpx;
			color: #fa8c16;
			font-weight: 600;
			font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
		}
	}

	/* 记录列表 */
	.records-list {
		flex: 1;
		max-height: 280rpx;
		margin-bottom: 40rpx;
		background-color: #fafafa;
		border-radius: 16rpx;
		padding: 0 20rpx;
	}

	.record-item {
		padding: 20rpx 24rpx;
		margin-bottom: 12rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		transition: all 0.2s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.08);
		}
	}

	.record-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.record-index {
		font-size: 24rpx;
		color: #8c8c8c;
		font-weight: 400;
		background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
		padding: 4rpx 14rpx;
		border-radius: 8rpx;
	}

	.record-time {
		font-size: 32rpx;
		font-weight: 600;
		color: #262626;
		font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
	}

	.record-rest {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-top: 8rpx;
	}

	.rest-tag {
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
		background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
		padding: 4rpx 14rpx;
		border-radius: 8rpx;
	}

	.rest-value {
		font-size: 24rpx;
		color: #fa8c16;
		font-weight: 600;
		font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
	}



	/* 详情按钮 - 符合项目整体风格的圆形按钮 */
	.detail-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 50rpx;
	}

	.detail-btn {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6rpx;
		transition: all 0.3s ease;
		cursor: pointer;
		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);
		}

		.btn-label {
			font-size: 22rpx;
			font-weight: 500;
		}
	}

	/* 重置按钮 - 项目蓝色渐变风格 */
	.detail-btn-reset {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);

		&:active {
			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
		}

		.btn-label {
			color: #fff;
		}
	}

	/* 主按钮（开始/暂停）- 项目橙色渐变风格（与计时器卡片一致） */
	.detail-btn-main {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
		box-shadow: 0 8rpx 24rpx rgba(250, 140, 22, 0.4);
		gap: 8rpx;

		&:active {
			box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3);
		}

		.btn-label {
			color: #fff;
			font-size: 26rpx;
			font-weight: 600;
		}
	}

	/* 记录按钮 - 项目绿色渐变风格 */
	.detail-btn-record {
		background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
		box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.4);

		&:active {
			box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
		}

		.btn-label {
			color: #fff;
		}
	}

	/* 记录按钮禁用状态 */
	.detail-btn-record.disabled {
		background: #d9d9d9;
		box-shadow: none;
		pointer-events: none;

		.btn-label {
			color: #8c8c8c;
		}
	}
</style>