<template>
	<view class="swim-timer-container">
		<up-navbar title="自由泳500米" :placeholder='true' :autoBack="true" @click="rightClick()" rightIcon='more-dot-fill'>
		</up-navbar>
		<view class="total-time-section">
			<text class="time-label">当前总用时</text>
			<view class="" style="position: relative;">
				<view class="total-time">{{ formatTime(currentTime) }}</view>
				<view class="" style="position: absolute; right: 0; bottom: 4rpx;">
					<view v-if="stopwatchMode!=='together'" @click="recordNextAthlete"
						style=" display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1rpx solid #e2e2e2; width: 70rpx; height: 70rpx; padding: 10rpx; border-radius: 50%;">
						<img :src="Service.GetIconImg('/static/index/Flag.png')" style="width: 35rpx; height: 35rpx;"
							alt="" />
					</view>
				</view>
			</view>
		</view>

		<!-- 选手列表 -->
		<view class="athletes-section">
			<view class="section-header">
				<text class="section-title">选手列表</text>
				<text class="athlete-count">{{ athletes.length }}位选手</text>
			</view>

			<view class="athletes-list">
				<view v-for="(athlete, index) in athletes" :key="athlete.id" @longpress="deleStu(athlete.id)"
					class="athlete-item" :class="{ finished: athlete.finished, fastest: athlete.isFastest }">
					<view class="athlete-number">{{ index+1 }}</view>
					<view class="athlete-info">
						<text class="athlete-name">{{ athlete.name }}</text>
						<text class="athlete-lane">{{ athlete.gender }} · {{ athlete.age }}岁</text>
					</view>
					<view class="time-wrapper">
						<text class="athlete-time">{{ formatTime(athlete.time) }}</text>
						<text v-if="athlete.bestTime" class="best-time">最快: {{ formatTime(athlete.bestTime) }}</text>
					</view>
					<view class="" style="display: flex;align-items: center; gap: 10rpx;">
						<view @click="handleAthleteFirstButton(athlete, index)">
							<u-icon name="pause-circle" bold="true" size="22" color="#1890ff"></u-icon>
						</view>
						<view @click="resetAthleteTime(athlete)">
							<u-icon name="reload" bold="true" size="24" color="#1890ff"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部控制按钮 -->
		<view class="control-buttons">
			<button class="start-btn" @click="startTimer" :disabled="isRunning">
				<u-icon name="play-right" size="24" color="#fff"></u-icon>
				<text class="btn-text">开始</text>
			</button>
			<button class="pause-btn" @click="stopTimer" :disabled="!isRunning">
				<u-icon name="pause" size="24" color="#fff"></u-icon>
				<text class="btn-text">暂停</text>
			</button>
			<button class="reset-all-btn" @click="resetAll">
				<u-icon name="reload" size="24" color="#fff"></u-icon>
				<text class="btn-text">重置</text>
			</button>
		</view>

		<!-- 更多选项弹出框 -->
		<view v-if="showMoreModal" class="modal-overlay" @click="closeMoreModal"></view>
		<view v-if="showMoreModal" class="more-modal">
			<view class="modal-item" @click="showStopwatchModal = true; showMoreModal = false">
				<u-icon name="clock" size="24" color="#1890ff"></u-icon>
				<text class="modal-item-text">调试秒表模式</text>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>
			<view class="modal-item" @click="showAddStudentModal = true; showMoreModal = false">
				<u-icon name="plus-circle" size="24" color="#52c41a"></u-icon>
				<text class="modal-item-text">添加学生</text>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>
			<view class="modal-cancel" @click="closeMoreModal">
				取消
			</view>
		</view>

		<!-- 秒表模式弹出框 -->
		<view v-if="showStopwatchModal" class="modal-overlay" @click="closeStopwatchModal"></view>
		<view v-if="showStopwatchModal" class="stopwatch-modal">
			<view class="modal-header">
				<text class="modal-title">秒表模式</text>
				<view class="modal-close" @click="closeStopwatchModal">
					<u-icon name="close" size="20" color="#999"></u-icon>
				</view>
			</view>
			<view class="modal-content">
				<view class="stopwatch-option" :class="{ active: stopwatchMode === 'interval' }"
					@click="stopwatchMode = 'interval'">
					<view class="option-radio">
						<view v-if="stopwatchMode === 'interval'" class="option-dot"></view>
					</view>
					<text class="option-text">间隔出发</text>
				</view>
				<view v-if="stopwatchMode === 'interval'" class="interval-input-wrapper">
					<view class="form-group">
						<text class="form-label">间隔时间（秒）</text>
						<input class="form-input" v-model="intervalTime" placeholder="请输入间隔时间" type="number" />
					</view>
				</view>
				<view class="stopwatch-option" :class="{ active: stopwatchMode === 'together' }"
					@click="stopwatchMode = 'together'">
					<view class="option-radio">
						<view v-if="stopwatchMode === 'together'" class="option-dot"></view>
					</view>
					<text class="option-text">一起出发</text>
				</view>
			</view>
			<view class="modal-footer">
				<button class="modal-confirm-btn" @click="confirmStopwatchMode">确定</button>
			</view>
		</view>

		<!-- 添加学生弹出框 -->
		<view v-if="showAddStudentModal" class="modal-overlay" @click="closeAddStudentModal"></view>
		<view v-if="showAddStudentModal" class="add-student-modal">
			<view class="modal-header">
				<text class="modal-title">添加学生</text>
				<view class="modal-close" @click="closeAddStudentModal">
					<u-icon name="close" size="20" color="#999"></u-icon>
				</view>
			</view>
			<view class="modal-content">
				<view class="form-group">
					<text class="form-label">姓名</text>
					<input class="form-input" v-model="newStudentName" placeholder="请输入姓名" type="text" />
				</view>
				<view class="form-group">
					<text class="form-label">性别</text>
					<radio-group class="radio-group" @change="onGenderChange">
						<label class="radio-item">
							<radio value="男" :checked="newStudentGender === '男'" color="#1890ff" />
							<text class="radio-text">男</text>
						</label>
						<label class="radio-item">
							<radio value="女" :checked="newStudentGender === '女'" color="#1890ff" />
							<text class="radio-text">女</text>
						</label>
					</radio-group>
				</view>
				<view class="form-group">
					<text class="form-label">出生日期</text>
					<view class="date-picker-wrapper" @click="openDatePicker">
						<view class="date-value" :class="{ placeholder: !newStudentBirthday }">
							{{ Service.formatDate(newStudentBirthday,2) || '请选择出生日期' }}
						</view>
						<u-icon name="calendar" size="20" color="#999"></u-icon>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">年龄</text>
					<input class="form-input" v-model="newStudentAge" placeholder="自动计算" type="text" disabled />
				</view>
			</view>
			<view class="modal-footer">
				<button class="modal-cancel-btn" @click="closeAddStudentModal">取消</button>
				<button class="modal-confirm-btn" @click="addNewStudent">添加</button>
			</view>
		</view>

		<!-- 悬浮保存按钮 -->
		<view class="float-save-btn" style="color: #fff; font-size: 24rpx;" @click="saveData">
			保存
		</view>

		<!-- 日期选择器 -->
		<u-datetime-picker v-model="newStudentBirthday" :show="showDatePicker" mode="date" @confirm="onDateConfirm" @cancel="showDatePicker = false" />
	</view>
</template>

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

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

	// 选手列表
	const athletes = ref<Athlete[]>([
		{ id: '1', number: '01', name: '张三', gender: '男', age: '18', birthday: '2006-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
		{ id: '2', number: '02', name: '李四', gender: '女', age: '17', birthday: '2007-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
		{ id: '3', number: '03', name: '王五', gender: '男', age: '19', birthday: '2005-01-01', time: 0, bestTime: null, finished: false, isFastest: false },
		{ id: '4', number: '04', name: '赵六', gender: '女', age: '18', birthday: '2006-01-01', time: 0, bestTime: null, finished: false, isFastest: false }
	])

	// 计时器状态
	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('')

	// 弹出框状态
	const showMoreModal = ref(false)
	const showStopwatchModal = ref(false)
	const showAddStudentModal = ref(false)

	// 新学生信息
	const newStudentName = ref('')
	const newStudentGender = ref('男')
	const newStudentBirthday = ref('')
	const newStudentAge = ref('')

	// 日期选择器相关
	const showDatePicker = ref(false)
	const currentDate = ref('')

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

	const deleStu = (id : any) => {
		uni.showModal({
			title: '提示', // 对话框标题
			content: '是否删除该学生', // 显示的内容
			showCancel: true, // 是否显示取消按钮
			success: function (res) {
				if (res.confirm) {
					let index = athletes.value.findIndex((item) => {
						return item.id == id
					})
					athletes.value.splice(index, 1)
				} else if (res.cancel) {

				}
			}
		});
	}

	// 格式化时间显示
	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) {
					athlete.time = elapsed
				}
			})
		}, 10)
	}

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

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

	// 记录下一个选手
	const recordNextAthlete = () => {
		if (currentAthleteIndex.value >= athletes.value.length) {
			Service.Msg('所有选手已完成')
			return
		}

		const athlete = athletes.value[currentAthleteIndex.value]
		athlete.finished = true
		athlete.time = currentTime.value

		// 更新最快记录
		if (athlete.bestTime === null || athlete.time < athlete.bestTime) {
			athlete.bestTime = athlete.time
		}

		// 更新最快选手
		updateFastestAthlete()

		currentAthleteIndex.value++

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

	// 更新最快选手
	const updateFastestAthlete = () => {
		// 先清除所有最快标记
		athletes.value.forEach(a => a.isFastest = false)

		// 找出已完成的选手
		const finished = athletes.value.filter(a => a.finished && a.time > 0)
		if (finished.length === 0) return

		// 找出时间最短的
		const fastest = finished.reduce((prev, curr) => {
			return prev.time < curr.time ? prev : curr
		})

		fastest.isFastest = true
	}

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

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

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

		athlete.finished = true
		athlete.time = currentTime.value

		// 更新最快记录
		if (athlete.bestTime === null || athlete.time < athlete.bestTime) {
			athlete.bestTime = athlete.time
		}

		// 更新最快选手
		updateFastestAthlete()

		// 检查是否所有选手都完成了
		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 resetAll = () => {
		stopTimer()
		currentTime.value = 0
		currentAthleteIndex.value = 0

		athletes.value.forEach(athlete => {
			athlete.time = 0
			athlete.finished = false
			athlete.isFastest = false
		})
	}

	// 右上角更多按钮点击
	const rightClick = () => {
		showMoreModal.value = true
	}

	// 关闭更多弹出框
	const closeMoreModal = () => {
		showMoreModal.value = false
	}

	// 关闭秒表模式弹出框
	const closeStopwatchModal = () => {
		showStopwatchModal.value = false
	}

	// 确认秒表模式
	const confirmStopwatchMode = () => {
		if (stopwatchMode.value === 'interval') {
			if (!intervalTime.value.trim()) {
				Service.Msg('请输入间隔时间')
				return
			}
			const intervalNum = parseFloat(intervalTime.value)
			if (isNaN(intervalNum) || intervalNum <= 0) {
				Service.Msg('请输入有效的间隔时间')
				return
			}
			Service.Msg(`已切换为间隔出发模式，间隔${intervalTime.value}秒`, 'success')
		} else {
			Service.Msg('已切换为一起出发模式', 'success')
		}
		showStopwatchModal.value = false
	}

	// 性别选择变化
	const onGenderChange = (e : any) => {
		newStudentGender.value = e.detail.value
	}

	// 打开日期选择器
	const openDatePicker = () => {
		showDatePicker.value = true
	}

	// 根据出生日期计算年龄
	const calculateAge = (birthday : string) : string => {
		const birthDate = new Date(birthday)
		const today = new Date()
		let age = today.getFullYear() - birthDate.getFullYear()
		const monthDiff = today.getMonth() - birthDate.getMonth()

		// 如果当前月份小于出生月份，或者月份相同但日期还没到，年龄减1
		if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
			age--
		}

		return age.toString()
	}

	// 日期选择确认
	const onDateConfirm = (e : any) => {
		let selectedDate = e
		if (Array.isArray(e) && e.length > 0) {
			selectedDate = e[0]
		} else if (e && e.value) {
			selectedDate = e.value
		}
		newStudentBirthday.value = selectedDate
		newStudentAge.value = calculateAge(selectedDate)
		showDatePicker.value = false
	}

	// 关闭添加学生弹出框
	const closeAddStudentModal = () => {
		showAddStudentModal.value = false
		newStudentName.value = ''
		newStudentGender.value = '男'
		newStudentBirthday.value = ''
		newStudentAge.value = ''
	}

	// 添加新学生
	const addNewStudent = () => {
		if (!newStudentName.value.trim()) {
			Service.Msg('请输入姓名')
			return
		}
		if (!newStudentBirthday.value.trim()) {
			Service.Msg('请选择出生日期')
			return
		}

		const newNumber = (athletes.value.length + 1).toString().padStart(2, '0')
		const newAthlete : Athlete = {
			id: Date.now().toString(),
			number: newNumber,
			name: newStudentName.value.trim(),
			gender: newStudentGender.value,
			age: newStudentAge.value.trim(),
			birthday: newStudentBirthday.value.trim(),
			time: 0,
			bestTime: null,
			finished: false,
			isFastest: false
		}

		athletes.value.push(newAthlete)
		Service.Msg('添加成功', 'success')
		closeAddStudentModal()
	}

	// 保存数据
	const saveData = () => {
		const data = {
			athletes: athletes.value,
			currentTime: currentTime.value,
			stopwatchMode: stopwatchMode.value,
			intervalTime: intervalTime.value
		}
		Service.SetStorageCache('swimTimingData', data)
		Service.Msg('保存成功', 'success')
	}

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

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

	/* 总用时区域 */
	.total-time-section {
		margin-top: 20rpx;
		text-align: center;
		margin-bottom: 60rpx;

		.time-label {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
			display: block;
		}

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

	/* 选手列表区域 */
	.athletes-section {
		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 {
			.athlete-item {
				display: flex;
				align-items: center;
				padding: 24rpx;
				margin-bottom: 16rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
				transition: all 0.3s;

				&.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: 4rpx;
						display: block;
					}

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

					.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: 600;
						color: #333333;
						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;
				}
			}
		}
	}

	/* 底部控制按钮 */
	.control-buttons {
		display: flex;
		gap: 20rpx;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;

		.start-btn,
		.pause-btn,
		.reset-all-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 12rpx;
			border: none;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			max-width: 220rpx;
		}

		.start-btn {
			background-color: #52c41a;
			color: #ffffff;

			&:disabled {
				background-color: #ccc;
			}
		}

		.pause-btn {
			background-color: #fa541c;
			color: #ffffff;

			&:disabled {
				background-color: #ccc;
			}
		}

		.reset-all-btn {
			background-color: #1890ff;
			color: #ffffff;
		}

		.btn-text {
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	/* 弹出框遮罩 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}

	/* 更多选项弹出框 */
	.more-modal {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		z-index: 999;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.modal-item {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.modal-item-text {
				flex: 1;
				font-size: 30rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}

		.modal-cancel {
			text-align: center;
			padding: 30rpx;
			font-size: 30rpx;
			color: #666;
			background-color: #f5f5f5;
			border-radius: 12rpx;
			margin-top: 20rpx;
		}
	}

	/* 秒表模式和添加学生弹出框 */
	.stopwatch-modal,
	.add-student-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		z-index: 999;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

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

			.modal-close {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.modal-content {
			padding: 30rpx;
		}

		.modal-footer {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid #f0f0f0;

			.modal-cancel-btn,
			.modal-confirm-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 12rpx;
				border: none;
				font-size: 30rpx;
				font-weight: 600;
			}

			.modal-cancel-btn {
				background-color: #f5f5f5;
				color: #666;
			}

			.modal-confirm-btn {
				background-color: #1890ff;
				color: #fff;
			}
		}
	}

	/* 秒表模式选项 */
	.stopwatch-option {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

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

		&.active {
			.option-radio {
				border-color: #1890ff;
			}
		}

		.option-radio {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #ddd;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			transition: all 0.3s;

			.option-dot {
				width: 18rpx;
				height: 18rpx;
				background-color: #1890ff;
				border-radius: 50%;
			}
		}

		.option-text {
			font-size: 30rpx;
			color: #333;
		}
	}

	/* 间隔时间输入框 */
	.interval-input-wrapper {
		padding: 20rpx 0 20rpx 56rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.form-group {
			margin-bottom: 0;

			.form-label {
				display: block;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 12rpx;
			}

			.form-input {
				width: 100%;
				height: 72rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	/* 表单组 */
	.form-group {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.form-label {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 12rpx;
		}

		.form-input {
			width: 100%;
			height: 80rpx;
			background-color: #f5f5f5;
			border-radius: 12rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	/* 性别单选按钮组 */
	.radio-group {
		display: flex;
		gap: 40rpx;

		.radio-item {
			display: flex;
			align-items: center;
			gap: 12rpx;

			.radio-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	/* 日期选择器包装 */
	.date-picker-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 0 24rpx;
		cursor: pointer;

		.date-value {
			font-size: 28rpx;
			color: #333;
			flex: 1;

			&.placeholder {
				color: #999;
			}
		}
	}

	/* 悬浮保存按钮 */
	.float-save-btn {
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #1890ff, #40a9ff);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
		z-index: 100;
	}
</style>