<!--学员体测数据页面-->
<template>
	<view class="main_box">
		<!-- 自定义导航栏 -->
		<view class="navbar_section">
			<view class="navbar_back" @click="goBack">
				<text class="back_icon">‹</text>
			</view>
			<view class="navbar_title">体测数据</view>
			<view class="navbar_action">
				<view class="share_button" @click="sharePhysicalTest" v-if="physicalTestList.length > 0">
					<text class="share_text">分享</text>
				</view>
			</view>
		</view>
		
		<!-- 学员基本信息 -->
		<view class="student_basic_section" v-if="studentInfo">
			<view class="student_name">{{ studentInfo.name }}</view>
			<view class="student_meta">
				<text class="meta_item">{{ studentInfo.gender_text }}</text>
				<text class="meta_item">{{ studentInfo.age }}岁</text>
				<text class="meta_item">身高: {{ studentInfo.height }}cm</text>
				<text class="meta_item">体重: {{ studentInfo.weight }}kg</text>
			</view>
		</view>
		
		<!-- 数据统计卡片 -->
		<view class="stats_section">
			<view class="stat_card">
				<view class="stat_number">{{ physicalTestList.length }}</view>
				<view class="stat_label">测试次数</view>
			</view>
			<view class="stat_card">
				<view class="stat_number">{{ latestScore || 0 }}</view>
				<view class="stat_label">最新得分</view>
			</view>
			<view class="stat_card">
				<view class="stat_number">{{ improvementRate }}%</view>
				<view class="stat_label">提升率</view>
			</view>
		</view>
		
		<!-- 筛选器 -->
		<view class="filter_section">
			<view class="filter_tabs">
				<view 
					v-for="tab in filterTabs" 
					:key="tab.value"
					:class="['filter_tab', activeFilter === tab.value ? 'active' : '']"
					@click="changeFilter(tab.value)"
				>
					{{ tab.text }}
				</view>
			</view>
		</view>
		
		<!-- 体测记录列表 -->
		<view class="test_list_section">
			<view v-if="loading" class="loading_section">
				<view class="loading_text">加载中...</view>
			</view>
			
			<view v-else-if="filteredTestList.length === 0" class="empty_section">
				<view class="empty_icon">📊</view>
				<view class="empty_text">暂无体测数据</view>
				<view class="empty_hint">完成体测后数据会在这里显示</view>
			</view>
			
			<view v-else class="test_list">
				<view 
					v-for="test in filteredTestList" 
					:key="test.id"
					class="test_item"
					@click="viewTestDetail(test)"
				>
					<view class="test_header">
						<view class="test_date">{{ formatDate(test.test_date) }}</view>
						<view :class="['test_score',getScoreClass(test.total_score)]">
							{{ test.total_score }}分
						</view>
					</view>
					
					<view class="test_items">
						<view 
							v-for="item in test.test_items" 
							:key="item.project_name"
							class="test_item_row"
						>
							<view class="item_name">{{ item.project_name }}</view>
							<view class="item_value">
								<text class="value_text">{{ item.test_value }}{{ item.unit }}</text>
								<text class="score_text">{{ item.score }}分</text>
							</view>
						</view>
					</view>
					
					<view class="test_footer" v-if="test.remark">
						<view class="test_remark">备注：{{ test.remark }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load_more_section" v-if="!loading && hasMore">
			<fui-button 
				background="transparent" 
				color="#666"
				@click="loadMoreTests"
				:loading="loadingMore"
			>
				{{ loadingMore ? '加载中...' : '加载更多' }}
			</fui-button>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js'
	
	export default {
		data() {
			return {
				studentId: 0,
				studentInfo: {},
				physicalTestList: [],
				filteredTestList: [],
				loading: false,
				loadingMore: false,
				hasMore: true,
				currentPage: 1,
				activeFilter: 'all',
				filterTabs: [
					{ value: 'all', text: '全部' },
					{ value: 'latest', text: '最近3次' },
					{ value: 'excellent', text: '优秀' },
					{ value: 'good', text: '良好' }
				]
			}
		},
		
		computed: {
			latestScore() {
				if (this.physicalTestList.length === 0) return 0
				return this.physicalTestList[0].total_score
			},
			
			improvementRate() {
				if (this.physicalTestList.length < 2) return 0
				const latest = this.physicalTestList[0].total_score
				const previous = this.physicalTestList[1].total_score
				if (previous === 0) return 0
				return Math.round(((latest - previous) / previous) * 100)
			}
		},
		
		onLoad(options) {
			this.studentId = parseInt(options.student_id) || 0
			if (this.studentId) {
				this.initPage()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
			}
		},
		
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			async initPage() {
				await this.loadStudentInfo()
				await this.loadPhysicalTests()
			},
			
			async loadStudentInfo() {
				try {
					// 模拟获取学员信息
					const mockStudentInfo = {
						id: this.studentId,
						name: '小明',
						gender_text: '男',
						age: 8,
						height: 130,
						weight: 28
					}
					this.studentInfo = mockStudentInfo
				} catch (error) {
					console.error('获取学员信息失败:', error)
				}
			},
			
			async loadPhysicalTests() {
				this.loading = true
				try {
					console.log('加载体测数据:', this.studentId)
					
					// 模拟API调用
					// const response = await apiRoute.getPhysicalTestList({
					//     student_id: this.studentId,
					//     page: this.currentPage,
					//     limit: 10
					// })
					
					// 使用模拟数据
					const mockResponse = {
						code: 1,
						data: {
							list: [
								{
									id: 1,
									test_date: '2024-01-15',
									total_score: 85,
									level: 'good',
									remark: '本次测试表现良好，身体素质有所提升',
									test_items: [
										{
											project_name: '身高',
											test_value: '130',
											unit: 'cm',
											score: 20,
											standard_value: '125-135'
										},
										{
											project_name: '体重',
											test_value: '28',
											unit: 'kg', 
											score: 18,
											standard_value: '25-32'
										},
										{
											project_name: '50米跑',
											test_value: '9.2',
											unit: '秒',
											score: 22,
											standard_value: '8.5-10.0'
										},
										{
											project_name: '立定跳远',
											test_value: '145',
											unit: 'cm',
											score: 25,
											standard_value: '140-160'
										}
									]
								},
								{
									id: 2,
									test_date: '2023-12-10',
									total_score: 78,
									level: 'good',
									remark: '整体表现不错，速度项目需要加强',
									test_items: [
										{
											project_name: '身高',
											test_value: '128',
											unit: 'cm',
											score: 20,
											standard_value: '125-135'
										},
										{
											project_name: '体重',
											test_value: '27',
											unit: 'kg',
											score: 18,
											standard_value: '25-32'
										},
										{
											project_name: '50米跑',
											test_value: '9.8',
											unit: '秒',
											score: 18,
											standard_value: '8.5-10.0'
										},
										{
											project_name: '立定跳远',
											test_value: '138',
											unit: 'cm',
											score: 22,
											standard_value: '140-160'
										}
									]
								},
								{
									id: 3,
									test_date: '2023-11-05',
									total_score: 92,
									level: 'excellent',
									remark: '各项指标都很优秀，继续保持',
									test_items: [
										{
											project_name: '身高',
											test_value: '126',
											unit: 'cm',
											score: 20,
											standard_value: '125-135'
										},
										{
											project_name: '体重',
											test_value: '26',
											unit: 'kg',
											score: 20,
											standard_value: '25-32'
										},
										{
											project_name: '50米跑',
											test_value: '8.8',
											unit: '秒',
											score: 25,
											standard_value: '8.5-10.0'
										},
										{
											project_name: '立定跳远',
											test_value: '155',
											unit: 'cm',
											score: 27,
											standard_value: '140-160'
										}
									]
								}
							],
							total: 3,
							has_more: false
						}
					}
					
					if (mockResponse.code === 1) {
						const newList = mockResponse.data.list || []
						if (this.currentPage === 1) {
							this.physicalTestList = newList
						} else {
							this.physicalTestList = [...this.physicalTestList, ...newList]
						}
						
						this.hasMore = mockResponse.data.has_more || false
						this.applyFilter()
						console.log('体测数据加载成功:', this.physicalTestList)
					} else {
						uni.showToast({
							title: mockResponse.msg || '获取体测数据失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取体测数据失败:', error)
					uni.showToast({
						title: '获取体测数据失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					this.loadingMore = false
				}
			},
			
			async loadMoreTests() {
				if (this.loadingMore || !this.hasMore) return
				
				this.loadingMore = true
				this.currentPage++
				await this.loadPhysicalTests()
			},
			
			changeFilter(filterValue) {
				this.activeFilter = filterValue
				this.applyFilter()
			},
			
			applyFilter() {
				let filteredList = [...this.physicalTestList]
				
				switch (this.activeFilter) {
					case 'latest':
						filteredList = filteredList.slice(0, 3)
						break
					case 'excellent':
						filteredList = filteredList.filter(test => test.total_score >= 90)
						break
					case 'good':
						filteredList = filteredList.filter(test => test.total_score >= 80 && test.total_score < 90)
						break
					case 'all':
					default:
						// 不需要过滤
						break
				}
				
				this.filteredTestList = filteredList
			},
			
			getScoreClass(score) {
				if (score >= 90) return 'excellent'
				if (score >= 80) return 'good'
				if (score >= 70) return 'average'
				return 'poor'
			},
			
			formatDate(dateString) {
				const date = new Date(dateString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			
			viewTestDetail(test) {
				// 跳转到详情页面或者展示详情弹窗
				console.log('查看体测详情:', test)
				uni.showModal({
					title: '体测详情',
					content: `测试日期：${this.formatDate(test.test_date)}\n总分：${test.total_score}分\n备注：${test.remark || '无'}`,
					showCancel: false
				})
			},
			
			async sharePhysicalTest() {
				try {
					uni.showLoading({
						title: '生成分享图片...'
					})
					
					// 模拟生成分享图片
					await new Promise(resolve => setTimeout(resolve, 1500))
					
					// 模拟分享
					const mockShareResult = {
						code: 1,
						data: {
							image_url: '/static/temp/physical_test_share.jpg',
							share_title: `${this.studentInfo.name}的体测报告`
						}
					}
					
					if (mockShareResult.code === 1) {
						uni.hideLoading()
						uni.showActionSheet({
							itemList: ['保存到相册', '分享给朋友'],
							success: (res) => {
								if (res.tapIndex === 0) {
									uni.showToast({
										title: '已保存到相册',
										icon: 'success'
									})
								} else if (res.tapIndex === 1) {
									uni.showToast({
										title: '分享功能开发中',
										icon: 'none'
									})
								}
							}
						})
					} else {
						throw new Error('生成分享图片失败')
					}
				} catch (error) {
					console.error('分享失败:', error)
					uni.hideLoading()
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.main_box {
	background: #f8f9fa;
	min-height: 100vh;
}

// 自定义导航栏
.navbar_section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #29D3B4;
	padding: 40rpx 32rpx 20rpx;
	
	// 小程序端适配状态栏
	// #ifdef MP-WEIXIN
	padding-top: 80rpx;
	// #endif
	
	.navbar_back {
		width: 60rpx;
		
		.back_icon {
			color: #fff;
			font-size: 40rpx;
			font-weight: 600;
		}
	}
	
	.navbar_title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.navbar_action {
		width: 60rpx;
		display: flex;
		justify-content: flex-end;
		
		.share_button {
			background: rgba(255, 255, 255, 0.2);
			padding: 8rpx 16rpx;
			border-radius: 16rpx;
			
			.share_text {
				color: #fff;
				font-size: 24rpx;
			}
		}
	}
}

// 学员基本信息
.student_basic_section {
	background: #fff;
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #f0f0f0;
	
	.student_name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.student_meta {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		
		.meta_item {
			font-size: 24rpx;
			color: #666;
			background: #f0f0f0;
			padding: 6rpx 12rpx;
			border-radius: 12rpx;
		}
	}
}

// 统计卡片
.stats_section {
	display: flex;
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 32rpx 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	
	.stat_card {
		flex: 1;
		text-align: center;
		
		.stat_number {
			font-size: 36rpx;
			font-weight: 600;
			color: #29D3B4;
			margin-bottom: 8rpx;
		}
		
		.stat_label {
			font-size: 24rpx;
			color: #666;
		}
	}
}

// 筛选器
.filter_section {
	background: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 24rpx 32rpx;
	
	.filter_tabs {
		display: flex;
		gap: 16rpx;
		
		.filter_tab {
			padding: 12rpx 24rpx;
			font-size: 26rpx;
			color: #666;
			background: #f8f9fa;
			border-radius: 20rpx;
			
			&.active {
				color: #fff;
				background: #29D3B4;
			}
		}
	}
}

// 体测记录列表
.test_list_section {
	margin: 0 20rpx;
	
	.loading_section, .empty_section {
		background: #fff;
		border-radius: 16rpx;
		padding: 80rpx 32rpx;
		text-align: center;
		
		.loading_text, .empty_text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 12rpx;
		}
		
		.empty_icon {
			font-size: 80rpx;
			margin-bottom: 24rpx;
		}
		
		.empty_hint {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.test_list {
		.test_item {
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
			
			.test_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				
				.test_date {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}
				
				.test_score {
					font-size: 32rpx;
					font-weight: 600;
					padding: 8rpx 16rpx;
					border-radius: 16rpx;
					
					&.excellent {
						color: #27ae60;
						background: rgba(39, 174, 96, 0.1);
					}
					
					&.good {
						color: #f39c12;
						background: rgba(243, 156, 18, 0.1);
					}
					
					&.average {
						color: #3498db;
						background: rgba(52, 152, 219, 0.1);
					}
					
					&.poor {
						color: #e74c3c;
						background: rgba(231, 76, 60, 0.1);
					}
				}
			}
			
			.test_items {
				.test_item_row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16rpx 0;
					border-bottom: 1px solid #f8f9fa;
					
					&:last-child {
						border-bottom: none;
					}
					
					.item_name {
						font-size: 26rpx;
						color: #333;
					}
					
					.item_value {
						display: flex;
						align-items: center;
						gap: 12rpx;
						
						.value_text {
							font-size: 26rpx;
							color: #666;
						}
						
						.score_text {
							font-size: 24rpx;
							color: #29D3B4;
							font-weight: 600;
						}
					}
				}
			}
			
			.test_footer {
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1px solid #f8f9fa;
				
				.test_remark {
					font-size: 24rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}
	}
}

// 加载更多
.load_more_section {
	padding: 40rpx 20rpx 80rpx;
}
</style>