<template>
  <view class="course-schedule">
    <!-- Course Info -->
    <view class="course-info">
      <text class="course-title">课程安排详情</text>
      <view class="course-detail">
        <text class="course-item">日期：{{ schedule_info.course_date }}</text>
<!--        <text class="course-item">课程名称：{{ schedule_info.course_name }}</text>-->
        <text class="course-item">班级名称：{{ schedule_info.class_name || '未设置' }}</text>
        <text class="course-item">课程时间：{{ schedule_info.time_slot }}</text>
        <text class="course-item">主教练：{{ schedule_info.coach_name || '待安排' }}</text>
        <text class="course-item">场地信息：{{ schedule_info.venue_name }}</text>
      </view>
    </view>

    <!-- Formal Students Section -->
    <view class="section">
      <text class="section-title">正式学员</text>
      <view class="cards-grid">
        <!-- Student Card with Data -->
        <view
          v-for="(stu, idx) in formalStudents"
          :key="idx"
          class="student-card filled"
          @tap="viewStudent(stu)"
        >
          <view v-if="stu.renewal_status" class="renewal-badge">待续费</view>
          <view class="avatar">{{ stu.name && stu.name.charAt(0) }}</view>
          <view class="student-info">
            <view class="student-name">{{ stu.name }}</view>
            <view class="student-age">年龄：{{ stu.age || '未知' }}岁</view>
            <view class="course-status">课程类型：{{ stu.person_type == 'customer_resource' ? '体验课' : '正式课'}}</view>
            <view class="course-status">课程状态：{{ stu.courseStatus }}</view>
            <view class="course-status">上课情况：{{ stu.course_progress.used }}/{{ stu.course_progress.total }}节</view>
            <view class="expiry-date" v-if="stu.student_course_info">到期时间：{{ stu.student_course_info.end_date || '未设置' }}</view>
          </view>
          <view v-if="stu.status === 1" class="status-badge signed">已签到</view>
          <view v-else-if="stu.status === 0" class="status-badge unsigned">未签到</view>
        </view>

        <!-- Empty Slots -->
        <view
          v-for="n in formalEmptySeats"
          :key="n"
          class="student-card empty"
          :data-type="'formal'"
          :data-index="n"
          @tap="openStudentModal"
        >
          <view class="add-icon">
            <text class="plus-icon">+</text>
          </view>
          <view class="add-text">
            <view class="slot-title">空位</view>
            <view class="slot-subtitle">点击添加学员</view>
          </view>
        </view>
      </view>
    </view>

    <!-- Waiting List Section -->
    <view class="section">
      <text class="section-title waiting-title">等待位</text>
      <view class="cards-grid">
        <!-- Waiting Students -->
        <view
          v-for="(stu, idx) in waitingStudents"
          :key="idx"
          class="student-card waiting filled"
          @tap="viewStudent(stu)"
        >
          <view class="avatar waiting-avatar">{{ stu.name && stu.name.charAt(0) }}</view>
          <view class="student-info">
            <view class="student-name">{{ stu.name }}</view>
            <view class="student-age">年龄：{{ stu.age || '未知' }}岁</view>
            <view class="course-status">课程状态：{{ stu.courseStatus }}</view>
            <view class="course-status">上课情况：
              {{ stu.course_progress.used }}/{{ stu.course_progress.total }}节 ({{ stu.course_progress.percentage }}%)
            </view>
            <view class="expiry-date" v-if="stu.expiryDate">到期时间：{{ stu.expiryDate || '未设置' }}</view>
          </view>
        </view>

        <!-- Waiting Empty Slots -->
        <view
          v-for="n in waitingEmptySeats"
          :key="n"
          class="student-card waiting"
          :data-type="'waiting'"
          :data-index="n"
          @tap="openStudentModal"
        >
          <view class="add-icon waiting-icon">
            <text class="plus-icon">+</text>
          </view>
          <view class="add-text">
            <view class="slot-title">等待位</view>
            <view class="slot-subtitle">点击添加学员</view>
          </view>
        </view>
      </view>
    </view>

    <!-- Bottom Popup Modal -->
    <view v-if="showModal" class="modal-overlay" @tap="closeModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text>添加学员</text>
        </view>

        <view class="modal-body">
          <!-- 预设学生信息显示 - 优先显示 -->
          <view v-if="presetStudent && presetStudent.name && presetStudent.phone" class="form-section">
            <text class="form-label">选中学员</text>
            <view class="preset-student">
              <view class="student-avatar">{{ presetStudent.name.charAt(0) }}</view>
              <view class="student-details">
                <view class="student-name">{{ presetStudent.name }}</view>
                <view class="student-phone">{{ presetStudent.phone }}</view>
              </view>
            </view>
          </view>

          <!-- Customer Selection - 只在没有预设学生时显示 -->
          <view v-if="!presetStudent || !presetStudent.name || !presetStudent.phone" class="form-section">
            <text class="form-label">客户选择</text>

            <input
              v-model="searchQuery"
              placeholder="请输入手机号或姓名"
              class="search-input"
              @input="searchStudents"
            />

            <!-- Search Results -->
            <view v-if="searchResults.length > 0" class="search-results">
              <view
                v-for="student in searchResults"
                :key="student.id"
                :class="['student-item', { selected: selectedStudent && selectedStudent.id === student.id }]"
                @tap="selectStudent(student)"
              >
                <view class="student-avatar">{{ student.name ? student.name.charAt(0) : '?' }}</view>
                <view class="student-details">
                  <view class="student-name">
                    {{ student.name }}
                    <text v-if="student.is_formal_student" class="formal-badge">正式学员</text>
                  </view>
                  <view class="student-phone">{{ student.phone }}</view>
                </view>
                <view v-if="selectedStudent && selectedStudent.id === student.id" class="check-icon">
                  <text>✓</text>
                </view>
              </view>
            </view>
          </view>

          <!-- Course Arrangement -->
          <view class="form-section">
            <text class="form-label">课程安排</text>
            <view class="radio-group">
              <label class="radio-item">
                <radio
                  value="1"
                  :checked="courseArrangement === '1'"
                  @tap="courseArrangement = '1'"
                />
                <text class="radio-text">临时课</text>
              </label>
              <label class="radio-item" :class="{ disabled: !canSelectFixedCourse }">
                <radio
                  value="2"
                  :checked="courseArrangement === '2'"
                  :disabled="!canSelectFixedCourse"
                  @tap="selectFixedCourse"
                />
                <text class="radio-text" :class="{ disabled: !canSelectFixedCourse }">
                  固定课
                  <text v-if="!canSelectFixedCourse" class="disabled-tip">（需要付费课程）</text>
                </text>
              </label>
            </view>
          </view>

          <!-- Remarks -->
          <view class="form-section">
            <text class="form-label">备注</text>
            <textarea
              v-model="remarks"
              placeholder="请输入备注信息"
              class="remarks-textarea"
            ></textarea>
          </view>
        </view>

        <!-- Modal Footer -->
        <view class="modal-footer">
          <view class="btn btn-cancel" @tap="closeModal">取消</view>
          <view class="btn btn-confirm" @tap="confirmSelection">确定</view>
        </view>
      </view>
    </view>

    <!-- 请假原因弹窗 -->
    <uni-popup ref="leaveReasonModal" type="dialog">
      <view class="leave-modal">
        <view class="leave-modal-header">
          <text class="leave-modal-title">请假申请</text>
        </view>
        <view class="leave-form">
          <view class="leave-label">请假原因</view>
          <view class="leave-input">
            <textarea
              v-model="leaveReason"
              placeholder="请输入请假原因"
              maxlength="200"
              class="leave-textarea"
            ></textarea>
          </view>
          <view class="leave-buttons">
            <view class="leave-btn cancel-btn" @tap="closeLeaveModal">取消</view>
            <view class="leave-btn confirm-btn" @tap="submitLeaveRequest">提交</view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

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

	export default {
		name: 'ClassArrangementDetail',
		components: {
			// FirstUI 组件如果需要局部导入，在这里添加
		},
		data() {
			return {
				course_id: '',
				schedule_info: {}, // 课程安排基本信息
				date: '',
				students: [], // 所有学员数据
				formalStudents: [], // 正式学员
				waitingStudents: [], // 等待位学员
				resource_id: '',
				student_id: '', // 预设学生ID
				leaveReason: '', // 请假原因
				currentStudent: null, // 当前操作的学生
				formalEmptySeats: [], // 正式学员空位数组
				waitingEmptySeats: [1], // 等待位始终显示1个空位供添加

				// 新增弹窗相关数据
				showModal: false,
				searchQuery: '',
				courseArrangement: '1', // 1=临时课, 2=固定课
				remarks: '',
				selectedStudent: null,
				currentSlot: null,
				searchResults: [],
				presetStudent: null // 预设学生信息
			};
		},
		onLoad(query) {
			console.log('onLoad 参数:', query);
			// 支持两种参数名：id 和 schedule_id
			this.course_id = query.id || query.schedule_id || '';
			this.resource_id = query.resource_id || '';
			this.student_id = query.student_id || '';

			console.log('初始化参数 - course_id:', this.course_id, 'resource_id:', this.resource_id, 'student_id:', this.student_id);

			// 智能路由逻辑：如果有预设的resource_id和student_id，直接获取学生信息
			if (this.resource_id && this.student_id) {
				this.loadPresetStudent();
			}

			// 确保有课程ID才调用API
			if (this.course_id) {
				this.getScheduleDetail();
			} else {
				console.error('缺少课程ID参数');
				uni.showToast({
					title: '缺少课程ID参数',
					icon: 'none'
				});
			}
		},
		computed: {
			// 判断当前选中的学员是否可以选择固定课
			canSelectFixedCourse() {
				if (!this.selectedStudent) {
					return false;
				}
				// 预设学生 或 搜索结果中选中的学生，都需要有付费课程才能选固定课
				return this.selectedStudent.is_formal_student || false;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 加载预设学生信息
			async loadPresetStudent() {
				try {
					// 使用新的专用API获取预设学员信息（不受状态限制）
					const res = await apiRoute.getPresetStudentInfo({
						resource_id: this.resource_id,
						student_id: this.student_id
					});
					console.log('预设学员信息完整响应:', res);

					if (res.code === 1 && res.data) {
						const studentData = res.data;

						this.presetStudent = {
							id: studentData.student_id || this.student_id,
							name: studentData.name || `学员${this.student_id}`,
							phone: studentData.phone_number || '待获取',
							age: studentData.age || null,
							member_id: studentData.user_id || this.student_id,
							student_id: studentData.student_id || this.student_id, // 学员表ID
							resource_id: studentData.resource_id || this.resource_id, // 客户资源表ID
							is_formal_student: studentData.is_formal_student || false,
							course_info: studentData.course_info || [],
							student_course_id: studentData.student_course_id || null
						};

						this.selectedStudent = this.presetStudent;
						console.log('加载预设学生信息成功:', this.presetStudent);
						console.log('是否可选择固定课:', this.presetStudent.is_formal_student);
					} else {
						console.warn('预设学员API响应异常:', res);
						// 创建基础的预设学生
						this.createFallbackPresetStudent();
					}
				} catch (error) {
					console.error('加载预设学生信息失败:', error);
					// 创建备用预设学生信息
					this.createFallbackPresetStudent();
				}
			},

			// 创建备用预设学生信息
			createFallbackPresetStudent() {
				if (this.resource_id && this.student_id) {
					this.presetStudent = {
						id: this.student_id,
						name: `学员${this.student_id}`,
						phone: '待获取',
						age: null,
						member_id: this.student_id,
						student_id: this.student_id, // 学员表ID
						resource_id: this.resource_id, // 客户资源表ID
						is_formal_student: false,
						course_info: [],
						student_course_id: null
					};
					this.selectedStudent = this.presetStudent;
					console.log('使用备用预设学生信息:', this.presetStudent);
				}
			},

			// 打开学生选择弹窗
			openStudentModal(event) {
				// 从 data 属性获取参数
				const type = event.currentTarget.dataset.type;
				const index = event.currentTarget.dataset.index;

				this.showModal = true;
				this.currentSlot = { type, index };
				this.resetForm();

				// 如果有预设学生，验证信息完整性后选中
				if (this.presetStudent) {
					// 检查预设学员信息是否完整
					if (this.presetStudent.name && this.presetStudent.phone) {
						this.selectedStudent = this.presetStudent;
					} else {
						console.warn('预设学员信息不完整:', this.presetStudent);
						// 清空不完整的预设学员信息
						this.presetStudent = null;
						this.selectedStudent = null;
					}
				}
			},

			// 关闭弹窗
			closeModal() {
				this.showModal = false;
				this.resetForm();
			},

			// 重置表单
			resetForm() {
				if (!this.presetStudent) {
					this.searchQuery = '';
					this.searchResults = [];
					this.selectedStudent = null;
				}
				this.courseArrangement = '1';
				this.remarks = '';
			},

			// 搜索学生 - 智能检索
			async searchStudents() {
				if (!this.searchQuery.trim()) {
					this.searchResults = [];
					return;
				}

				// 智能判断输入类型：如果全是数字则判断为手机号，否则为姓名
				const isPhoneNumber = /^\d+$/.test(this.searchQuery.trim());

				try {
					uni.showLoading({
						title: '搜索中...'
					});

					// 调用后端接口进行检索
					const params = {};
					if (isPhoneNumber) {
						params.phone_number = this.searchQuery.trim();
					} else {
						params.name = this.searchQuery.trim();
					}

					const res = await apiRoute.searchStudents(params);

					uni.hideLoading();

					if (res.code === 1 && Array.isArray(res.data)) {
						// 后端已经返回了正式学员状态，直接使用
						this.searchResults = res.data.map(student => ({
							id: student.id,
							name: student.name,
							phone: student.phone_number,
							age: student.age,
							member_id: student.member_id,
							student_id: student.student_id || student.id, // 学员表ID
							resource_id: student.resource_id || 0, // 客户资源表ID，如果没有则为0
							is_formal_student: student.is_formal_student || false,
							course_info: student.course_info || []
						}));
					} else {
						this.searchResults = [];
					}
				} catch (error) {
					uni.hideLoading();
					console.error('搜索学员失败:', error);
					this.searchResults = [];
				}
			},


			// 选择学生
			selectStudent(student) {
				this.selectedStudent = student;
				// 选择学员后，如果是体验课学员，自动切换到临时课
				if (!this.canSelectFixedCourse) {
					this.courseArrangement = '1';
				}
			},

			// 选择固定课
			selectFixedCourse() {
				if (this.canSelectFixedCourse) {
					this.courseArrangement = '2';
				} else {
					uni.showToast({
						title: '该学员只能选择临时课',
						icon: 'none'
					});
				}
			},

			// 确认选择
			async confirmSelection() {
				// 1. 检查是否选择了学员
				if (!this.selectedStudent) {
					uni.showToast({
						title: '请选择学员',
						icon: 'none'
					});
					return;
				}

					console.log(this.selectedStudent);
				// 2. 检查学员信息是否完整
				if (!this.selectedStudent.name || !this.selectedStudent.phone) {
					uni.showToast({
						title: '学员信息不完整，请重新选择',
						icon: 'none'
					});
					return;
				}

				// 3. 检查关键字段是否存在
				if (!this.selectedStudent.resource_id && !this.resource_id) {
					uni.showToast({
						title: '缺少学员资源ID，无法添加课程',
						icon: 'none'
					});
					return;
				}

				// 4. 如果选择的是固定课，需要验证是否为正式学员
				if (this.courseArrangement === '2') {
					if (!this.selectedStudent.is_formal_student) {
						uni.showToast({
							title: '只有正式学员才能选择固定课',
							icon: 'none'
						});
						return;
					}
				}

				// 构建添加学员的数据
				const data = {
					'resources_id': this.selectedStudent.resource_id || this.resource_id || 0,
					'person_type': 'customer_resource',
					'schedule_id': this.course_id,
					'course_date': this.schedule_info.course_date,
					'time_slot': this.schedule_info.time_slot,
					'position': this.currentSlot.index,
					'schedule_type': this.currentSlot.type === 'waiting' ? 2 : 1,
					'course_type': this.currentSlot.type === 'waiting' ? 3 : parseInt(this.courseArrangement),
					'remark': this.remarks,
					'student_id': this.selectedStudent.student_id || this.selectedStudent.id,
				};

				try {
					uni.showLoading({
						title: '添加中...'
					});

					let res = await apiRoute.addSchedule(data);

					uni.hideLoading();

					if (res.code == 1) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});

						this.closeModal();
						// 刷新数据
						await this.getScheduleDetail();
					} else {
						uni.showToast({
							title: res.msg || '添加失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('添加学员失败:', error);

					// 尝试获取具体的错误信息
					let errorMsg = '添加失败';
					if (error && error.data && error.data.msg) {
						errorMsg = error.data.msg;
					} else if (error && error.message) {
						errorMsg = error.message;
					} else if (typeof error === 'string') {
						errorMsg = error;
					}

					uni.showToast({
						title: errorMsg,
						icon: 'none'
					});
				}
			},

			// 获取课程安排类型文本
			getScheduleTypeText(type) {
				const typeMap = {
					1: '固定课',
					2: '临时课'
				};
				return typeMap[type] || '未知';
			},
			viewStudent(stu) {
				console.log(stu, this.schedule_info);

				// 根据学员状态和类型构建操作选项
				let itemList = [];
				if (stu.person_type === 'customer_resource') {
					itemList.push('取消课程');
					// 如果是等待位学员，且正式位有空位，增加升级选项
					if (stu.schedule_type === 2 && this.formalEmptySeats.length > 0) {
						itemList.push('升级为正式学员');
					}
				} else {
					itemList.push('申请请假');
				}

				// 显示操作选项弹窗
				uni.showActionSheet({
					title: `学员: ${stu.name}`,
					itemList: itemList,
					success: (res) => {
						const selectedOption = itemList[res.tapIndex];

						if (selectedOption === '取消课程') {
							// 弹出确认取消课程的弹窗
							uni.showModal({
								title: '取消课程',
								content: `是否取消学员 ${stu.name} 的课程？`,
								success: async (res) => {
									if (res.confirm) {
										// 用户点击确定，调用schedule_del接口
										try {
											uni.showLoading({
												title: '处理中...'
											});

											const params = {
												resources_id: stu.resources_id,
												id: this.schedule_info.id,
												student_id: stu.student_id || stu.member_id || '',
												remark: '取消课程'
											};

											const result = await apiRoute.schedule_del(params);

											uni.hideLoading();

											if (result.code === 1) {
												uni.showToast({
													title: '取消课程成功',
													icon: 'success'
												});

												// 刷新数据
												await this.getScheduleDetail();
											} else {
												uni.showToast({
													title: result.msg || '取消课程失败',
													icon: 'none'
												});
											}
										} catch (error) {
											uni.hideLoading();
											uni.showToast({
												title: '操作失败，请重试',
												icon: 'none'
											});
											console.error('取消课程失败:', error);
										}
									}
								}
							});
						} else if (selectedOption === '升级为正式学员') {
							// 确认升级操作
							this.confirmUpgradeStudent(stu);
						} else if (selectedOption === '申请请假') {
							// 如果是学生，弹出请假原因输入框
							this.$refs.leaveReasonModal.open();
							this.currentStudent = stu; // 保存当前操作的学生信息
						}
					}
				});
			},

			// 确认升级学员
			confirmUpgradeStudent(stu) {
				// 检查正式位是否有空位
				if (this.formalEmptySeats.length === 0) {
					uni.showToast({
						title: '正式位已满，无法升级',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '升级确认',
					content: `是否将等待位学员 ${stu.name} 升级为正式学员？升级后将占用一个正式位。`,
					success: async (res) => {
						if (res.confirm) {
							await this.upgradeStudent(stu);
						}
					}
				});
			},

			// 执行学员升级
			async upgradeStudent(stu) {
				try {
					uni.showLoading({
						title: '升级中...'
					});

					// 构建升级参数
					const upgradeData = {
						resources_id: stu.resources_id,
						schedule_id: this.course_id,
						student_id: stu.student_id,
						from_schedule_type: 2, // 从等待位
						to_schedule_type: 1,   // 升级到正式位
						position: this.formalStudents.length + 1, // 新的正式位位置
						course_type: stu.course_type === 3 ? 1 : stu.course_type // 等待位课程类型改为正式课
					};

					// 调用升级接口（需要在后端实现）
					const result = await apiRoute.upgradeStudentSchedule(upgradeData);

					uni.hideLoading();

					if (result.code === 1) {
						uni.showToast({
							title: '升级成功',
							icon: 'success'
						});

						// 刷新数据
						await this.getScheduleDetail();
					} else {
						uni.showToast({
							title: result.msg || '升级失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('升级学员失败:', error);

					// 尝试获取具体的错误信息
					let errorMsg = '升级失败';
					if (error && error.data && error.data.msg) {
						errorMsg = error.data.msg;
					} else if (error && error.message) {
						errorMsg = error.message;
					} else if (typeof error === 'string') {
						errorMsg = error;
					}

					uni.showToast({
						title: errorMsg,
						icon: 'none'
					});
				}
			},

			getStatusText(status) {
				const statusMap = {
					0: '待上课',
					1: '已上课',
					2: '请假'
				};
				return statusMap[status] || status;
			},
			// 获取课程类型文本
			getCourseTypeText(courseType) {
				const courseTypeMap = {
					1: '正式课',
					2: '体验课',
					3: '补课',
					4: '试听课'
				};
				return courseTypeMap[courseType] || '未知';
			},
			// 分类学员数据
			categorizeStudents() {
				// 根据schedule_type分类学员
				// schedule_type: 1=正式位, 2=等待位
				this.formalStudents = this.students.filter(stu => stu.schedule_type === 1 || stu.schedule_type === null);
				this.waitingStudents = this.students.filter(stu => stu.schedule_type === 2);

				// 确保学员名称存在，如果不存在则返回未知学员
				this.formalStudents.forEach(stu => {
					if (!stu.name) stu.name = '未知学员';
				});
				this.waitingStudents.forEach(stu => {
					if (!stu.name) stu.name = '未知学员';
				});

				console.log('学员分类完成:', {
					formal: this.formalStudents.length,
					waiting: this.waitingStudents.length
				});
			},
			async scheduleList() {
				try {
					console.log('开始获取学员列表, schedule_id:', this.course_id);
					let res = await apiRoute.scheduleList({
						'schedule_id': this.course_id
					})

					console.log('学员列表响应:', res);

					if (res.code === 1 && Array.isArray(res.data)) {
						// 确保学员列表按照位置排序
						this.students = res.data.sort((a, b) => {
							// 如果有position字段，按position排序
							if (a.position !== undefined && b.position !== undefined) {
								return parseInt(a.position) - parseInt(b.position);
							}
							// 否则按照ID排序
							return a.id - b.id;
						});

						// 分类学员
						this.categorizeStudents();
					} else {
						this.students = [];
						this.formalStudents = [];
						this.waitingStudents = [];
					}

					// 更新可用容量
					this.updateAvailableCapacity();

					return this.students;
				} catch (error) {
					console.error('获取学员列表失败:', error);
					this.students = [];
					this.formalStudents = [];
					this.waitingStudents = [];
					return [];
				}
			},
			async getScheduleDetail() {
				try {
					console.log('开始获取课程安排详情, schedule_id:', this.course_id);
					let res = await apiRoute.getScheduleDetail({
						'schedule_id': this.course_id
					})
					console.log('课程安排详情响应:', res);

					if (res.code === 1 && res.data) {
						this.schedule_info = res.data.schedule_info;
						this.formalStudents = res.data.formal_students || [];
						this.waitingStudents = res.data.waiting_students || [];

						// 计算可用容量
						this.updateAvailableCapacity();
					} else {
						uni.showToast({
							title: res.msg || '获取课程安排详情失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取课程安排详情失败:', error);
					uni.showToast({
						title: '获取课程安排详情失败',
						icon: 'none'
					});
				}
			},
			// 更新可用容量
			updateAvailableCapacity() {
				// 确保schedule_info已加载
				if (!this.schedule_info) return;

				console.log('更新可用容量 - 课程最大容量:', this.schedule_info.max_students, '正式学员数量:', this.formalStudents.length);

				// 计算正式位已占用的位置数
				const occupiedFormalSeats = this.formalStudents.length;

				// 获取课程最大容量（正式位）
				const maxStudents = parseInt(this.schedule_info.max_students) || 0;

				let remainingFormalSeats = 0;
				if (maxStudents === 0) {
					// 如果max_students为0，则没有学员限制，可以一直新增学员
					// 始终显示1个空位供添加，类似等待位的逻辑
					remainingFormalSeats = 1;
				} else {
					// 有限制的情况下，计算剩余空位
					remainingFormalSeats = Math.max(0, maxStudents - occupiedFormalSeats);
				}

				console.log('计算后的正式位剩余容量:', remainingFormalSeats);

				// 初始化正式位空位数组
				this.formalEmptySeats = [];
				for (let i = 1; i <= remainingFormalSeats; i++) {
					this.formalEmptySeats.push(i);
				}

				// 等待位永远都能添加学员，始终显示1个空位供添加
				this.waitingEmptySeats = [1];

				console.log('等待位空位:', this.waitingEmptySeats.length);
			},
			async addStudent(e, index, type = 'formal') {
				console.log('添加学员到位置:', index, '类型:', type);

				const data = {
					'resources_id': this.resource_id,
					'person_type': 'customer_resource',
					'schedule_id': this.course_id,
					'course_date': this.schedule_info.course_date,
					'time_slot': this.schedule_info.time_slot,
					'position': index, // 位置信息
					'schedule_type': type === 'waiting' ? 2 : 1, // 1=正式位, 2=等待位
					'course_type': type === 'waiting' ? 3 : 1 // 3=等待位, 1=正式课
				};

				try {
					uni.showLoading({
						title: '添加中...'
					});

					let res = await apiRoute.addSchedule(data)

					uni.hideLoading();

					if (res.code == 1) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});

						// 刷新数据并更新可用容量
						await this.getScheduleDetail();
					} else {
						uni.showToast({
							title: res.msg || '添加失败',
							icon: 'none'
						});
					}

				} catch (error) {
					uni.hideLoading();
					console.error('添加学员失败:', error);

					// 尝试获取具体的错误信息
					let errorMsg = '添加失败';
					if (error && error.data && error.data.msg) {
						errorMsg = error.data.msg;
					} else if (error && error.message) {
						errorMsg = error.message;
					} else if (typeof error === 'string') {
						errorMsg = error;
					}

					uni.showToast({
						title: errorMsg,
						icon: 'none'
					});
				}
			},
			// 关闭请假弹窗
			closeLeaveModal() {
				this.$refs.leaveReasonModal.close();
				this.leaveReason = '';
			},

			// 提交请假申请
			submitLeaveRequest() {
				if (!this.leaveReason.trim()) {
					uni.showToast({
						title: '请填写请假原因',
						icon: 'none'
					});
					return;
				}

				// 调用请假接口
				uni.showLoading({
					title: '提交中...'
				});

				// 构建请假参数
				const params = {
					resources_id: this.currentStudent.resources_id,
					id: this.schedule_info.id,
          student_id: this.currentStudent.student_id,
					remark: this.leaveReason
				};

				// 调用请假接口
				apiRoute.schedule_del(params)
					.then(res => {
						uni.hideLoading();
						if (res.code === 1) {
							uni.showModal({
                content: '请假申请提交成功',
                showCancel: false,
              })
							this.closeLeaveModal();

							// 刷新数据并更新可用容量
							this.getScheduleDetail().then(() => {
								// 确保数据刷新后更新可用容量
								this.updateAvailableCapacity();
							});
						} else {
							uni.showToast({
								title: res.msg || '请假申请提交失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: '请假申请提交失败，请重试',
							icon: 'none'
						});
					});
			}
		}
	}
</script>

<style lang="less" scoped>
.course-schedule {
	background: #232323;
	min-height: 100vh;
	padding-bottom: 30rpx;
}

.header {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx 20rpx 30rpx;
	position: relative;

	.back-btn {
		position: absolute;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-icon {
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
		}
	}

	.title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		flex: 1;
	}
}

.course-info {
	font-size: 28rpx;
	background: #434544;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;

	.course-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		display: block;
	}

	.course-detail {
		.course-item {
			color: #29d3b4;
			font-size: 26rpx;
			margin-bottom: 8rpx;
			display: block;
		}
	}
}

.section {
	margin: 30rpx;

	.section-title {
		color: #ffd86b;
		font-size: 28rpx;
		margin-bottom: 30rpx;
		display: block;

		&.waiting-title {
			color: #8a7fff !important;
		}
	}
}

.cards-grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: -20rpx;  /* 抵消最后一列的右边距 */
}

.student-card {
	background: #333;
	border-radius: 12rpx;
	padding: 24rpx;
	width: calc(50% - 20rpx);
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	position: relative;
	min-height: 200rpx;

	.renewal-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background: #ff6b6b;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #29d3b4;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-right: 18rpx;
		flex-shrink: 0;

		&.waiting-avatar {
			background: #8a7fff;
		}
	}

	.student-info {
		flex: 1;
		overflow: hidden;

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

		.student-age,
		.course-status,
		.course-arrangement,
		.remaining-hours,
		.expiry-date {
			color: #bdbdbd;
			font-size: 22rpx;
			margin-bottom: 4rpx;
			line-height: 1.3;
		}
	}

	.add-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #ffd86b;
		color: #232323;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 18rpx;
		flex-shrink: 0;

		.plus-icon {
			font-size: 36rpx;
			font-weight: bold;
		}

		&.waiting-icon {
			background: #8a7fff;
			color: #1a1a2a;
		}
	}

	.add-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.slot-title {
			color: #ffd86b;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 4rpx;
		}

		.slot-subtitle {
			color: #ffd86b;
			font-size: 22rpx;
		}
	}

	&.empty {
		border: 2rpx dashed #ffd86b;
		background: #232323;
	}

	&.waiting {
		background: #2a2a3a;
		border: 1rpx solid #8a7fff;

		&.empty {
			border: 2rpx dashed #8a7fff;
			background: #1a1a2a;

			.add-text {
				.slot-title,
				.slot-subtitle {
					color: #8a7fff;
				}
			}
		}

		&.filled {
			.student-info {
				.student-name {
					color: #8a7fff;
				}
			}
		}
	}

  // 添加签到状态样式
  .status-badge {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    padding: 4rpx 8rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    font-weight: bold;

    &.signed {
      background-color: #29d3b4;
      color: #fff;
    }

    &.unsigned {
      background-color: #ffd86b;
      color: #232323;
    }
  }
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}

.modal-content {
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	overflow: hidden;
}

.modal-header {
	padding: 40rpx;
	border-bottom: 1rpx solid #eee;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.modal-body {
	padding: 40rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.form-section {
	margin-bottom: 40rpx;

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
}

.search-tabs {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;

	.tab-btn {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #666;

		&.active {
			background: #29d3b4;
			color: #fff;
		}
	}
}

.search-input {
	width: 100%;
	padding: 24rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	box-sizing: border-box;
  height: 90rpx;
}

.search-results {
	margin-top: 20rpx;
	max-height: 400rpx;
	overflow-y: auto;
}

.student-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border: 1rpx solid #eee;
	border-radius: 8rpx;
	margin-bottom: 16rpx;

	&.selected {
		border-color: #29d3b4;
		background: rgba(41, 211, 180, 0.1);
	}

	.student-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #29d3b4;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 20rpx;
	}

	.student-details {
		flex: 1;

		.student-name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 8rpx;
			display: flex;
			align-items: center;
			gap: 16rpx;

			.formal-badge {
				background: #29d3b4;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				white-space: nowrap;
			}
		}

		.student-phone {
			font-size: 24rpx;
			color: #666;
		}
	}

	.check-icon {
		color: #29d3b4;
		font-size: 32rpx;
	}
}

.preset-student {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f5f5f5;
	border-radius: 8rpx;

	.student-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #29d3b4;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 20rpx;
	}

	.student-details {
		flex: 1;

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

		.student-phone {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.radio-group {
	display: flex;
	gap: 40rpx;

	.radio-item {
		display: flex;
		align-items: center;

		.radio-text {
			margin-left: 16rpx;
			font-size: 28rpx;
			color: #333;
		}

		&.disabled {
			opacity: 0.5;

			.radio-text {
				color: #999;

				.disabled-tip {
					font-size: 24rpx;
					color: #999;
					margin-left: 8rpx;
				}
			}
		}
	}
}

.remarks-textarea {
	width: 100%;
	min-height: 120rpx;
	padding: 20rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	resize: none;
}

.modal-footer {
	padding: 40rpx;
	border-top: 1rpx solid #eee;
	display: flex;
	gap: 20rpx;

	.btn {
		flex: 1;
		padding: 24rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 28rpx;

		&.btn-cancel {
			background: #f5f5f5;
			color: #666;
		}

		&.btn-confirm {
			background: #29d3b4;
			color: #fff;
		}
	}
}

/* 请假弹窗样式 */
.leave-modal {
	background: #fff;
	border-radius: 16rpx;
	width: 600rpx;
	max-width: 80vw;
}

.leave-modal-header {
	padding: 40rpx 40rpx 20rpx 40rpx;
	text-align: center;
	border-bottom: 1rpx solid #eee;

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

.leave-form {
	padding: 40rpx;

	.leave-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.leave-input {
		margin-bottom: 40rpx;

		.leave-textarea {
			width: 100%;
			min-height: 200rpx;
			padding: 20rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			resize: none;
			background: #f9f9f9;
		}
	}

	.leave-buttons {
		display: flex;
		gap: 20rpx;

		.leave-btn {
			flex: 1;
			padding: 24rpx;
			text-align: center;
			border-radius: 8rpx;
			font-size: 28rpx;

			&.cancel-btn {
				background: #f5f5f5;
				color: #666;
			}

			&.confirm-btn {
				background: #29d3b4;
				color: #fff;
			}
		}
	}
}
</style>
