<!--学员端首页落地页-->
<template>
	<view class="main_box">
		<!-- 自定义导航栏 -->
		<view class="navbar_section">
			<view class="welcome_info">
				<view class="welcome_text">{{ welcomeText }}</view>
				<view class="date_info">今天是{{ currentWeekDay }}</view>
			</view>
		</view>
		
		<!-- 用户基本信息区域 -->
		<view class="user_info_section" v-if="userInfo">
			<view class="user_details">
				<view class="user_name">{{ userInfo.name || '家长' }} 你好</view>
				<view class="user_meta">
					<text class="meta_item">入会时间：{{ userInfo.create_year_month || '2024年01月' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 学员选择卡片 -->
		<view class="student_selector_section">
			<view class="selector_header">
				<view class="header_title">我的孩子</view>
				<view class="switch_button" @click="openStudentPopup">
					{{ studentList.length > 1 ? '切换' : '学员' }} ({{ studentList.length }})
				</view>
			</view>
			
			<!-- 当前选中学员信息 -->
			<view class="selected_student_card" v-if="selectedStudent">
				<view class="student_avatar">
					<image 
						:src="selectedStudent.headimg || '/static/default-avatar.png'" 
						class="avatar_image"
						mode="aspectFill"
					></image>
				</view>
				<view class="student_info">
					<view class="student_name">{{ selectedStudent.name }}</view>
					<view class="student_details">
						<text class="detail_tag">{{ selectedStudent.gender_text }}</text>
						<text class="detail_tag">{{ selectedStudent.age }}岁</text>
					</view>
				</view>
				<view class="student_stats">
					<view class="stat_item">
						<view class="stat_number">{{ selectedStudent.total_courses || 0 }}</view>
						<view class="stat_label">总课程</view>
					</view>
				</view>
			</view>
			
			<!-- 没有学员时的提示 -->
			<view class="no_student_card" v-else>
				<view class="no_student_text">暂无学员信息</view>
				<view class="no_student_hint">请联系管理员添加学员</view>
			</view>
		</view>

		<!-- 功能入口区域 -->
		<view class="functions_section">
			<view class="section_title">功能服务</view>
			<view class="functions_grid">
				<view class="function_item" @click="navigateToProfile">
					<view class="function_icon profile_icon">
						<image src="/static/icon-img/profile.png" class="icon_image"></image>
					</view>
					<view class="function_text">个人信息管理</view>
				</view>
				
				<view class="function_item" @click="navigateToPhysicalTest">
					<view class="function_icon physical_icon">
						<image src="/static/icon-img/chart.png" class="icon_image"></image>
					</view>
					<view class="function_text">体测数据</view>
				</view>
				
				<view class="function_item" @click="navigateToCourseSchedule">
					<view class="function_icon schedule_icon">
						<image src="/static/icon-img/calendar.png" class="icon_image"></image>
					</view>
					<view class="function_text">课程安排</view>
				</view>
				
				<view class="function_item" @click="navigateToCourseBooking">
					<view class="function_icon booking_icon">
						<image src="/static/icon-img/book.png" class="icon_image"></image>
					</view>
					<view class="function_text">课程预约</view>
				</view>
				
				<view class="function_item" @click="navigateToOrders">
					<view class="function_icon order_icon">
						<image src="/static/icon-img/order.png" class="icon_image"></image>
					</view>
					<view class="function_text">订单管理</view>
				</view>
				
				<view class="function_item" @click="navigateToContracts">
					<view class="function_icon contract_icon">
						<image src="/static/icon-img/contract.png" class="icon_image"></image>
					</view>
					<view class="function_text">合同管理</view>
				</view>
				
				<view class="function_item" @click="navigateToKnowledge">
					<view class="function_icon knowledge_icon">
						<image src="/static/icon-img/book-open.png" class="icon_image"></image>
					</view>
					<view class="function_text">知识库</view>
				</view>
				
				<view class="function_item" @click="navigateToMessages">
					<view class="function_icon message_icon">
						<image src="/static/icon-img/message.png" class="icon_image"></image>
					</view>
					<view class="function_text">消息管理</view>
					<view class="message_badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
				</view>
				
				<view class="function_item" @click="navigateToSettings">
					<view class="function_icon settings_icon">
						<image src="/static/icon-img/settings.png" class="icon_image"></image>
					</view>
					<view class="function_text">系统设置</view>
				</view>
			</view>
		</view>
		
		<!-- 学员选择弹窗 -->
		<view class="student_popup" v-if="showStudentPopup" @click="closeStudentPopup">
			<view class="popup_content" @click.stop>
				<view class="popup_header">
					<view class="popup_title">选择学员</view>
					<view class="popup_close" @click="closeStudentPopup">×</view>
				</view>
				<view class="popup_student_list">
					<view 
						v-for="student in studentList" 
						:key="student.id"
						:class="['popup_student_item', selectedStudent && selectedStudent.id === student.id ? 'selected' : '']"
						@click="selectStudentFromPopup(student)"
					>
						<view class="popup_student_avatar">
							<image 
								:src="student.headimg || '/static/default-avatar.png'" 
								class="popup_avatar_image"
								mode="aspectFill"
							></image>
						</view>
						<view class="popup_student_info">
							<view class="popup_student_name">{{ student.name }}</view>
							<view class="popup_student_details">
								<text class="popup_detail_tag">{{ student.gender_text }}</text>
								<text class="popup_detail_tag">{{ student.age }}岁</text>
							</view>
						</view>
						<view class="popup_select_icon" v-if="selectedStudent && selectedStudent.id === student.id">
							✓
						</view>
					</view>
				</view>
				
				<!-- 添加孩子按钮 -->
				<view class="popup_footer">
					<button class="add_child_button" @click="navigateToAddChild">
						<image src="/static/icon-img/add.png" class="add_icon"></image>
						添加孩子
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/member.js'
	
	export default {
		data() {
			return {
				userInfo: {},
				studentList: [],
				selectedStudent: null,
				showStudentPopup: false,
				loading: false,
				unreadCount: 0,
				currentWeekDay: ''
			}
		},
		computed: {
			welcomeText() {
				const hour = new Date().getHours()
				if (hour < 12) {
					return '早上好'
				} else if (hour < 18) {
					return '下午好'
				} else {
					return '晚上好'
				}
			}
		},
		onLoad() {
			this.initPage()
		},
		
		onShow() {
			// 页面显示时刷新数据
			this.refreshData()
		},
		
		methods: {
			async initPage() {
				this.setCurrentWeekDay()
				await this.loadUserInfo()
				await this.loadStudentList()
				this.loadUnreadMessageCount()
			},
			
			async refreshData() {
				await this.loadStudentList()
				this.loadUnreadMessageCount()
			},
			
			setCurrentWeekDay() {
				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				const today = new Date()
				this.currentWeekDay = weekDays[today.getDay()]
			},
			
			async loadUserInfo() {
				try {
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					if (userInfo) {
						this.userInfo = userInfo
						// 计算入会年月
						if (userInfo.create_time) {
							const createDate = new Date(userInfo.create_time)
							this.userInfo.create_year_month = `${createDate.getFullYear()}年${String(createDate.getMonth() + 1).padStart(2, '0')}月`
						}
					}
				} catch (error) {
					console.error('获取用户信息失败:', error)
				}
			},
			
			async loadStudentList() {
				this.loading = true
				try {
					console.log('开始加载学员列表...')
					
					// 调用真实API
					const response = await apiRoute.getStudentList()
					console.log('学员列表API响应:', response)
					
					if (response.code === 1) {
						this.studentList = response.data.list || []
						console.log('加载到的学员列表:', this.studentList)
						
						// 如果没有选中的学员且有学员列表，默认选中第一个
						if (!this.selectedStudent && this.studentList.length > 0) {
							this.selectedStudent = this.studentList[0]
							this.loadSelectedStudentSummary()
						}
					} else {
						console.error('获取学员列表失败:', response)
						uni.showToast({
							title: response.msg || '获取学员列表失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取学员列表失败:', error)
					uni.showToast({
						title: '获取学员列表失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			async loadSelectedStudentSummary() {
				if (!this.selectedStudent) return
				
				try {
					console.log('加载学员概览信息:', this.selectedStudent.id)
					
					// 调用真实API获取学员概览信息
					const response = await apiRoute.getStudentSummary(this.selectedStudent.id)
					console.log('学员概览API响应:', response)
					
					if (response.code === 1) {
						// 更新选中学员的概览信息
						Object.assign(this.selectedStudent, response.data)
						console.log('学员概览加载成功:', response.data)
					} else {
						console.error('获取学员概览失败:', response)
					}
				} catch (error) {
					console.error('获取学员概览失败:', error)
				}
			},
			
			async loadUnreadMessageCount() {
				try {
					// 调用真实API获取未读消息数量
					const response = await apiRoute.getUnreadMessageCount()
					console.log('未读消息数量API响应:', response)
					
					if (response.code === 1) {
						this.unreadCount = response.data.unread_count || 0
						console.log('未读消息数量:', this.unreadCount)
					}
				} catch (error) {
					console.error('获取未读消息数量失败:', error)
					this.unreadCount = 0
				}
			},
			
			openStudentPopup() {
				this.showStudentPopup = true
			},
			
			closeStudentPopup() {
				this.showStudentPopup = false
			},
			
			selectStudentFromPopup(student) {
				this.selectedStudent = student
				console.log('选中学员:', student)
				this.loadSelectedStudentSummary()
				this.closeStudentPopup()
			},
			
			// 导航到各个功能页面
			navigateToProfile() {
				try {
					if (!this.checkStudentSelected()) return
					const studentId = this.selectedStudent.student_id || this.selectedStudent.id
					console.log('准备跳转到个人信息管理页面, 学员ID:', studentId)
					
					const url = `/pages-student/profile/index?student_id=${studentId}`
					console.log('跳转URL：', url)
					
					uni.navigateTo({
						url: url
					})
				} catch (error) {
					console.error('导航方法执行错误:', error)
					uni.showToast({
						title: '导航出错',
						icon: 'none'
					})
				}
			},
			navigateToPhysicalTest() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/physical-test/index?student_id=${studentId}`
				})
			},
			
			navigateToCourseSchedule() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/schedule/index?student_id=${studentId}`
				})
			},
			
			navigateToCourseBooking() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/course-booking/index?student_id=${studentId}`
				})
			},
			
			navigateToOrders() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/orders/index?student_id=${studentId}`
				})
			},
			
			navigateToContracts() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/contracts/index?student_id=${studentId}`
				})
			},
			
			navigateToKnowledge() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/knowledge/index?student_id=${studentId}`
				})
			},
			
			navigateToMessages() {
				if (!this.checkStudentSelected()) return
				const studentId = this.selectedStudent.student_id || this.selectedStudent.id
				uni.navigateTo({
					url: `/pages-student/messages/index?student_id=${studentId}`
				})
			},
			
			navigateToSettings() {
				uni.navigateTo({
					url: '/pages-student/my/set_up'
				})
			},
			
			navigateToAddChild() {
				console.log('跳转到添加孩子页面')
				this.closeStudentPopup()
				uni.navigateTo({
					url: '/pages-student/child/add'
				})
			},
			
			checkStudentSelected() {
				if (!this.selectedStudent) {
					uni.showToast({
						title: '请先选择学员',
						icon: 'none'
					})
					return false
				}
				return true
			}
		}
	}
</script>

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

// 自定义导航栏
.navbar_section {
	background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%);
	padding: 40rpx 32rpx 32rpx;
	
	// 小程序端适配状态栏
	// #ifdef MP-WEIXIN
	padding-top: 80rpx;
	// #endif
	
	.welcome_info {
		color: #fff;
		
		.welcome_text {
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 8rpx;
		}
		
		.date_info {
			font-size: 24rpx;
			opacity: 0.9;
		}
	}
}

// 用户信息区域
.user_info_section {
	background: #fff;
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #f0f0f0;
	
	.user_details {
		.user_name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.user_meta {
			.meta_item {
				font-size: 24rpx;
				color: #666;
				margin-right: 24rpx;
			}
		}
	}
}

// 学员选择区域
.student_selector_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	
	.selector_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		
		.header_title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
		
		.switch_button {
			background: #29d3b4;
			color: #fff;
			padding: 8rpx 16rpx;
			border-radius: 16rpx;
			font-size: 22rpx;
		}
	}
	
	.selected_student_card {
		display: flex;
		align-items: center;
		gap: 24rpx;
		
		.student_avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			
			.avatar_image {
				width: 100%;
				height: 100%;
			}
		}
		
		.student_info {
			flex: 1;
			
			.student_name {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.student_details {
				display: flex;
				gap: 12rpx;
				
				.detail_tag {
					font-size: 22rpx;
					color: #666;
					background: #f0f0f0;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
				}
			}
		}
		
		.student_stats {
			text-align: center;
			
			.stat_item {
				.stat_number {
					color: #29D3B4;
					font-size: 32rpx;
					font-weight: 600;
				}
				
				.stat_label {
					color: #999;
					font-size: 22rpx;
				}
			}
		}
	}
	
	.no_student_card {
		text-align: center;
		padding: 40rpx 0;
		
		.no_student_text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 8rpx;
		}
		
		.no_student_hint {
			font-size: 24rpx;
			color: #999;
		}
	}
}

// 功能入口区域
.functions_section {
	margin: 20rpx;
	
	.section_title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 16rpx;
	}
	
	.functions_grid {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.function_item {
			width: 22%;
			margin-bottom: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			
			.function_icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;
				
				&.profile_icon { background: rgba(52, 152, 219, 0.15); }
				&.physical_icon { background: rgba(155, 89, 182, 0.15); }
				&.schedule_icon { background: rgba(241, 196, 15, 0.15); }
				&.booking_icon { background: rgba(230, 126, 34, 0.15); }
				&.order_icon { background: rgba(231, 76, 60, 0.15); }
				&.contract_icon { background: rgba(46, 204, 113, 0.15); }
				&.knowledge_icon { background: rgba(52, 73, 94, 0.15); }
				&.message_icon { background: rgba(41, 211, 180, 0.15); }
				&.settings_icon { background: rgba(95, 95, 95, 0.15); }
				
				.icon_image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			
			.function_text {
				font-size: 22rpx;
				color: #333;
				text-align: center;
				line-height: 1.2;
			}
			
			.message_badge {
				position: absolute;
				top: -4rpx;
				right: 14rpx;
				background: #ff4757;
				color: #fff;
				font-size: 18rpx;
				padding: 2rpx 8rpx;
				border-radius: 12rpx;
				min-width: 16rpx;
				text-align: center;
			}
		}
	}
}

// 学员选择弹窗
.student_popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	
	.popup_content {
		background: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-height: 60vh;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		
		.popup_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;
			
			.popup_title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.popup_close {
				font-size: 48rpx;
				color: #999;
				font-weight: 300;
			}
		}
		
		.popup_student_list {
			max-height: 50vh;
			overflow-y: auto;
			
			.popup_student_item {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx;
				border-bottom: 1px solid #f8f9fa;
				gap: 24rpx;
				
				&.selected {
					background: rgba(41, 211, 180, 0.1);
				}
				
				.popup_student_avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;
					
					.popup_avatar_image {
						width: 100%;
						height: 100%;
					}
				}
				
				.popup_student_info {
					flex: 1;
					
					.popup_student_name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.popup_student_details {
						display: flex;
						gap: 12rpx;
						
						.popup_detail_tag {
							font-size: 22rpx;
							color: #666;
							background: #f0f0f0;
							padding: 2rpx 8rpx;
							border-radius: 8rpx;
						}
					}
				}
				
				.popup_select_icon {
					color: #29d3b4;
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
		
		.popup_footer {
			padding: 32rpx;
			border-top: 1px solid #f0f0f0;
			
			.add_child_button {
				width: 100%;
				background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%);
				color: #fff;
				border: none;
				border-radius: 16rpx;
				padding: 24rpx 0;
				font-size: 28rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				
				.add_icon {
					width: 24rpx;
					height: 24rpx;
				}
				
				&:active {
					opacity: 0.8;
				}
			}
		}
	}
}

// 动画定义
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>