<template>
	<view class="grades-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">成绩排名</text>
				<text class="subtitle">学生最佳成绩排名</text>
			</view>
		</view>

		<!-- 项目选择区域 -->
		<view class="select-section">
			<view class="select-label">
				<view class="label-text" style="margin-bottom: 20rpx;">选择项目</view>
				<view class="picker-wrapper" @click="showProject=true">
					<text class="picker-text">{{ selectProcet || '请选择项目' }}</text>
					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<up-picker v-model:show="showProject" keyName="name" valueName="planId" @confirm="selectProcetFunc"
			:columns="projectOptions"></up-picker>


		<!-- ==================== 排名列表区域 ==================== -->
		<!-- 仅在选择了项目且有数据时显示 -->
		<view class="ranking-section" v-if="selectProcet && gradeList.length > 0">
			<!-- 排名统计卡片 -->
			<view class="stats-card">
				<view class="stat-item">
					<text class="stat-label">对比项目</text>
					<text class="stat-value">{{ selectProcet }}</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-label">参与人数</text>
					<text class="stat-value">{{ gradeList.length }}人</text>
				</view>
			</view>

			<!-- 排名列表 -->
			<view class="ranking-list">
				<view v-for="(item, index) in gradeList" :key="item.id"
					:class="['ranking-item', { 'top-three': index < 3 }]" @click="handleRankingClick(item)">
					<!-- 排名徽章 -->
					<view class="rank-badge" :class="`rank-${index + 1}`">
						<text class="rank-number">{{ index + 1 }}</text>
					</view>

					<!-- 学生信息 -->
					<view class="student-info">
						<text class="student-name">{{ item.studentName }}</text>
						<text class="student-speed">最快用时：{{ item.quicklyTime }}s</text>
					</view>

					<!-- 成绩详情 -->
					<view class="speed-detail">
						<text class="detail-text">日期：{{ Service.formatDate(item.addTime,2)}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	// ==================== 响应式数据 - 项目相关 ====================

	// 项目选择
	let showProject = ref(false)
	let selectProcet = ref('')
	let selectId = ref('')

	const projectOptions = ref<Array<any>>([[]])

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

	/**
	 * 学生成绩接口
	 * 定义学生的成绩和排名信息
	 */
	interface StudentGrade {
		id : string				// 学生 ID
		name : string			// 学生姓名
		bestSpeed : number		// 最快速度（m/s）
		bestTime : number			// 最快用时（秒）
		recordDate : string		// 记录日期
		studentId : string		// 学生 ID（用于数据关联）
	}

	// ==================== 响应式数据 - 排名相关 ====================

	// 排名列表数据
	const gradeList = ref<StudentGrade[]>([])

	// 最高速度（计算属性）
	const maxSpeed = computed(() => {
		if (gradeList.value.length === 0) return 0
		return Math.max(...gradeList.value.map(item => item.bestSpeed)).toFixed(2)
	})

	

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

	/**
	 * 页面加载时触发
	 * 在页面初始化时执行，只执行一次
	 */
	onLoad(() => {
		// 初始化数据
		getProjectData()
	})



	// ==================== 业务逻辑方法 - 项目相关 ====================

	const getProjectData = () => {
		PlanService.GetPlanListNoPage('计时项目').then(res => {
			if (res.code == 0) {
				projectOptions.value[0] = res.data.list
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const selectProcetFunc = (e : any) => {
		selectProcet.value = e.value[0].name
		selectId.value = e.value[0].planId
		loadProjectGrades(selectId.value)
	}

	/**
	 * 加载项目排名数据
	 * 根据项目 ID 获取该项目的学生成绩排名列表
	 * @param projectId 项目 ID
	 */
	const loadProjectGrades = (projectId : string) => {
		PlanService.GetRankData(projectId).then(res => {
			if (res.code == 0) {
				gradeList.value=res.data.list
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	// ==================== 业务逻辑方法 - 排名相关 ====================

	/**
	 * 处理排名项点击事件
	 * 点击某排名项查看详情
	 * @param item 排名项数据
	 */
	const handleRankingClick = (item : StudentGrade) => {
		console.log('点击了排名项:', item)
		// TODO: 跳转到学生详情页面
		// Service.GoPage('/pages/student/detail', { studentId: item.studentId })
	}
</script>

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

	// 页面容器
	.grades-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;
			}
		}
	}

	/* ==================== 项目选择区域 ==================== */
	.select-section {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 28rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;

		.select-label {
			margin-bottom: 16rpx;

			.label-text {
				font-size: 26rpx;
				font-weight: 600;
				color: #666;
			}
		}

		.picker-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			background-color: #f8f8f8;
			border-radius: 12rpx;
			border: 1rpx solid #e8e8e8;
			transition: all 0.3s ease;

			&:active {
				background-color: #f0f0f0;
				border-color: #faad14;
				transform: scale(0.98);
			}

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



	/* ==================== 排名列表区域 ==================== */
	.ranking-section {
		margin: 0 20rpx;

		// 统计卡片
		.stats-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 6rpx;
				// background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
				border-radius: 20rpx 0 0 20rpx;
			}

			.stat-item {
				text-align: center;

				.stat-label {
					font-size: 24rpx;
					color: #999;
					display: block;
					margin-bottom: 8rpx;
				}

				.stat-value {
					font-size: 32rpx;
					font-weight: 700;
					color: #1890ff;
				}
			}

			.stat-divider {
				width: 1rpx;
				height: 50rpx;
				background-color: #eee;
			}
		}

		// 排名列表容器
		.ranking-list {

			// 排名项
			.ranking-item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 24rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 6rpx;
					// background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
					opacity: 0;
					transition: opacity 0.3s ease;
					border-radius: 20rpx 0 0 20rpx;
				}

				&:active {
					transform: scale(0.98);
					box-shadow: 0 4rpx 16rpx rgba(235, 47, 150, 0.15);

					&::before {
						opacity: 1;
					}
				}

				// 排名徽章
				.rank-badge {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					background-color: #f0f0f0;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

					.rank-number {
						font-size: 24rpx;
						font-weight: 700;
						color: #999;
					}

					// 前三名特殊颜色
					&.rank-1 {
						background: linear-gradient(135deg, #ffd700 0%, #ffec3d 100%);
						box-shadow: 0 2rpx 8.6rpx rgba(255, 215, 0, 0.4);

						.rank-number {
							color: #fff;
							font-size: 28rpx;
						}
					}

					&.rank-2 {
						background: linear-gradient(135deg, #c0c0c0 0%, #d9d9d9 100%);
						box-shadow: 0 2rpx 8rpx rgba(192, 192, 192, 0.4);

						.rank-number {
							color: #fff;
						}
					}

					&.rank-3 {
						background: linear-gradient(135deg, #cd7f32 0%, #e6963d 100%);
						box-shadow: 0 2rpx 8rpx rgba(205, 127, 50, 0.4);

						.rank-number {
							color: #fff;
						}
					}
				}

				// 学生头像
				.student-avatar {
					width: 70rpx;
					height: 70rpx;
					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					box-shadow: 0 2rpx 8rpx rgba(235, 47, 150, 0.3);

					.avatar-text {
						font-size: 28rpx;
						font-weight: 700;
						color: #fff;
					}
				}

				// 学生信息
				.student-info {
					flex: 1;
					min-width: 0;

					.student-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333;
						display: block;
						margin-bottom: 8rpx;
					}

					.student-speed {
						font-size: 26rpx;
						color: #1890ff;
						font-weight: 500;
					}
				}

				// 成绩详情
				.speed-detail {
					display: flex;
					align-items: center;
					gap: 16rpx;
					flex-shrink: 0;

					.detail-text {
						font-size: 24rpx;
						color: #999;
						background-color: #f5f5f5;
						padding: 6rpx 12rpx;
						border-radius: 6rpx;
					}
				}
			}
		}
	}
</style>