<template>
	<view class="timing-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">计时数据</text>
				<text class="subtitle">计时项目训练记录统计</text>
			</view>
		</view>

		<!-- 日历组件 -->
		<view class="calendar-wrapper">
			<uni-calendar
				:insert="true"
				:lunar="false"
				:show-month="true"
				:selected="selectedDates"
				@monthSwitch="handleMonthSwitch"
				@change="handleDateChange">
			</uni-calendar>
		</view>

		<!-- 选中日期数据统计 -->
		<!-- 仅在选择了日期时显示统计信息 -->
		<view class="date-summary" v-if="selectedDate">
			<view class="summary-item">
				<text class="summary-label">选中日期</text>
				<text class="summary-value">{{ selectedDate }}</text>
			</view>
			<view class="summary-divider"></view>
			<view class="summary-item">
				<text class="summary-label">训练人数</text>
				<text class="summary-value">{{ tableData.length }}人</text>
			</view>
			<view class="summary-divider"></view>
			<view class="summary-item">
				<text class="summary-label">平均速度</text>
				<text class="summary-value">{{ averageSpeed }}m/s</text>
			</view>
		</view>

		<!-- 数据表格 -->
		<!-- 仅在选择了日期时显示表格 -->
		<view class="table-section" v-if="selectedDate">
			<sl-table
				:columns="columns"
				:tableData="tableData"
				@cell-click="handleCellClick">
				<!-- 空数据插槽 -->
				<template #empty>
					<view class="empty-container">
						<view class="empty-icon">
							<u-icon name="file-text" size="80" color="#ccc"></u-icon>
						</view>
						<text class="empty-text">该日期暂无训练数据</text>
					</view>
				</template>
			</sl-table>
		</view>

		<!-- 未选择日期提示 -->
		<!-- 未选择日期时显示提示信息 -->
		<view class="hint-state" v-if="!selectedDate">
			<view class="hint-icon">
				<u-icon name="calendar" size="80" color="#1890ff"></u-icon>
			</view>
			<text class="hint-text">请选择日期查看数据</text>
		</view>
	</view>
</template>

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

	// ==================== 响应式数据定义 ====================

	// 当前年份，用于月份切换时记录当前年份
	const currentYear = ref(new Date().getFullYear())

	// 当前月份（1-12），用于月份切换时记录当前月份
	const currentMonth = ref(new Date().getMonth() + 1)

	// 当前选中的日期，格式为 'YYYY-MM-DD'
	// 空字符串表示未选择日期
	const selectedDate = ref('')

	// ==================== 表格配置 ====================

	// 表格列定义
	// label: 列标题
	// prop: 数据项中对应的字段名
	// width: 列宽度
	const columns = ref([
		{
			label: '姓名',
			prop: 'name',
			width: '100px'
		},
		{
			label: '项目名称',
			prop: 'projectName',
			width: '150px'
		},
		{
			label: '最大速度',
			prop: 'maxSpeed',
			width: '120px'
		},
		{
			label: '计时数据',
			prop: 'timingData',
			width: '150px'
		}
	])

	// ==================== TypeScript 接口定义 ====================

	// 表格数据项接口定义
	// 描述一条计时记录的数据结构
	interface TableDataItem {
		name: string				// 学员姓名
		projectName: string			// 项目名称（如：100米自由泳）
		maxSpeed: number				// 最大速度，单位：m/s
		timingData: string				// 计时数据（如：1.23, 1.25, 1.24）
	}

	// ==================== 响应式数据 - 表格数据 ====================

	// 表格数据列表
	// 存储当前选中日期的所有计时记录
	// 初始状态为空数组，等待用户选择日期后加载数据
	const tableData = ref<TableDataItem[]>([])

	// ==================== 响应式数据 - 日历标记 ====================

	// 日历打点数据
	// 用于在日历上标记有训练记录的日期
	// date: 日期字符串，格式为 'YYYY-MM-DD'
	// info: 显示在日期上的标记信息
	const selectedDates = ref([
		{ date: '2026-03-12', info: '训练' },
		{ date: '2026-03-14', info: '训练' },
		{ date: '2026-03-16', info: '训练' },
		{ date: '2026-03-19', info: '训练' },
		{ date: '2026-03-24', info: '训练' }
	])

	// ==================== 计算属性 ====================

	// 平均速度计算属性
	// 计算当前选中日期所有学员的平均最大速度
	// 如果没有数据则返回 0
	const averageSpeed = computed(() => {
		// 如果没有数据，返回 0
		if (tableData.value.length === 0) return 0

		// 计算所有学员最大速度的总和
		const total = tableData.value.reduce((sum, item) => sum + item.maxSpeed, 0)

		// 计算平均值，保留两位小数
		return (total / tableData.value.length).toFixed(2)
	})

	// ======================= 模拟数据 ====================

	// 模拟的训练数据
	// 键为日期字符串，值为该日期的计时记录列表
	// 在实际项目中，这里应该从后端 API 获取数据
	const mockData: Record<string, TableDataItem[]> = {
		'2026-03-12': [
			{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.35s, 25.42s, 25.28s' },
			{ name: '李小红', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.15s, 27.32s, 27.08s' },
			{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.22, timingData: '24.68s, 24.75s, 24.62s' }
		],
		'2026-03-14': [
			{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.18, timingData: '25.12s, 25.18s, 25.08s' },
			{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.02, timingData: '26.85s, 26.92s, 26.78s' },
			{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.92, timingData: '27.95s, 28.12s, 27.88s' },
			{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.25, timingData: '24.52s, 24.58s, 24.48s' }
		],
		'2026-03-16': [
			{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.12, timingData: '25.55s, 25.62s, 25.48s' },
			{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.05, timingData: '26.72s, 26.85s, 26.68s' }
		],
		'2026-03-19': [
			{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.20, timingData: '24.98s, 25.05s, 24.92s' },
			{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.08, timingData: '26.45s, 26.52s, 26.38s' },
			{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.95, timingData: '27.75s, 27.88s, 27.65s' },
			{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.28, timingData: '24.35s, 24.42s, 24.28s' },
			{ name: '陈小刚', projectName: '50米自由泳', maxSpeed: 1.88, timingData: '28.25s, 28.38s, 28.15s' }
		],
		'2026-03-24': [
			{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.30s, 25.38s, 25.25s' },
			{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.10, timingData: '26.25s, 26.32s, 26.18s' },
			{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.65s, 27.78s, 27.55s' }
		]
	}

	// ==================== 生命周期钩子 ====================

	// 页面加载时触发
	// 在页面初始化时执行，只执行一次
	onLoad(() => {
		// 加载当前月份的数据
		loadData()
	})

	// 页面显示时触发
	// 每次页面从后台切换到前台时执行
	// 可用于刷新页面显示的数据
	onShow(() => {
		// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
		// 例如：调用接口获取最新数据
	})

	// ==================== 业务逻辑方法 ====================

	/**
	 * 加载数据
	 * 调用后端 API 获取数据
	 * 当前为模拟数据，实际开发中应替换为真实 API 调用
	 */
	const loadData = () => {
		// TODO: 调用后端 API 获取数据
		// 示例代码：
		// Service.Request('/api/timing/data', 'GET', {
		// 	year: currentYear.value,
		// 	month: currentMonth.value
		// }).then(res => {
		// 	// 处理返回的数据
		// })
	}

	/**
	 * 处理表格单元格点击事件
	 * @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
	 */
	const handleCellClick = (event: any) => {
		// 在控制台输出点击事件信息，用于调试
		console.log('表格单元格点击事件:', event)

		// TODO: 根据业务需求处理单元格点击
		// 例如：点击某行可以查看详细信息，点击某列可以进行排序等
	}

	/**
	 * 处理日历月份切换事件
	 * 当用户切换日历的月份时触发
	 * @param e 切换事件对象，包含 year 和 month 属性
	 */
	const handleMonthSwitch = (e: any) => {
		// 更新当前年份
		currentYear.value = e.year

		// 更新当前月份
		currentMonth.value = e.month

		// 重新加载数据
		// 获取切换后月份的训练记录和日历标记
		loadData()

		// 清空选中的日期
		// 因为切换了月份，之前选择的日期可能不再显示
		selectedDate.value = ''

		// 清空表格数据
		tableData.value = []
	}

	/**
	 * 处理日历日期选择事件
	 * 当用户点击日历上的某个日期时触发
	 * @param e 选择事件对象，fulldate 属性包含完整的日期字符串
	 */
	const handleDateChange = (e: any) => {
		// 获取选择的完整日期，格式为 'YYYY-MM-DD'
		const date = e.fulldate

		// 更新选中的日期
		selectedDate.value = date

		// 根据选择的日期加载对应的训练数据
		// 检查模拟数据中是否存在该日期的数据
		if (mockData[date]) {
			// 如果存在，加载数据
			tableData.value = mockData[date]
		} else {
			// 如果不存在，清空数据（表格将显示空状态）
			tableData.value = []
		}

		// TODO: 实际项目中应该调用 API 获取该日期的计时数据
		// 示例代码：
		// Service.Request('/api/timing/detail', 'GET', {
		// 	date: date
		// }).then(res => {
		// 	// 处理返回的数据并更新表格
		// 	tableData.value = res.data
		// })
	}
</script>

<style lang="scss" scoped>
	// 页面背景色设置
	page {
		background-color: #f5f5f5;
	}

	// 页面容器
	.timing-container {
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* ==================== 页面标题区域 ==================== */
	.header-section {
		background-color: #fff;
		padding: 32rpx 28rpx 24rpx;
		margin-bottom: 20rpx;

		.header-title {
			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

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

	/* ==================== 日历组件包装 ==================== */
	.calendar-wrapper {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
	}

	/* ==================== 日期数据统计卡片 ==================== */
	.date-summary {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		// 统计项
		.summary-item {
			text-align: center;

			// 标签文字
			.summary-label {
				font-size: 24rpx;
				color: #999;
				display: block;
				margin-bottom: 8rpx;
			}

			// 数值文字
			.summary-value {
				font-size: 32rpx;
				font-weight: 700;
				color: #1890ff;
			}
		}

		// 分隔线
		.summary-divider {
			width: 1rpx;
			height: 50rpx;
			background-color: #eee;
		}
	}

	/* ==================== 表格区域 ==================== */
	.table-section {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* ==================== 空状态容器 ==================== */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;

		// 空状态图标
		.empty-icon {
			margin-bottom: 24rpx;
		}

		// 空状态文字
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	/* ==================== 提示状态容器 ==================== */
	// 用于在用户未选择日期时显示提示
	.hint-state {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 80rpx 40rpx;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		// 提示图标
		.hint-icon {
			margin-bottom: 24rpx;
		}

		// 提示文字
		.hint-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	/* ==================== sl-table 样式覆盖 ==================== */
	// 表格容器
	::v-deep .sl-table {
		width: 100%;
	}

	// 表头背景色 - 使用蓝色渐变（计时功能的主色调）
	::v-deep .sl-table__header {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
	}

	// 表头单元格样式
	::v-deep .sl-table__header__cell {
		color: #fff !important;
		font-weight: 700;
		font-size: 28rpx;
	}

	// 表格单元格样式
	::v-deep .sl-table__body__cell {
		font-size: 26rpx;
		color: #333;
		padding: 24rpx 16rpx;
	}

	// 偶数行背景色
	::v-deep .sl-table__body__row:nth-child(even) {
		background-color: #fafafa !important;
	}

	// 奇数行背景色
	::v-deep .sl-table__body__row:nth-child(odd) {
		background-color: #fff !important;
	}
</style>
