<!--家长端用户信息管理页面-->
<template>
	<view class="main_box">
		<view class="navbar_section">
			<view class="title">用户信息</view>
		</view>
		
		<!-- 家长信息展示 -->
		<view class="parent_info_section">
			<view class="parent_name">{{ parentInfo.name || '张家长' }}</view>
			<view class="parent_phone">{{ parentInfo.phone_number || '13800138000' }}</view>
		</view>
		
		
		<!-- 选中孩子信息弹窗 -->
		<view class="child_popup" v-if="showChildPopup" @click="closeChildPopup">
			<view class="popup_content" @click.stop>
				<view class="popup_header">
					<view class="popup_title">选择孩子</view>
					<view class="popup_close" @click="closeChildPopup">×</view>
				</view>
				<view class="popup_children_list">
					<view 
						v-for="child in childrenList" 
						:key="child.id"
						:class="['popup_child_item', selectedChild && selectedChild.id === child.id ? 'selected' : '']"
						@click="selectChildFromPopup(child)"
					>
						<view class="popup_child_info">
							<view class="popup_child_name">{{ child.name }}</view>
							<view class="popup_child_details">
								<text class="popup_detail_tag">{{ child.gender === 1 ? '男' : '女' }}</text>
								<text class="popup_detail_tag">{{ Math.floor(child.age) }}岁</text>
							</view>
							<view class="popup_child_campus">{{ child.campus_name || '未分配' }}</view>
							<view class="popup_child_class">{{ child.class_name || '未分配' }}</view>
						</view>
						<view class="popup_child_courses">{{ child.remaining_courses || 0 }}课时</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 当前选中孩子的统计信息 -->
		<view class="selected_child_section" v-if="selectedChild">
			<view class="selected_child_header">
				<view class="selected_child_info">
					<view class="selected_child_name">{{ selectedChild.name }}</view>
					<view class="selected_child_details">
						<text class="selected_detail_tag">{{ selectedChild.gender === 1 ? '男' : '女' }}</text>
						<text class="selected_detail_tag">{{ Math.floor(selectedChild.age) }}岁</text>
						<text class="selected_detail_tag">{{ selectedChild.campus_name || '未分配校区' }}</text>
					</view>
				</view>
				<view class="switch_button" @click="openChildPopup">切换</view>
			</view>
			
			<view class="stats_grid">
				<view class="stat_item">
					<view class="stat_number">{{ selectedChild.total_courses || 0 }}</view>
					<view class="stat_label">总课程</view>
				</view>
				<view class="stat_item">
					<view class="stat_number">{{ selectedChild.completed_courses || 0 }}</view>
					<view class="stat_label">已完成</view>
				</view>
				<view class="stat_item">
					<view class="stat_number">{{ selectedChild.remaining_courses || 0 }}</view>
					<view class="stat_label">剩余课时</view>
				</view>
				<view class="stat_item">
					<view class="stat_number">{{ selectedChild.attendance_rate || 0 }}%</view>
					<view class="stat_label">出勤率</view>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 - 九宫格样式 -->
		<view class="main_section">
			<view class="grid_container">
				<view class="grid_item" @click="viewChildDetail">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/tou.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">孩子详情</view>
				</view>
				
				<view class="grid_item" @click="viewCourses">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/kkry.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">课程管理</view>
				</view>
				
				<view class="grid_item" @click="viewMaterials">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/liu.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">教学资料</view>
				</view>
				
				<view class="grid_item" @click="viewServices">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/notice.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">服务管理</view>
				</view>
				
				<view class="grid_item" @click="viewOrders">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/used.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">订单管理</view>
				</view>
				
				<view class="grid_item" @click="viewMessages">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/notice.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">消息管理</view>
				</view>
				
				<view class="grid_item" @click="viewContracts">
					<view class="grid_icon">
						<image :src="$util.img('/static/icon-img/warn.png')" class="icon_image"></image>
					</view>
					<view class="grid_text">合同管理</view>
				</view>
				
				<!-- 空白占位，保持九宫格对齐 -->
				<view class="grid_item empty_item"></view>
				<view class="grid_item empty_item"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import apiRoute from '@/api/apiRoute.js'

export default {
	data() {
		return {
			parentInfo: {},
			childrenList: [],
			showChildPopup: false,
			loading: false
		}
	},
	computed: {
		...mapState(['selectedChild'])
	},
	onLoad() {
		// 设置用户角色为家长
		this.setUserRole('parent')
		this.loadChildrenList()
		console.log('用户信息页面加载完成')
	},
	
	onShow() {
		// 页面显示时刷新数据
		console.log('用户信息页面显示')
	},
	methods: {
		...mapMutations(['SET_USER_ROLE', 'SET_SELECTED_CHILD', 'SET_CHILDREN_LIST']),
		
		setUserRole(role) {
			this.SET_USER_ROLE(role)
		},
		
		async loadChildrenList() {
			this.loading = true
			try {
				console.log('开始加载孩子列表...')
				const response = await apiRoute.parent_getChildrenList()
				console.log('孩子列表响应:', response)
				
				if (response.code === 1) {
					this.childrenList = response.data.data || []
					this.parentInfo = response.data.parent_info || {}
					this.SET_CHILDREN_LIST(this.childrenList)
					
					console.log('加载到的孩子列表:', this.childrenList)
					console.log('家长信息:', this.parentInfo)
					
					// 如果没有选中的孩子且有孩子列表，默认选中第一个
					if (!this.selectedChild && this.childrenList.length > 0) {
						this.SET_SELECTED_CHILD(this.childrenList[0])
					}
				} 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
			}
		},
		
		
		openChildPopup() {
			this.showChildPopup = true
		},
		
		closeChildPopup() {
			this.showChildPopup = false
		},
		
		selectChildFromPopup(child) {
			this.SET_SELECTED_CHILD(child)
			console.log('选中孩子:', child)
			this.closeChildPopup()
		},
		
		viewChildDetail() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/user-info/child-detail`, {
				childId: this.selectedChild.id
			})
		},
		
		viewCourses() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/courses/index`, {
				childId: this.selectedChild.id
			})
		},
		
		viewMaterials() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/materials/index`, {
				childId: this.selectedChild.id
			})
		},
		
		viewServices() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/services/index`, {
				childId: this.selectedChild.id
			})
		},
		
		viewOrders() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/orders/index`, {
				childId: this.selectedChild.id
			})
		},
		
		viewMessages() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/messages/index`, {
				childId: this.selectedChild.id
			})
		},
		
		viewContracts() {
			if (!this.selectedChild) {
				uni.showToast({
					title: '请先选择孩子',
					icon: 'none'
				})
				return
			}
			this.$navigateToPage(`/pages/parent/contracts/index`, {
				childId: this.selectedChild.id
			})
		}
	}
}
</script>

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

// 自定义导航栏
.navbar_section {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #29D3B4;

	.title {
		padding: 40rpx 20rpx;
		
		// 小程序端样式
		// #ifdef MP-WEIXIN
		padding: 80rpx 0 20rpx;
		// #endif
		
		font-size: 30rpx;
		color: #fff;
	}
}

// 家长信息
.parent_info_section {
	background: #fff;
	padding: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.parent_name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.parent_phone {
		font-size: 24rpx;
		color: #999;
	}
}


// 弹窗样式
.child_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;
	
	.popup_content {
		background: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-height: 70vh;
		overflow: hidden;
		
		.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_children_list {
			max-height: 60vh;
			overflow-y: auto;
			
			.popup_child_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				border-bottom: 1px solid #f8f9fa;
				
				&.selected {
					background: rgba(41, 211, 180, 0.1);
				}
				
				.popup_child_info {
					flex: 1;
					
					.popup_child_name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.popup_child_details {
						display: flex;
						gap: 12rpx;
						margin-bottom: 8rpx;
						
						.popup_detail_tag {
							font-size: 22rpx;
							color: #666;
							background: #f0f0f0;
							padding: 2rpx 8rpx;
							border-radius: 8rpx;
						}
					}
					
					.popup_child_campus, .popup_child_class {
						font-size: 22rpx;
						color: #999;
						margin-bottom: 4rpx;
					}
				}
				
				.popup_child_courses {
					font-size: 24rpx;
					color: #29d3b4;
					font-weight: 600;
				}
			}
		}
	}
}

// 选中孩子信息
.selected_child_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	
	.selected_child_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		
		.selected_child_info {
			flex: 1;
			
			.selected_child_name {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.selected_child_details {
				display: flex;
				gap: 12rpx;
				
				.selected_detail_tag {
					font-size: 22rpx;
					color: #666;
					background: #f0f0f0;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
				}
			}
		}
		
		.switch_button {
			background: #29d3b4;
			color: #fff;
			padding: 12rpx 24rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
	
	.stats_grid {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.stat_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;

			.stat_number {
				color: #29D3B4;
				font-size: 48rpx;
				font-weight: 600;
			}

			.stat_label {
				color: #AAAAAA;
				font-size: 24rpx;
			}
		}
	}
}

.main_section {
	margin-top: 20rpx;
	background: #f8f9fa;
	padding: 0 24rpx;
	padding-top: 40rpx;
	padding-bottom: 150rpx;
	
	.grid_container {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.grid_item {
			width: 30%;
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&.empty_item {
				// 空白占位项不显示任何内容
			}
			
			.grid_icon {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				background: rgba(41, 211, 180, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				
				.icon_image {
					width: 48rpx;
					height: 48rpx;
				}
			}
			
			.grid_text {
				font-size: 26rpx;
				color: #333;
				text-align: center;
				line-height: 1.2;
			}
		}
	}
}

// 箭头图标样式
.arrow-icon {
	width: 24rpx;
	height: 24rpx;
	opacity: 0.6;
}
</style>