<template>
	<view class="course-container">
		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 项目名称 -->
			<view class="form-card">
				<view class="form-title">项目信息</view>
				<view class="form-group">
					<text class="form-label">项目名称</text>
					<input class="form-input" :disabled="planId" v-model="courseData.projectName" placeholder="请输入项目名称"
						placeholder-class="input-placeholder" />
				</view>
			</view>

			<!-- 出发方式 -->
			<view class="form-card">
				<view class="form-title">出发方式</view>
				<view class="radio-group">
					<view class="radio-item" :class="{ active: courseData.startType === 'together' }"
						@click="courseData.startType = 'together'">
						<view class="radio-icon">
							<view v-if="courseData.startType === 'together'" class="radio-inner"></view>
						</view>
						<text>一起出发</text>
					</view>
					<view class="radio-item" :class="{ active: courseData.startType === 'interval' }"
						@click="courseData.startType = 'interval'">
						<view class="radio-icon">
							<view v-if="courseData.startType === 'interval'" class="radio-inner"></view>
						</view>
						<text>间隔出发</text>
					</view>
				</view>
				<view v-if="courseData.startType === 'interval'" class="interval-input-wrapper">
					<text class="interval-label">间隔时间</text>
					<view class="interval-input">
						<input class="number-input" v-model="courseData.intervalSeconds" type="digit"
							placeholder="请输入秒数" />
						<text class="unit-text">秒</text>
					</view>
				</view>
			</view>

			<!-- 组别设置 -->
			<view v-if="type==1" class="form-card">
				<view class="form-title">组别设置</view>
				<view class="group-options">
					<view class="person-input-wrapper">
						<text class="person-label">每组人数</text>
						<view class="person-input">
							<input class="number-input" v-model="courseData.groupPersonCount" type="number"
								placeholder="请输入人数" />
							<text class="unit-text">人</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 分段设置 -->
			<view v-if="type==2" class="form-card">
				<view class="form-title">分段设置</view>
				<view class="segment-options">
					<view class="segment-input-wrapper">
						<text class="segment-label">分段距离</text>
						<view class="segment-input">
							<input class="number-input" v-model="courseData.segmentDistance" type="number"
								placeholder="请输入距离" />
							<text class="unit-text">米</text>
						</view>
					</view>
					<view class="segment-count-wrapper">
						<text class="segment-count-label">分段数</text>
						<view class="segment-count-input">
							<input class="number-input" v-model="courseData.segmentCount" type="number"
								placeholder="请输入段数" />
							<text class="unit-text">段</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 学生列表 -->
			<view class="form-card">
				<view class="student-header">
					<view class="header-left">
						<text class="form-title" style="margin-bottom: 0;">选择学生</text>
						<text class="student-count">已选({{ selectedStudentIds.length }}/{{ allStudents.length }})</text>
					</view>
					<view class="header-actions">
						<view class="select-all-btn" @click="toggleSelectAll">
							<view class="checkbox-icon" :class="{ checked: allSelected }">
								<u-icon v-if="allSelected" name="checkmark" size="14" color="#fff"></u-icon>
							</view>
							<text class="select-all-text">{{ allSelected ? '取消全选' : '全选' }}</text>
						</view>
					</view>
				</view>

				<view v-if="loading" class="loading-state">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>

				<view v-else-if="allStudents.length === 0" class="empty-student-state">
					<view class="empty-icon">
						<u-icon name="account" size="48" color="#ddd"></u-icon>
					</view>
					<text class="empty-text">暂无学生</text>
					<text class="empty-desc">请先在学员管理中添加学生</text>
				</view>

				<view v-else class="student-list">
					<view v-for="student in allStudents" :key="student.studentId" class="student-item"
						:class="{ checked: selectedStudentIds.includes(student.studentId) }"
						@click="toggleStudentSelect(student.studentId)">
						<view class="student-checkbox"
							:class="{ checked: selectedStudentIds.includes(student.studentId) }">
							<text v-if="selectedStudentIds.includes(student.studentId)" class="checkbox-index">
								{{ selectedStudentIds.indexOf(student.studentId) + 1 }}
							</text>
						</view>
						<view class="student-info">
							<view class="student-name">{{ student.name }}</view>
							<view v-if="planId && type==1 " class="student-time"  >
								pb:{{   student.quicklyTime}}
							</view>
						</view>
					</view>
				</view>

				
			</view>
		</view>
		<view class="" style="width: 100%; height: 80rpx;">

		</view>
		<!-- 底部按钮区域 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<button class="confirm-btn" @click="confirmCreate()">保存项目</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { Service } from '@/Service/Service'
	import { onLoad } from '@dcloudio/uni-app'
	import { PlanService } from '@/Service/swimming/PlanService'
	import { studentService } from '@/Service/swimming/studentService'




	// 课程数据
	const courseData = ref({
		projectName: '',
		startType: 'together', // together | interval
		intervalSeconds: '',
		groupPersonCount: '',
		segmentDistance: '',
		segmentCount: ''
	})

	// 所有学生列表
	const allStudents = ref<Array<any>>([])

	// 已选学生ID列表
	const selectedStudentIds = ref<string[]>([])

	// 加载状态
	const loading = ref(false)

	let type = ref('')
	let planId=ref('')
	onLoad((data : any) => {
		type.value = data.type
		if(data.id){
			planId.value=data.id
			getPlanInfo()
		}
		getStudentList()
	})
	
	
	// 获取计划详情
	const getPlanInfo = () => {
		PlanService.GetPlanInfo(planId.value).then(res => {
			if (res.code == 0) {
				selectedStudentIds.value=res.data.plan.users.map((item:any)=>{
					return item.studentId
				})
				courseData.value.groupPersonCount=res.data.plan.groupInt
				courseData.value.segmentDistance=res.data.plan.subsectionDistance
				courseData.value.segmentCount=res.data.plan.subsectionInt
				courseData.value.projectName=res.data.plan.name
				courseData.value.startType = res.data.plan.departType == '间隔出发' ? 'interval' : 'together'
				courseData.value.intervalSeconds = res.data.plan.interval
			} else {
				Service.Msg(res.msg)
			}
		})
	}
	
	
	// 是否全选
	const allSelected = computed(() => {
		return allStudents.value.length > 0 && allStudents.value.every(s => selectedStudentIds.value.includes(s.studentId))
	})

	// 已选学生列表（按选择顺序排序）
	const selectedStudents = computed(() => {
		return selectedStudentIds.value
			.map(id => allStudents.value.find(s => s.studentId === id))
			.filter((s) : s is Student => s !== undefined)
	})

	// 获取学生列表（模拟接口）
	const getStudentList = async () => {
		loading.value = true

		studentService.GetStudentList(planId.value ).then(res => {
			if (res.code == 0) {
				allStudents.value = res.data
				loading.value = false
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	// 切换学生选中状态
	const toggleStudentSelect = (id : string) => {
		const index = selectedStudentIds.value.indexOf(id)
		if (index > -1) {
			selectedStudentIds.value.splice(index, 1)
		} else {
			selectedStudentIds.value.push(id)
		}
	}

	// 全选/取消全选
	const toggleSelectAll = () => {
		if (allSelected.value) {
			// 取消全选
			selectedStudentIds.value = []
		} else {
			// 全选
			selectedStudentIds.value = allStudents.value.map(s => s.studentId)
		}
	}

	// 移除已选学生
	const removeSelectedStudent = (id : string) => {
		const index = selectedStudentIds.value.indexOf(id)
		if (index > -1) {
			selectedStudentIds.value.splice(index, 1)
		}
	}



	// 保存项目
	const confirmCreate = () => {
		if (!courseData.value.projectName) {
			Service.Msg('请输入项目名称!')
			return
		}

		if (courseData.value.startType == 'interval' && !courseData.value.intervalSeconds) {
			Service.Msg('请输入正确时间间隔!')
			return
		}

		if (!courseData.value.groupPersonCount && type.value=='1') {
			Service.Msg('请输入每组人数!')
			return
		}
		
		if (!courseData.value.segmentDistance && type.value=='2') {
			Service.Msg('请输入分段距离')
			return
		}
		
		if (!courseData.value.segmentCount && type.value=='2') {
			Service.Msg('请输入分段数')
			return
		}

		let users=[]
		selectedStudents.value.map((item:any)=>{
			users.push({
				studentId:item.studentId,
				name:item.name
			})
		})
		
		const data = {
			planId: planId.value,
			name: courseData.value.projectName,
			planType:type.value=='1'?'计时项目':'分段项目',
			departType: courseData.value.startType=='together'?'一起出发':'间隔出发',
			interval: courseData.value.startType=='together'?0:courseData.value.intervalSeconds,
			groupInt: courseData.value.groupPersonCount?courseData.value.groupPersonCount:'',
			subsectionDistance: courseData.value.segmentDistance?courseData.value.segmentDistance:'',
			subsectionInt: courseData.value.segmentCount?courseData.value.segmentCount:'',
			users: JSON.stringify(users),
			project: '',
			group: '',
		}
		console.log(data);
		
		PlanService.AddPlan(data).then(res=>{
			if(res.code==0){
				Service.Msg( planId.value?'修改成功!': '添加成功!')
				if(planId.value){
					Service.GoPageBack()
					return
				}
				
				if(type.value=='1'){
					Service.GoPageDelse('/pages/userFunc/swiming?id=' + res.data.planId)
				}else{
					Service.GoPageDelse('/pages/userFunc/segmentation?id=' + res.data.planId)
				}
				
				
				
			}else{
				Service.Msg(res.msg)
			}
		})


	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.course-container {
		min-height: 100vh;
		padding-bottom: 140rpx;
	}

	/* 表单区域 */
	.form-section {
		padding: 20rpx;
	}

	.form-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.form-title {
			font-size: 32rpx;
			font-weight: 700;
			color: #333;
			margin-bottom: 28rpx;
			display: block;
		}
	}

	/* 表单输入 */
	.form-group {
		margin-bottom: 32rpx;

		&:last-child {
			margin-bottom: 0;
		}

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

		.form-input {
			width: 100%;
			height: 88rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			transition: all 0.2s ease;

			&:focus {
				background-color: #fff;
				box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
			}
		}
	}

	/* 单选按钮组 */
	.radio-group {
		display: flex;
		gap: 20rpx;
		margin-bottom: 24rpx;

		.radio-item {
			flex: 1;
			height: 88rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			font-size: 28rpx;
			color: #666;
			transition: all 0.25s ease;
			border: 2rpx solid transparent;

			&:active {
				transform: scale(0.96);
			}

			&.active {
				font-weight: 600;
				background-color: #e6f7ff;
				border-color: #1890ff;
				color: #1890ff;
			}

			.radio-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 3rpx solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
			}

			&.active .radio-icon {
				border-color: #1890ff;
				background-color: #1890ff;
			}

			.radio-inner {
				width: 12rpx;
				height: 12rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}

	/* 间隔时间输入 */
	.interval-input-wrapper {
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.interval-label {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

		.interval-input {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			height: 72rpx;

			.number-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.unit-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 12rpx;
			}
		}
	}

	/* 组别选项 */
	.group-options {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.group-input-wrapper,
	.person-input-wrapper {
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.group-label,
		.person-label {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.group-input,
	.person-input {
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
		height: 72rpx;

		.number-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.unit-text {
			font-size: 24rpx;
			color: #999;
			margin-left: 12rpx;
		}
	}

	/* 分段设置选项 */
	.segment-options {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.segment-input-wrapper,
	.segment-count-wrapper {
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.segment-label,
		.segment-count-label {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.segment-input,
	.segment-count-input {
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
		height: 72rpx;

		.number-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.unit-text {
			font-size: 24rpx;
			color: #999;
			margin-left: 12rpx;
		}
	}

	/* 学生列表头部 */
	.student-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.header-left {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.student-count {
				font-size: 26rpx;
				color: #999;
				font-weight: 500;
			}
		}

		.header-actions {
			.select-all-btn {
				display: flex;
				align-items: center;
				gap: 8rpx;
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				transition: all 0.2s ease;

				&:active {
					transform: scale(0.96);
				}

				.checkbox-icon {
					width: 32rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&.checked {
						color: #1890ff;
					}
				}

				.select-all-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	/* 加载状态 */
	.loading-state {
		padding: 80rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f0f0f0;
			border-top-color: #1890ff;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}

		.loading-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	/* 空状态 */
	.empty-student-state {
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty-icon {
			margin-bottom: 20rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28rpx;
			font-weight: 600;
			color: #666;
			margin-bottom: 10rpx;
		}

		.empty-desc {
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 学生列表 */
	.student-list {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;

		.student-item {
			width: calc((100% - 24rpx) / 3);
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 16rpx 8rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			border: 2rpx solid transparent;
			transition: all 0.25s ease;

			&:active {
				transform: scale(0.98);
			}

			&.checked {
				background-color: #e6f7ff;
				border-color: #1890ff;
			}

			.student-checkbox {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 2rpx solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				transition: all 0.2s ease;

				&.checked {
					border-color: #1890ff;
					background-color: #1890ff;
				}

				.checkbox-index {
					font-size: 22rpx;
					color: #fff;
					font-weight: 600;
					line-height: 1;
				}
			}

			.student-avatar {
				width: 64rpx;
				height: 64rpx;
				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				
				.avatar-text {
					color: #fff;
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.student-info {
				width: 100%;
				.student-name {
					font-size: 26rpx;
					font-weight: 600;
					color: #333;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.student-time{
					font-size: 24rpx;
					color: #888;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.student-meta {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 12rpx;

					.gender-badge {
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						font-weight: 500;

						&.male {
							color: #1890ff;
							background-color: #e6f7ff;
						}

						&.female {
							color: #fa8c16;
							background-color: #fff7e6;
						}
					}

					.age-text {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}

	/* 已选学生预览 */
	.selected-preview {
		margin-top: 32rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f0f0;

		.preview-header {
			margin-bottom: 16rpx;

			.preview-title {
				font-size: 26rpx;
				font-weight: 600;
				color: #666;
			}
		}

		.preview-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8rpx;
		}

		.preview-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 10rpx 16rpx;
			background-color: #e6f7ff;
			border-radius: 12rpx;

			.preview-index {
				width: 24rpx;
				height: 24rpx;
				background-color: #1890ff;
				color: #fff;
				font-size: 18rpx;
				font-weight: 600;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.preview-name {
				font-size: 26rpx;
				color: #1890ff;
				font-weight: 500;
			}

			.preview-remove {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;

				&:active {
					transform: scale(0.9);
				}
			}
		}
	}

	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 99;

		.action-buttons {
			display: flex;
			gap: 16rpx;
		}
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		border: none;
		font-size: 30rpx;
		font-weight: 600;
		transition: all 0.25s ease;
	}

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

		&:active {
			background-color: #e8e8e8;
			transform: scale(0.96);
		}
	}

	.confirm-btn {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: #fff;
		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);

		&:active {
			transform: scale(0.96);
			box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.25);
		}
	}

	/* 动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>