<template>
	<view class="container">
		<view class="content">
			<view v-if="studentList.length === 0" class="empty-box">
				<image src="/static/icon-img/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无学员数据</text>
			</view>
			<view v-else class="student-list">
				<view v-for="(item, index) in studentList" :key="index" class="student-item" @click="goToDetail(item)">
					<view class="student-card">
						<view class="student-avatar">
							<image :src="item.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="avatar-img"></image>
						</view>
						<view class="student-info">
							<view class="student-name">{{item.name}}</view>
							<view class="info-row">
								<text class="info-label">所属校区：</text>
								<text class="info-value">{{item.campus}}</text>
							</view>
							<view class="info-row">
								<text class="info-label">剩余课程：</text>
								<text class="info-value">{{item.remainingCourses}}节</text>
							</view>
							<view class="info-row">
								<text class="info-label">到期时间：</text>
								<text class="info-value">{{item.expiryDate}}</text>
							</view>
						</view>
						<view class="arrow-right">
							<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<AQTabber />
	</view>
</template>

<script>
	import AQTabber from "@/components/AQ/AQTabber.vue"
	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
				studentList: []
			}
		},
		onLoad() {
			this.getStudentList();
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			getStudentList() {
				// 模拟数据，实际开发中应该从API获取
				// const res = await memberApi.getStudentList({});
				// if(res.code == 1) {
				//   this.studentList = res.data || [];
				// } else {
				//   uni.showToast({
				//     title: res.msg || '获取学员列表失败',
				//     icon: 'none'
				//   });
				// }
				
				// 使用模拟数据
				this.studentList = [
					{
						id: 1,
						name: '张三',
						avatar: '/static/icon-img/avatar.png',
						campus: '总部校区',
						remainingCourses: 10,
						expiryDate: '2023-12-31'
					},
					{
						id: 2,
						name: '李四',
						avatar: '/static/icon-img/avatar.png',
						campus: '西区校区',
						remainingCourses: 5,
						expiryDate: '2023-11-15'
					},
					{
						id: 3,
						name: '王五',
						avatar: '/static/icon-img/avatar.png',
						campus: '东区校区',
						remainingCourses: 15,
						expiryDate: '2024-01-20'
					},
					{
						id: 4,
						name: '赵六',
						avatar: '/static/icon-img/avatar.png',
						campus: '南区校区',
						remainingCourses: 8,
						expiryDate: '2023-11-30'
					},
					{
						id: 5,
						name: '刘七',
						avatar: '/static/icon-img/avatar.png',
						campus: '北区校区',
						remainingCourses: 20,
						expiryDate: '2024-02-15'
					},
					{
						id: 6,
						name: '陈八',
						avatar: '/static/icon-img/avatar.png',
						campus: '总部校区',
						remainingCourses: 3,
						expiryDate: '2023-10-30'
					}
				];
			},
			goToDetail(student) {
				uni.navigateTo({
					url: `/pages/market/clue/clue_info?resource_sharing_id=25`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		.empty-img {
			width: 200rpx;
			height: 200rpx;
		}
		
		.empty-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.student-list {
		.student-item {
			margin-bottom: 20rpx;
		}
		
		.student-card {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}
		
		.student-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			overflow: hidden;
			margin-right: 30rpx;
			
			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}
		
		.student-info {
			flex: 1;
		}
		
		.student-name {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
			color: #333;
		}
		
		.info-row {
			display: flex;
			font-size: 26rpx;
			margin-top: 8rpx;
			
			.info-label {
				color: #666;
			}
			
			.info-value {
				color: #333;
			}
		}
		
		.arrow-right {
			padding-left: 20rpx;
		}
	}
</style> 