<template>
	<view class="student-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">学员管理</text>
				<text class="subtitle">{{ students.length }}位学员</text>
			</view>
		</view>

		<!-- 学员列表 -->
		<view class="students-section">
			<view v-if="students.length === 0" class="empty-state">
				<view class="empty-icon">
					<u-icon name="account" size="64" color="#ddd"></u-icon>
				</view>
				<text class="empty-text">暂无学员</text>
				<text class="empty-desc">点击下方按钮添加第一位学员</text>
			</view>

			<view v-else class="students-list">
				<view v-for="(student, index) in students" :key="student.id" class="student-card"  >
					<view class="student-info">
						<view class="student-avatar">
							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
						</view>
						<view class="student-details">
							<view class="detail-row" style="justify-content: space-between;">
								<view style="display: flex; align-items: center; gap: 8rpx;">
									<text class="student-name">{{ student.name }}</text>
									<view class="student-gender" :class="student.sex === '男' ? 'male' : 'female'">
										<u-icon :name="student.sex === '男' ? 'man' : 'woman'" size="14"></u-icon>
										{{ student.sex }}
									</view>
								</view>
							</view>
							<view class="detail-row">
								<text class="detail-label">出生日期：</text>
								<text class="detail-value">{{ student.birthday }}</text>
							</view>
							<view class="detail-row">
								<text class="detail-label">年龄：</text>
								<text class="detail-value">{{ calculateAge(student.birthday) }}岁</text>
							</view>
							<view v-if="student.school" class="detail-row">
								<text class="detail-label">学校：</text>
								<text class="detail-value">{{ student.school }}</text>
							</view>
							<view v-if="student.address" class="detail-row">
								<text class="detail-label">住址：</text>
								<text class="detail-value address-text">{{ student.address }}</text>
							</view>
							<view  class="detail-row">
								<text class="detail-label">状态：</text>
								<up-switch v-model="student.active" size="16"  @change="confirmDelete(student)"  ></up-switch>
							</view>
							
						</view>
					</view>
					<view class="student-actions">
						<view class="action-btn edit-btn" @click="openEditModal(student)">
							<u-icon name="edit-pen" size="18" color="#1890ff"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%; height: 100rpx;">

		</view>
		<!-- 底部添加按钮 -->
		<view class="bottom-add-btn">
			<button class="add-btn" @click="showAddModal = true">
				<u-icon name="plus" size="24" color="#fff"></u-icon>
				<text class="btn-text">添加学员</text>
			</button>
		</view>

		<!-- 添加/编辑学员弹窗 -->
		<view v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModal"></view>
		<view v-if="showAddModal || showEditModal" class="student-modal">
			<view class="modal-header">
				<text class="modal-title">{{ showAddModal ? '添加学员' : '编辑学员' }}</text>
				<view class="modal-close" @click="closeModal">
					<u-icon name="close" size="20" color="#999"></u-icon>
				</view>
			</view>
			<view class="modal-content">
				<view class="form-group">
					<text class="form-label">学员姓名</text>
					<input class="form-input" v-model="formData.name" placeholder="请输入学员姓名" type="text" />
				</view>
				<view class="form-group">
					<text class="form-label">性别</text>
					<view class="gender-selector">
						<view class="gender-option" :class="{ active: formData.gender === '男' }"
							@click="formData.gender = '男'">
							<view class="gender-icon-box">
								<u-icon name="man" size="20"
									:color="formData.gender === '男' ? '#fff' : '#1890ff'"></u-icon>
							</view>
							<text>男</text>
						</view>
						<view class="gender-option" :class="{ active: formData.gender === '女' }"
							@click="formData.gender = '女'">
							<view class="gender-icon-box">
								<u-icon name="woman" size="20"
									:color="formData.gender === '女' ? '#fff' : '#fa8c16'"></u-icon>
							</view>
							<text>女</text>
						</view>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">出生日期</text>
					<view class="date-picker-wrapper">
						<picker mode="date" :value="formData.birthDate" @change="onBirthDateChange">
							<view class="form-input date-picker" :class="{ placeholder: !formData.birthDate }">
								<u-icon name="calendar" size="18" color="#1890ff"></u-icon>
								<text>{{ formData.birthDate || '请选择出生日期' }}</text>
								<u-icon name="arrow-down" size="14" color="#999"></u-icon>
							</view>
						</picker>
					</view>
					<view v-if="formData.birthDate" class="age-display">
						<view class="age-icon">
							<u-icon name="account" size="24" color="#fff"></u-icon>
						</view>
						<view class="age-info">
							<text class="age-label">年龄</text>
							<text class="age-value">{{ calculateAge(formData.birthDate) }}</text>
							<text class="age-unit">岁</text>
						</view>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">学校（选填）</text>
					<input class="form-input" v-model="formData.school" placeholder="请输入学校名称" type="text" />
				</view>
				<view class="form-group">
					<text class="form-label">家庭住址（选填）</text>
					<input class="form-input" v-model="formData.address" placeholder="请输入家庭住址" type="text" />
				</view>
			</view>
			<view class="modal-footer">
				<button class="modal-cancel-btn" @click="closeModal">取消</button>
				<button class="modal-confirm-btn" @click="saveStudent">
					{{ showAddModal ? '添加' : '保存' }}
				</button>
			</view>
		</view>
	</view>
</template>

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




	// 分页相关
	let page = ref(1)
	let status = ref('loadmore')
	
	// 学员列表
	const students = ref<Array<any>>([])

	// 弹窗状态
	const showAddModal = ref(false)
	const showEditModal = ref(false)

	// 表单数据
	const formData = ref<any>({})

	// 当前编辑的学员
	const editingStudent = ref<any>({})

	onLoad(() => {
		getData()
	})

	onReachBottom(() => {
		getList()
	})

	// 计算年龄
	const calculateAge = (birthDate : string) : number => {
		if (!birthDate) return 0
		const birth = new Date(birthDate)
		const today = new Date()
		let age = today.getFullYear() - birth.getFullYear()
		const monthDiff = today.getMonth() - birth.getMonth()
		if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
			age--
		}
		return age
	}

	// 出生日期变化时自动计算年龄
	const onBirthDateChange = (e : any) => {
		formData.value.birthDate = e.detail.value
		formData.value.age = calculateAge(e.detail.value).toString()
	}

	// 打开编辑弹窗
	const openEditModal = (student : any) => {
		editingStudent.value = student
		formData.value = {
			id: student.studentId,
			name: student.name,
			gender: student.sex ? student.sex : '男',
			birthDate: student.birthday,
			school: student.school,
			address: student.address
		}
		showEditModal.value = true
	}

	// 关闭弹窗
	const closeModal = () => {
		showAddModal.value = false
		showEditModal.value = false
		editingStudent.value = null
		formData.value = {
			id: '',
			name: '',
			gender: '男',
			age: '',
			birthDate: '',
			school: '',
			address: ''
		}
	}

	// 获取学员列表数据
	const getData = () => {
		students.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}

	// 获取学员列表
	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		studentService.GetStudentListPage(page.value.toString()).then(res => {
			if (res.code == 0) {
				const list = res.data.map((item : any) => ({
					...item,
					active:item.status==1?true:false
				}))
				students.value = [...students.value, ...list]
				status.value = res.data.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	// 保存学员
	const saveStudent = () => {
		if (!formData.value.name) {
			Service.Msg('请输入学员姓名')
			return
		}

		if (!formData.value.birthDate) {
			Service.Msg('请选择出生日期')
			return
		}

		// 构造接口请求数据
		const requestData = {
			studentId: formData.value.id ? formData.value.id : '',
			name: formData.value.name,
			sex: formData.value.gender,
			birthday: formData.value.birthDate,
			school: formData.value.school ? formData.value.school : '',
			address: formData.value.address ? formData.value.address : ''
		}
		console.log(requestData);

		// 调用添加学员接口
		studentService.Add(requestData).then((content) => {
			if (content.code == 0) {
				Service.Msg(formData.value.id ? '修改成功!' : '添加成功!')
				getData()
			} else {
				Service.Msg(content.msg)
			}
		})

		closeModal()
	}

	// 确认删除
	const confirmDelete = (student : any) => {
		
		deleteStudent(student.studentId)
	}

	// 删除学员
	const deleteStudent = (id : string) => {
		studentService.Delete(id).then(res => {
			if (res.code == 0) {
				students.value = students.value.filter(s => s.id !== id)
				Service.Msg('修改成功!')
			} else {
				Service.Msg(res.msg)
			}
		})
	}
</script>

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

	.student-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 180rpx;
	}

	/* 页面标题区域 */
	.header-section {
		margin-bottom: 24rpx;

		.header-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

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

	/* 学员列表区域 */
	.students-section {
		.empty-state {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 80rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

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

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

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

	.students-list {
		.student-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.04);
			}

			.student-info {
				display: flex;
				align-items: flex-start;
				gap: 20rpx;
				flex: 1;

				.student-avatar {
					width: 72rpx;
					height: 72rpx;
					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
					flex-shrink: 0;

					.avatar-text {
						color: #fff;
						font-size: 32rpx;
						font-weight: 700;
					}
				}

				.student-details {
					flex: 1;

					.detail-row {
						display: flex;
						align-items: center;
						gap: 8rpx;
						margin-bottom: 10rpx;

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

					.student-name {
						font-size: 32rpx;
						font-weight: 700;
						color: #333;
					}

					.student-gender {
						display: flex;
						align-items: center;
						gap: 4rpx;
						font-size: 24rpx;
						font-weight: 500;
						padding: 4rpx 12rpx;
						border-radius: 12rpx;

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

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

					.detail-label {
						font-size: 24rpx;
						color: #999;
						flex-shrink: 0;
					}

					.detail-value {
						font-size: 26rpx;
						color: #666;

						&.address-text {
							font-size: 24rpx;
							color: #888;
						}
					}
				}
			}

			.student-actions {
				display: flex;
				gap: 12rpx;
				flex-shrink: 0;
				margin-top: 4rpx;

				.action-btn {
					width: 64rpx;
					height: 64rpx;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.25s ease;

					&.edit-btn {
						background-color: #e6f7ff;

						&:active {
							background-color: #bae7ff;
							transform: scale(0.92);
						}
					}

					&.delete-btn {
						background-color: #f3f3f3;

						&:active {
							background-color: #f3f3f3;
							transform: scale(0.92);
						}
					}
				}
			}
		}
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		animation: fadeIn 0.2s ease;
	}

	.student-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 640rpx;
		background-color: #fff;
		border-radius: 28rpx;
		z-index: 999;
		animation: slideUp 0.3s ease;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

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

			.modal-close {
				width: 56rpx;
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				transition: background-color 0.2s ease;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}

		.modal-content {
			padding: 36rpx 30rpx;
		}

		.modal-footer {
			display: flex;
			gap: 16rpx;
			padding: 24rpx 30rpx 36rpx;
			border-top: 1rpx solid #f0f0f0;
		}
	}

	/* 表单样式 */
	.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);
			}

			&.date-picker {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12rpx;
				line-height: 88rpx;

				&.placeholder {
					color: #999;
				}
			}
		}

		.date-picker-wrapper {
			position: relative;

			picker {
				width: 100%;
			}
		}

		.age-display {
			margin-top: 24rpx;
			padding: 28rpx 32rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: -50%;
				right: -20%;
				width: 100rpx;
				height: 100rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: -30%;
				left: 10%;
				width: 60rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0.08);
				border-radius: 50%;
			}

			.age-icon {
				width: 72rpx;
				height: 72rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				backdrop-filter: blur(10rpx);
				border: 2rpx solid rgba(255, 255, 255, 0.3);
			}

			.age-info {
				flex: 1;
				display: flex;
				align-items: baseline;
				gap: 8rpx;

				.age-label {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					font-weight: 500;
				}

				.age-value {
					font-size: 56rpx;
					font-weight: 800;
					color: #fff;
					line-height: 1;
					text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
				}

				.age-unit {
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.9);
					font-weight: 600;
				}
			}
		}

		.gender-selector {
			display: flex;
			gap: 20rpx;

			.gender-option {
				flex: 1;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 8rpx;
				font-size: 26rpx;
				color: #666;
				transition: all 0.3s ease;
				border: 2rpx solid transparent;
				position: relative;
				overflow: hidden;

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

				&.active {
					font-weight: 600;
					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					border-color: #1890ff;
					color: #fff;
					box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.3);

					.gender-icon-box {
						background-color: rgba(255, 255, 255, 0.2);
					}
				}

				.gender-icon-box {
					width: 56rpx;
					height: 56rpx;
					background-color: #e6f7ff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s ease;
				}
			}
		}
	}

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

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

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

	.modal-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);
		}
	}

	/* 底部添加按钮 */
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 20rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 100;

		.add-btn {
			width: 100%;
			height: 96rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			border-radius: 20rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.97);
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			}

			.btn-text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
			}
		}
	}

	/* 动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translate(-50%, -45%);
		}

		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}
</style>