<template>
	<view class="grades-container">
		<!-- 项目选择卡片 -->
		<view class="filter-card ">
			<view class="card-title">
				<u-icon name="grid" size="18" color="#1890ff"></u-icon>
				<text>选择项目</text>
			</view>
			<view class="picker-row" @click="showProject = true">
				<text class="picker-text" :class="{ placeholder: !selectProcet }">{{ selectProcet || '请选择项目' }}</text>
				<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
			</view>
		</view>
		

		<!-- 排名列表区域 -->
		<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">最快用时：{{ formatTime(item.quicklyTime ) }}</text>
					</view>

					<view class="speed-detail">
						<text class="detail-text">{{ Service.formatDate(item.addTime,2) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-card" v-if="selectProcet && gradeList.length === 0">
			<u-icon name="file-text" size="64" color="#d9d9d9"></u-icon>
			<text class="empty-text">暂无排名数据</text>
		</view>
		
		<!-- 项目选择弹窗 -->
		<up-popup :show="showProject" mode="center" round="32" :safeAreaInsetBottom="false"
			@close="showProject = false">
			<view class="project-popup-content">
				<view class="modal-header">
					<text class="modal-title">选择项目</text>
					<view class="modal-close" @click="showProject = false">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="popup-project-list">
					<view class="project-list-inner">
						<view v-for="(project, index) in projectOptions[0]" :key="project.planId" class="project-item"
							@click="selectProcetFunc(project)">
							<view class="item-info">
								<text class="item-name">{{ project.name }}</text>
							</view>
						</view>
						<view v-if="!projectOptions[0] || projectOptions[0].length === 0" class="empty-project">
							<text class="empty-text">暂无项目</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		
	</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>>([[]])

	interface StudentGrade {
		id: string
		name: string
		bestSpeed: number
		bestTime: number
		recordDate: string
		studentId: string
	}

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

	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.name
		selectId.value = e.planId
		loadProjectGrades(selectId.value)
	}

	const loadProjectGrades = (projectId: string) => {
		PlanService.GetRankData(projectId).then(res => {
			if (res.code == 0) {
				gradeList.value = res.data.list
				showProject.value=false
			} else {
				Service.Msg(res.msg)
			}
		})
	}
	
	// 格式化时间显示
	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 handleRankingClick = (item: StudentGrade) => {
		console.log('点击了排名项:', item)
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #e8ecf3;
	}

	.grades-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 40rpx;
	}

	/* 通用卡片 */
	.filter-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.card-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
	}

	.picker-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 24rpx;
		background: #f5f7fa;
		border-radius: 12rpx;
		border: 1rpx solid #e4e8ee;
		transition: all 0.2s;

		&:active {
			background: #eef1f6;
		}

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

			&.placeholder {
				color: #999;
				font-weight: 400;
			}
		}
	}

	/* 排名区域 */
	.ranking-section {
		margin-top: 4rpx;
	}

	.stats-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.stat-item {
			text-align: center;

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

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

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

	.ranking-list {
		.ranking-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			transition: all 0.2s;
			position: relative;
			overflow: hidden;

			&:active {
				transform: scale(0.99);
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
			}

			&.top-three {
				border-left-color: #ffd700;
			}

			.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 8rpx 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-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: #f5f7fa;
					padding: 6rpx 12rpx;
					border-radius: 6rpx;
				}
			}
		}
	}

	/* 空状态 */
	.empty-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		margin-top: 4rpx;

		.empty-text {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	
	/* 项目选择弹窗 */
	.project-popup-content {
		width: 680rpx;
		max-height: 70vh;
		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
		border-radius: 32rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.25), 0 0 0 1rpx rgba(0, 0, 0, 0.04);
	}
	
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 32rpx 28rpx;
		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
	
		.modal-title {
			font-size: 36rpx;
			font-weight: 700;
			background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
	
		.modal-close {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	
			&:active {
				background: linear-gradient(135deg, #e8e8e8 0%, #e0e0e0 100%);
				transform: scale(0.92);
			}
		}
	}
	
	.popup-project-list {
		max-height: 55vh;
		padding: 24rpx 28rpx;
	}
	
	.project-list-inner {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
	
	.project-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 20rpx 24rpx;
		background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06), 0 0 0 1rpx rgba(0, 0, 0, 0.04) inset;
		position: relative;
		overflow: hidden;
		border-radius: 16rpx;
	
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 4rpx;
			height: 100%;
			background: linear-gradient(180deg, #1890ff 0%, #40a9ff 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}
	
		&:active::after {
			opacity: 1;
		}
	
		.item-icon {
			flex-shrink: 0;
	
			.icon-bg {
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #36cfc9 100%);
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
				position: relative;
	
				&::before {
					content: '';
					position: absolute;
					top: 6rpx;
					right: 6rpx;
					width: 10rpx;
					height: 10rpx;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 50%;
				}
	
				.icon-text {
					font-size: 28rpx;
					color: #fff;
					font-weight: 700;
					letter-spacing: 2rpx;
				}
			}
		}
	
		.item-info {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
	
			.item-name {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				letter-spacing: 1rpx;
			}
		}
	}
	
</style>
