<template>
	<fui-modal :show="visible" width="700" @cancel="closePopup" :buttons="[{text: '关闭', type: 'default'}]" :showClose="true" @close="closePopup" @click="handleModalClick">
		<!-- 自定义关闭按钮 -->
		<template #header>
			<view class="custom-header">
				<text class="modal-title">课程安排详情</text>
				<view class="close-btn" @click="closePopup">
					<text class="close-icon">✕</text>
				</view>
			</view>
		</template>
		<view class="schedule-detail" v-if="scheduleInfo">
			<!-- 课程基本信息 -->
			<view class="section basic-info">
				<view class="section-title">基本信息</view>
				<view class="info-item">
					<text class="item-label">课程名称：</text>
					<text class="item-value">{{ scheduleInfo.course_name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">上课时间：</text>
					<text class="item-value">{{ scheduleInfo.course_date }} {{ scheduleInfo.time_slot }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">上课地点：</text>
					<text class="item-value">{{ scheduleInfo.campus_name ? scheduleInfo.campus_name + ' ' : '' }}{{ scheduleInfo.venue_name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">授课教练：</text>
					<text class="item-value">{{ scheduleInfo.coach_name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">课程状态：</text>
					<text :class="['item-value',statusClass]">{{ scheduleInfo.status_text }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">班级：</text>
					<text
						class="item-value">{{ scheduleInfo.class_info ? scheduleInfo.class_info.class_name : '无班级' }}</text>
				</view>
				<view class="info-item" v-if="scheduleInfo.course_duration">
					<text class="item-label">课时时长：</text>
					<text class="item-value">{{ scheduleInfo.course_duration }}分钟</text>
				</view>
				<view class="info-item" v-if="scheduleInfo.course_info">
					<text class="item-label">课程有效期：</text>
					<text class="item-value">{{ scheduleInfo.course_info.start_date }} 至 {{ scheduleInfo.course_info.end_date }}</text>
				</view>
			</view>


			<!-- 正式学员 -->
			<view class="section students-info">
				<view class="section-header">
					<view class="section-title">正式学员 ({{ formalStudents.length }}人)</view>
					<view class="arrange-student-btn" @click="handleArrangeStudent">
						<fui-icon name="plus" :size="16" color="#fff"></fui-icon>
						<text class="btn-text">安排学员</text>
					</view>
				</view>
				<view class="cards-grid" v-if="formalStudents && formalStudents.length > 0">
					<view class="student-card filled" v-for="(student, index) in formalStudents" :key="index" 
						@click="handleStudentClick(student, index)">
						<!-- 续费提醒徽章 -->
						<view v-if="student.needsRenewal && !student.isTrialStudent" class="renewal-badge">待续费</view>
						
						<!-- 体验课学员标识 -->
						<view v-if="student.isTrialStudent" class="trial-badge">体验课</view>
						
						<view class="avatar">{{ student.name.charAt(0) }}</view>
						<view class="student-info">
							<view class="student-name">{{ student.name }}</view>
							<view class="student-age">年龄：{{ student.age }}岁</view>
							<view class="course-status">课程状态：{{ student.courseStatus }}</view>
							<view class="course-arrangement">课程安排：{{ student.courseType === 'fixed' ? '固定课' : '临时课' }}</view>
							
							<!-- 体验课学员显示 -->
							<view v-if="student.isTrialStudent" class="trial-info">
								<view class="trial-hours">体验课时：{{ student.trialClassCount }}节</view>
							</view>
							
							<!-- 付费学员显示 -->
							<view v-else class="paid-student-info">
								<view class="remaining-hours">剩余课时：{{ student.remainingHours }}节</view>
								<view class="expiry-date">到期时间：{{ student.expiryDate || '未设置' }}</view>
								
								<!-- 课时进度条 -->
								<view class="progress-container">
									<view class="progress-label">
										<text>课时进度：{{ student.course_progress.used }}/{{ student.course_progress.total }}</text>
										<text class="progress-percentage">{{ student.course_progress.percentage }}%</text>
									</view>
									<view class="progress-bar">
										<view 
											class="progress-fill" 
											:style="{ width: student.course_progress.percentage + '%' }"
										></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty-list" v-else>
					<text>暂无正式学员参与此课程</text>
				</view>
			</view>

			<!-- 等待位学员 -->
			<view class="section waiting-info" v-if="waitingStudents && waitingStudents.length > 0">
				<view class="section-header">
					<view class="section-title">等待位 ({{ waitingStudents.length }}人)</view>
				</view>
				<view class="cards-grid">
					<view class="student-card filled waiting-filled" v-for="(student, index) in waitingStudents" :key="index" 
						@click="handleStudentClick(student, index)">
						<!-- 续费提醒徽章 -->
						<view v-if="student.needsRenewal && !student.isTrialStudent" class="renewal-badge">待续费</view>
						
						<!-- 体验课学员标识 -->
						<view v-if="student.isTrialStudent" class="trial-badge">体验课</view>
						
						<view class="avatar waiting-avatar">{{ student.name.charAt(0) }}</view>
						<view class="student-info">
							<view class="student-name">{{ student.name }}</view>
							<view class="student-age">年龄：{{ student.age }}岁</view>
							<view class="course-status">课程状态：{{ student.courseStatus }}</view>
							<view class="course-arrangement">课程安排：等待位</view>
							
							<!-- 体验课学员显示 -->
							<view v-if="student.isTrialStudent" class="trial-info">
								<view class="trial-hours">体验课时：{{ student.trialClassCount }}节</view>
							</view>
							
							<!-- 付费学员显示 -->
							<view v-else class="paid-student-info">
								<view class="remaining-hours">剩余课时：{{ student.remainingHours }}节</view>
								<view class="expiry-date">到期时间：{{ student.expiryDate || '未设置' }}</view>
								
								<!-- 课时进度条 -->
								<view class="progress-container">
									<view class="progress-label">
										<text>课时进度：{{ student.course_progress.used }}/{{ student.course_progress.total }}</text>
										<text class="progress-percentage">{{ student.course_progress.percentage }}%</text>
									</view>
									<view class="progress-bar">
										<view 
											class="progress-fill" 
											:style="{ width: student.course_progress.percentage + '%' }"
										></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<fui-button type="primary" @click="handleEditCourse">编辑课程</fui-button>
				<fui-button type="success" @click="handleAddNewCourse">新增课程</fui-button>
			</view>

		</view>

		<view class="loading" v-if="loading && !scheduleInfo">
			<fui-loading></fui-loading>
			<text class="loading-text">加载中...</text>
		</view>

		<view class="error-message" v-if="error && !scheduleInfo">
			<text>{{ errorMessage }}</text>
			<view class="retry-btn" @click="fetchScheduleDetail">
				<text>重试</text>
			</view>
		</view>
		
		<!-- 学员点名底部弹窗 -->
		<fui-modal :show="showAttendanceModal" title="学员点名" @cancel="closeAttendanceModal" :buttons="[]">
			<view class="attendance-modal" v-if="selectedStudent">
				<view class="student-info">
					<view class="student-avatar-large">
						<image :src="selectedStudent.avatar || $util.img('/static/icon-img/avatar.png')" mode="aspectFill"></image>
					</view>
					<view class="student-name-large">{{ selectedStudent.name }}</view>
					<view class="current-status">当前状态：{{ selectedStudent.status_text }}</view>
				</view>
				
				<view class="attendance-options">
					<view class="option-btn sign-in" @click="handleAttendanceAction('sign_in')">
						<text>签到</text>
					</view>
					<view class="option-btn leave" @click="handleAttendanceAction('leave')">
						<text>请假</text>
					</view>
					<view class="option-btn cancel" @click="closeAttendanceModal">
						<text>取消</text>
					</view>
				</view>
			</view>
		</fui-modal>
	</fui-modal>
</template>

<script>
	import api from '@/api/apiRoute.js';

	export default {
		name: 'ScheduleDetail',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			scheduleId: {
				type: [String, Number],
				default: null
			}
		},
		computed: {
			// 分离正式学员和等待位学员
			formalStudents() {
				if (!this.scheduleInfo || !this.scheduleInfo.students) return [];
				return this.scheduleInfo.students.filter(student => student.course_type !== 3);
			},
			waitingStudents() {
				if (!this.scheduleInfo || !this.scheduleInfo.students) return [];
				return this.scheduleInfo.students.filter(student => student.course_type === 3);
			},
			statusClass() {
				const statusMap = {
					'pending': 'status-pending',
					'upcoming': 'status-upcoming',
					'ongoing': 'status-ongoing',
					'completed': 'status-completed'
				};
				return statusMap[this.scheduleInfo?.status] || '';
			},
			studentList() {
				const statusMap = {
					0: 'status-absent',
					1: 'status-present',
					2: 'status-leave'
				};

				return this.studentListRaw ? this.studentListRaw.map(student => ({
					...student,
					statusClass: statusMap[student.status] || 'status-absent',
					status_text: this.getStatusText(student.status)
				})) : [];
			},
			// 计算课程进度百分比
			progressPercentage() {
				if (!this.scheduleInfo || !this.scheduleInfo.course_info) return 0;
				
				const totalHours = this.scheduleInfo.course_info.total_hours || 0;
				const usedHours = this.scheduleInfo.course_info.use_total_hours || 0;
				
				if (totalHours <= 0) return 0;
				
				const percentage = Math.round((usedHours / totalHours) * 100);
				return Math.min(percentage, 100); // 确保不超过100%
			}
		},
		data() {
			return {
				loading: false,
				error: false,
				errorMessage: '加载失败，请重试',
				scheduleInfo: null,
				showAttendanceModal: false,
				selectedStudent: null,
				selectedStudentIndex: -1
			}
		},
		watch: {
			visible(newVal) {
				if (newVal && this.scheduleId) {
					this.fetchScheduleDetail();
				}
			},
			scheduleId(newVal, oldVal) {
				// 只有在弹窗可见且scheduleId真正发生变化时才重新获取数据
				if (newVal && this.visible && newVal !== oldVal) {
					this.fetchScheduleDetail();
				}
			}
		},
		methods: {
			// 处理弹窗按钮点击
			handleModalClick(e) {
				// 如果点击的是关闭按钮，关闭弹窗
				if (e.index === 0) {
					this.closePopup();
				}
			},
			
			// 获取课程安排详情
			async fetchScheduleDetail() {
				if (!this.scheduleId) {
					this.error = true;
					this.errorMessage = '课程ID不能为空';
					return;
				}

				this.loading = true;
				this.error = false;
				this.scheduleInfo = null;

				try {
					// 调用真实API获取课程安排详情和学员信息
					const res = await api.courseScheduleDetail({
						schedule_id: this.scheduleId
					});
					
					if (res.code === 1) {
						// 处理课程安排基本信息
						const data = res.data;
						
						// 合并正式学员和等待位学员数据
						const allStudents = [
							...(data.formal_students || []),
							...(data.waiting_students || [])
						];
						
						this.scheduleInfo = {
							...data.schedule_info,
							// 确保包含教练姓名
							coach_name: data.schedule_info.coach_name || '未分配',
							// 合并所有学员数据并添加状态文本和必要字段
							students: allStudents.map(student => ({
								...student,
								status_text: this.getStatusText(student.status || 0),
								// 确保包含课程进度数据
								course_progress: student.course_progress || {
									total: student.totalHours || 0,
									used: student.usedHours || 0,
									remaining: student.remainingHours || 0,
									percentage: student.totalHours > 0 ? Math.round((student.usedHours / student.totalHours) * 100) : 0
								},
								// 确保包含续费和体验课标识
								needsRenewal: student.needsRenewal || false,
								isTrialStudent: student.isTrialStudent || false,
								// 确保包含课程状态和类型
								courseStatus: student.courseStatus || (student.person_type === 'student' ? '正式课' : '体验课'),
								courseType: student.schedule_type === 2 ? 'fixed' : 'temporary',
								// 确保包含年龄信息
								age: student.age || 0,
								// 确保包含体验课时信息
								trialClassCount: student.trialClassCount || 0,
								// 确保包含剩余课时和到期时间
								remainingHours: student.remainingHours || 0,
								expiryDate: student.expiryDate || ''
							}))
						};
						
						console.log('课程安排详情加载成功:', this.scheduleInfo);
					} else {
						uni.showToast({
							title: res.msg || '获取课程安排详情失败',
							icon: 'none'
						});
						this.error = true;
						this.errorMessage = res.msg || '获取课程安排详情失败';
					}
				} catch (error) {
					console.error('获取课程安排详情失败:', error);
					this.error = true;
					this.errorMessage = error.message || '获取课程安排详情失败，请重试';
				} finally {
					this.loading = false;
				}
			},

			// 关闭弹窗
			closePopup() {
				this.$emit('update:visible', false);
			},

			// 编辑课程操作
			handleEditCourse() {
				this.$emit('edit-course', {
					scheduleId: this.scheduleId,
					scheduleInfo: this.scheduleInfo
				});
				this.closePopup();
			},

			// 新增课程操作
			handleAddNewCourse() {
				this.$emit('add-new-course', {
					scheduleId: this.scheduleId,
					scheduleInfo: this.scheduleInfo,
					date: this.scheduleInfo?.course_date,
					timeSlot: this.scheduleInfo?.time_slot
				});
				this.closePopup();
			},

			// 学员点击处理
			handleStudentClick(student, index) {
				this.selectedStudent = student;
				this.selectedStudentIndex = index;
				this.showAttendanceModal = true;
			},

			// 关闭点名弹窗
			closeAttendanceModal() {
				this.showAttendanceModal = false;
				this.selectedStudent = null;
				this.selectedStudentIndex = -1;
			},

			// 处理点名操作
			async handleAttendanceAction(action) {
				if (!this.selectedStudent) return;
				
				const actionMap = {
					'sign_in': { status: 1, text: '已签到', apiMethod: 'studentCheckin' },
					'leave': { status: 2, text: '请假', apiMethod: 'studentLeave' }
				};
				
				if (actionMap[action]) {
					try {
						uni.showLoading({
							title: '处理中...'
						});

						// 准备API调用参数
						const apiData = {
							schedule_id: this.scheduleId,
							person_id: this.selectedStudent.person_id || this.selectedStudent.id,
						};
						
						// 根据学员类型传递不同的ID
						if (this.selectedStudent.student_id && this.selectedStudent.student_id > 0) {
							// 正式学员
							apiData.student_id = this.selectedStudent.student_id;
						} else if (this.selectedStudent.resources_id && this.selectedStudent.resources_id > 0) {
							// 客户资源
							apiData.resources_id = this.selectedStudent.resources_id;
						} else {
							// 如果都没有，尝试使用id字段
							if (this.selectedStudent.person_type === 'student') {
								apiData.student_id = this.selectedStudent.id;
							} else {
								apiData.resources_id = this.selectedStudent.id;
							}
						}
						
						// 添加调试信息
						console.log('签到API调用参数:', apiData);
						console.log('selectedStudent:', this.selectedStudent);

						// 如果是请假，可以添加请假备注（暂时为空，后续可扩展）
						if (action === 'leave') {
							apiData.remark = '';
						}

						// 调用对应的API
						const response = await api[actionMap[action].apiMethod](apiData);
						
						if (response.code === 1) {
							// API调用成功，更新前端状态
							this.selectedStudent.status = actionMap[action].status;
							this.selectedStudent.status_text = actionMap[action].text;
							this.selectedStudent.statusClass = this.getStudentStatusClass(actionMap[action].status);
							
							// 更新scheduleInfo中的学员信息
							if (this.scheduleInfo && this.scheduleInfo.students && this.selectedStudentIndex >= 0) {
								this.$set(this.scheduleInfo.students, this.selectedStudentIndex, this.selectedStudent);
							}
							
							// 发射事件给父组件
							this.$emit('student-attendance', {
								scheduleId: this.scheduleId,
								studentId: this.selectedStudent.id,
								action: action,
								status: actionMap[action].status,
								studentName: this.selectedStudent.name
							});
							
							uni.showToast({
								title: `${this.selectedStudent.name} ${actionMap[action].text}`,
								icon: 'success'
							});
						} else {
							// API调用失败
							uni.showToast({
								title: response.msg || `${actionMap[action].text}失败`,
								icon: 'none'
							});
						}
					} catch (error) {
						console.error(`${action} API调用失败:`, error);
						uni.showToast({
							title: `${actionMap[action].text}失败，请重试`,
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
				
				this.closeAttendanceModal();
			},

			// 获取学员状态样式类
			getStudentStatusClass(status) {
				const statusMap = {
					0: 'status-pending', // 待上课
					1: 'status-completed', // 已上课
					2: 'status-leave' // 请假
				};
				return statusMap[status] || '';
			},
			// 获取状态文本
			getStatusText(status) {
				const statusTextMap = {
					0: '待上课',
					1: '已上课',
					2: '请假'
				};
				return statusTextMap[status] || '未知状态';
			},
			
			// 处理安排学员按钮点击
			handleArrangeStudent() {
				// 跳转到课程安排详情页面进行学员管理
				const url = `/pages-market/clue/class_arrangement_detail?schedule_id=${this.scheduleId}`;
				console.log('跳转到学员管理页面:', url);
				uni.navigateTo({
					url: url,
					success: () => {
						// 关闭当前弹窗
						this.closePopup();
					},
					fail: (error) => {
						console.error('跳转到学员管理页面失败:', error);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 自定义头部样式 */
	.custom-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #2a2a2a;
		border-bottom: 1px solid #3a3a3a;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #29d3b4;
	}

	.close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.close-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	.close-btn:active {
		background: rgba(255, 255, 255, 0.3);
	}

	.close-icon {
		font-size: 24rpx;
		color: #999;
		font-weight: bold;
		line-height: 1;
	}

	.schedule-detail {
		padding: 20rpx;
		max-height: 80vh;
		overflow-y: auto;
		position: relative;
	}

	.section {
		margin-bottom: 30rpx;
		background-color: #2a2a2a;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #3a3a3a;
		padding-bottom: 10rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #29d3b4;
		flex: 1;
	}

	.arrange-student-btn {
		display: flex;
		align-items: center;
		padding: 8rpx 16rpx;
		background-color: #29d3b4;
		border-radius: 6rpx;
		cursor: pointer;
		transition: background-color 0.3s;
		
		&:hover {
			background-color: #22a68b;
		}
		
		&:active {
			background-color: #1e9680;
		}
	}

	.btn-text {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.info-item {
		display: flex;
		margin-bottom: 16rpx;
		font-size: 28rpx;
	}

	.item-label {
		color: #999;
		width: 160rpx;
		flex-shrink: 0;
	}

	.item-value {
		color: #fff;
		flex: 1;
	}


	.student-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.student-item {
		display: flex;
		align-items: center;
		background-color: #3a3a3a;
		border-radius: 8rpx;
		padding: 15rpx;
		width: calc(50% - 10rpx);
		cursor: pointer;
		transition: background-color 0.3s;

		&:active {
			background-color: #4a4a4a;
		}
	}

	.student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
		margin-right: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.student-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.student-name {
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 8rpx;
	}

	.student-status {
		font-size: 24rpx;
	}

	.status-pending {
		color: #ff9500;
	}

	.status-upcoming {
		color: #29d3b4;
	}

	.status-ongoing {
		color: #007aff;
	}

	.status-completed {
		color: #8e8e93;
	}

	.status-leave {
		color: #ff3b30;
	}

	.status-absent {
		color: #8e8e93;
	}

	.status-present {
		color: #29d3b4;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		gap: 30rpx;
	}


	.loading,
	.error-message {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #ccc;
	}

	.error-message {
		color: #ff6b6b;
		font-size: 28rpx;
		text-align: center;
	}

	.retry-btn {
		margin-top: 30rpx;
		padding: 12rpx 30rpx;
		background-color: #29d3b4;
		border-radius: 8rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.empty-list {
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}

	/* 学员点名弹窗样式 */
	.attendance-modal {
		padding: 20rpx;
	}

	.student-info {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.student-avatar-large {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		margin: 0 auto 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.student-name-large {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.current-status {
		font-size: 24rpx;
		color: #999;
	}

	.attendance-options {
		display: flex;
		gap: 20rpx;
		justify-content: center;
	}

	.option-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 12rpx;
		min-width: 120rpx;
		cursor: pointer;
		transition: opacity 0.3s;

		text {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #fff;
		}

		&:active {
			opacity: 0.7;
		}
	}

	.option-btn.sign-in {
		background-color: #29d3b4;
	}

	.option-btn.leave {
		background-color: #ff9500;
	}

	.option-btn.cancel {
		background-color: #8e8e93;
	}

	/* 学员卡片网格样式 */
	.cards-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-top: 20rpx;
	}

	.student-card {
		background: #3a3a3a;
		border-radius: 12rpx;
		padding: 20rpx;
		min-height: 200rpx;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
		border: 2px solid transparent;
	}

	.student-card.filled {
		border-color: #29d3b4;
	}

	.student-card.waiting-filled {
		border-color: #8b5cf6;
		background: #2a2a3a;
	}

	.student-card:active {
		transform: scale(0.98);
		background-color: #4a4a4a;
	}

	/* 徽章样式 */
	.renewal-badge {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		background: #ef4444;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		z-index: 10;
		font-weight: 500;
	}

	.trial-badge {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		background: #8b5cf6;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		z-index: 10;
		font-weight: 500;
	}

	/* 头像样式 */
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #29d3b4;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 24rpx;
		margin-bottom: 12rpx;
	}

	.waiting-avatar {
		background: #8b5cf6;
	}

	/* 学员信息样式 */
	.student-info {
		font-size: 22rpx;
		line-height: 1.4;
	}

	.student-name {
		font-weight: 600;
		font-size: 26rpx;
		color: #fff;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.student-age,
	.course-status,
	.course-arrangement {
		color: #999;
		margin-bottom: 6rpx;
		font-size: 22rpx;
	}

	/* 体验课学员信息样式 */
	.trial-info {
		margin-top: 8rpx;
	}

	.trial-hours {
		color: #8b5cf6;
		font-weight: 500;
		font-size: 22rpx;
	}

	/* 付费学员信息样式 */
	.paid-student-info {
		margin-top: 8rpx;
	}

	.remaining-hours,
	.expiry-date {
		color: #999;
		margin-bottom: 6rpx;
		font-size: 20rpx;
	}

	/* 课时进度条样式 */
	.progress-container {
		margin-top: 10rpx;
	}

	.progress-label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
		font-size: 18rpx;
		color: #999;
	}

	.progress-percentage {
		color: #29d3b4;
		font-weight: 600;
		font-size: 18rpx;
	}

	.progress-bar {
		width: 100%;
		height: 8rpx;
		background: #4a4a4a;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #29d3b4 0%, #22a68b 100%);
		border-radius: 4rpx;
		transition: width 0.3s ease;
	}
</style>