<template>
	<view class="paragraph-container">
		<view class="header-section">
			<view class="header-title">
				<text class="title">">分段数据</text>
				<text class="subtitle">学生分段训练成绩分析</text>
			</view>
		</view>

		<view class="select-section">
			<view class="select-label">
				<text class="label-text">">选择项目</text>
			</view>
			<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex"
				@change="handleProjectChange">
				<view class="picker-wrapper">
					<text class="picker-text">{{ selectedProjectName }}</text>
					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
				</view>
			</picker>
		</view>

		<view class="calendar-wrapper" v-if="selectedProjectId">
			<uni-calendar
				:insert="true"
				:lunar="false"
				:show-month="true"
				:selected="selectedDates"
				@monthSwitch="handleMonthSwitch"
				@change="handleDateChange">
			</uni-calendar>
		</view>

		<view class="select-section" v-if="selectedProjectId && selectedDate">
			<view class="select-label">
				<text class="label-text">选择学生</text>
			</view>
			<view class="picker-wrapper" @click="showStudentSelect = true">
				<text class="picker-text">{{ selectedStudentDisplay }}</text>
				<u-icon name="arrow-down" size="18" color="#999"></u-icon>
			</view>
		</view>

		<view class="modal-overlay" v-if="showStudentSelect" @click="closeStudentSelect"></view>
		<view class="student-picker-modal" v-if="showStudentSelect">
			<view class="picker-header">
				<text class="header-title">选择学生</text>
				<view class="header-actions">
					<text class="action-btn" @click="selectAllStudents">全选</text>
					<text class="action-btn primary" @click="confirmStudentSelect">确定</text>
				</view>
			</view>
			<scroll-view class="student-list" scroll-y>
				<view v-for="(student, index) in studentList" :key="student.id" class="student-item"
					:class="{ 'selected': selectedStudentIndexes.includes(index) }"
					@click="toggleStudentSelect(index)">
					<view class="item-checkbox">
						<view class="checkbox-inner" :class="{ 'checked': selectedStudentIndexes.includes(index) }">
							<u-icon v-if="selectedStudentIndexes.includes(index)" name="checkmark" size="14"
								color="#fff"></u-icon>
						</view>
					</view>
					<view class="item-avatar">
						<view class="avatar-circle"
							:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
						</view>
					</view>
					<view class="item-info">
						<text class="item-name">{{ student.name }}</text>
						<view class="item-meta">
							<text class="gender-badge"
								:class="{ 'male': student.gender === '男', 'female': student.gender === '女' }">
								{{ student.gender }}
							</text>
							<text class="age-text">{{ student.age }}岁</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="table-section" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length > 0">
			<view class="table-wrapper-scroll">
				<view class="table-header">
					<view class="header-row">
						<view class="header-cell" style="width: 100px;">日期</view>
						<view class="header-cell" style="width: 100px;">姓名</view>
						<view class="header-cell" style="width: 120px;">项目</view>
						<view class="header-cell" style="width: 100px;">20米</view>
						<view class="header-cell" style="width: 100px;">70米</view>
						<view class="header-cell" style="width: 100px;">120米</view>
						<view class="header-cell" style="width: 100px;">170米</view>
					</view>
				</view>
				<view class="table-body">
					<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="body-row" :class="{ 'even': rowIndex % 2 === 0, 'odd': rowIndex % 2 === 1 }">
						<view class="body-cell" style="width: 100px;">{{ row.date }}</view>
						<view class="body-cell" style="width: 100px;">{{ row.name }}</view>
						<view class="body-cell" style="width: 120px;">{{ row.projectName }}</view>
						<view class="body-cell" style="width: 100px;">{{ row.segment20 }}</view>
						<view class="body-cell" style="width: 100px;">{{ row.segment70 }}</view>
						<view class="body-cell" style="width: 100px;">{{ row.segment120 }}</view>
						<view class="body-cell" style="width: 100px;">{{ row.segment170 }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-container" v-if="selectedDate && selectedStudentIndexes.length > 0 && tableData.length === 0">
			<view class="empty-icon">
				<u-icon name="file-text" size="80" color="#ccc"></u-icon>
			</view>
			<text class="empty-text">该日期暂无分段数据</text>
		</view>
	</view>
</template>

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

	interface Project {
		id: string
		name: string
	}

	interface Student {
		id: string
		name: string
		gender: string
		age: number
	}

	interface TableDataItem {
		date: string
		name: string
		projectName: string
		segment20: string
		segment70: string
		segment120: string
		segment170: string
	}

	const currentYear = ref(new Date().getFullYear())
	const currentMonth = ref(new Date().getMonth() + 1)
	const selectedDate = ref('')

	const projectList = ref<Project[]>([
		{ id: '1', name: '100米自由泳' },
		{ id: '2', name: '200米自由泳' },
		{ id: '3', name: '50米蛙泳' },
		{ id: '4', name: '100米蝶泳' }
	])

	const projectOptions = ref(projectList.value)
	const selectedProjectIndex = ref(-1)
	const selectedProjectId = ref('')

	const selectedProjectName = computed(() => {
		if (selectedProjectIndex.value === -1) {
			return '请选择项目'
		}
		return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
	})

	const selectedDates = ref([
		{ date: '2026-03-12', info: '分段' },
		{ date: '2026-03-14', info: '分段' },
		{ date: '2026-03-16', info: '分段' },
		{ date: '2026-03-19', info: '分段' },
		{ date: '2026-03-24', info: '分段' }
	])

	const studentList = ref<Student[]>([])
	const selectedStudentIndexes = ref<number[]>([])
	const selectedStudentIds = ref<string[]>([])
	const showStudentSelect = ref(false)

	const selectedStudentDisplay = computed(() => {
		if (selectedStudentIndexes.value.length === 0) {
			return '请选择学生'
		} else {
			const names = selectedStudentIndexes.value.map(index => studentList.value[index].name)
			return names.length > 2 ? `${names.slice(0, 2).join(', ')}等${names.length}人` : names.join(', ')
		}
	})

	const tableData = ref<TableDataItem[]>([])

	const mockData: Record<string, Record<string, any[]>> = {
		'1': {
			'2026-03-12': [
				{ name: '王小明', projectName: '100米'自由泳', segment20: 0.037, segment70: 0.128, segment120: 0.219, segment170: 0.311 },
				{ name: '张小红', projectName: '100米'自由泳', segment20: 0.042, segment70: 0.145, segment120: 0.248, segment170: 0.352 },
				{ name: '李小龙', projectName: '100米'自由泳', segment20: 0.032, segment70: 0.112, segment120: 0.192, segment170: 0.272 }
			],
			'2026-03-14': [
				{ name: '王小明', projectName: '100米'自由泳', segment20: 0.035, segment70: 0.122, segment120: 0.209, segment170: 0.296 },
				{ name: '张小红', projectName: '100米'自由泳', segment20: 0.040, segment70: 0.138, segment120: 0.236, segment170: 0.334 }
			]
		},
		'2': {
			'2026-03-16': [
				{ name: '赵小芳', projectName: '200米'自由泳', segment20: 0.038, segment70: 0.133, segment120: 0.228, segment170: 0.323 }
			]
		},
		'3': {
			'2026-03-19': [
				{ name: '陈小刚', projectName: '50米蛙泳', segment20: 0.044, segment70: 0.154, segment120: 0.264, segment170: 0.374 }
			]
		},
		'4': {
			'2026-03-24': [
				{ name: '周小丽', projectName: '100米'蝶泳', segment20: 0.041, segment70: 0.143, segment120: 0.245, segment170: 0.347 }
			]
		}
	}

	const mockStudents: Record<string, Student[]> = {
		'1': [
			{ id: 's1', name: '王小明', gender: '男', age: 12 },
			{ id: 's2', name: '张小红', gender: '女', age: 11 },
			{ id: 's3', name: '李小龙', gender: '男', age: 13 }
		],
		'2': [
			{ id: 's4', name: '赵小芳', gender: '女', age: 10 }
		],
		'3': [
			{ id: 's5', name: '陈小刚', gender: '男', age: 14 }
		],
		'4': [
			{ id: 's6', name: '周小丽', gender: '女', age: 12 }
		]
	}

	onLoad(() => {
		loadData()
	})

	onShow(() => {

	})

	const loadData = () => {

	}

	const handleProjectChange = (e: any) => {
		const index = e.detail.value
		selectedProjectIndex.value = index
		const selectedProject = projectList.value[index]

		if (selectedProject) {
			selectedProjectId.value = selectedProject.id
			selectedDate.value = ''
			selectedStudentIndexes.value = []
			selectedStudentIds.value = []
			tableData.value = []
			loadProjectStudents(selectedProject.id)
		}
	}

	const handleMonthSwitch = (e: any) => {
		currentYear.value = e.year
		currentMonth.value = e.month
		loadData()
		selectedDate.value = ''
		selectedStudentIndexes.value = []
		selectedStudentIds.value = []
		tableData.value = []
	}

	const handleDateChange = (e: any) => {
		const date = e.fulldate
		selectedDate.value = date
		selectedStudentIndexes.value = []
		selectedStudentIds.value = []
		tableData.value = []
	}

	const loadProjectStudents = (projectId: string) => {
		const students = mockStudents[projectId] || []
		studentList.value = students
		console.log(`项目 ${projectId} 的学生列表加载完成，共 ${students.length} 位学生`)
	}

	const selectAllStudents = () => {
		selectedStudentIndexes.value = studentList.value.map((_, index) => index)
	}

	const toggleStudentSelect = (index: number) => {
		const idx = selectedStudentIndexes.value.indexOf(index)
		if (idx > -1) {
			selectedStudentIndexes.value.splice(idx, 1)
		} else {
			selectedStudentIndexes.value.push(index)
		}
	}

	const confirmStudentSelect = () => {
		selectedStudentIds.value = selectedStudentIndexes.value.map(index => studentList.value[index].id)
		showStudentSelect.value = false
		filterAndLoadData()
	}

	const closeStudentSelect = () => {
		showStudentSelect.value = false
	}

	const filterAndLoadData = () => {
		if (!selectedDate.value || selectedStudentIndexes.value.length === 0) {
			tableData.value = []
			return
		}

		const projectData = mockData[selectedProjectId.value]
		if (!projectData) {
			tableData.value = []
			return
		}

		const dateData = projectData[selectedDate.value]
		if (!dateData) {
			tableData.value = []
			return
		}

		const selectedStudentNames = selectedStudentIndexes.value.map(index => studentList.value[index].name)
		const filteredData = dateData.filter(item => selectedStudentNames.includes(item.name))

		tableData.value = filteredData.map(item => ({
			date: selectedDate.value,
			name: item.name,
			projectName: item.projectName,
			segment20: item.segment20.toFixed(3),
			segment70: item.segment70.toFixed(3),
			segment120: item.segment120.toFixed(3),
			segment170: item.segment170.toFixed(3)
		}))
	}
</script>

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

	.paragraph-container {
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

/* ==================== 页面标题区域) ==================== */
	.header-section {
		background-color: #fff;
		padding: 32rpx 28rpx 24rpx;
		margin-bottom: 20rpx;

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

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

/* ==================== 选择区域通用样式 ==================== */
	.select-section {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 28rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;

		.select-label {
			margin-bottom: 16rpx;

			.label-text {
				font-size: 26rpx;
				font-weight: 600;
				color: #666;
			}
		}

		.picker-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			background-color: #f8f8f8;
			border-radius: 12rpx;
			border: 1rpx solid #e8e8e8;
			transition: all 0.3s ease;

			&:active {
				background-color: #f0f0f0;
				border-color: #1890ff;
				transform: scale(0.98);
			}

			.picker-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

/* ==================== 日历组件包装 ==================== */
	.calendar-wrapper {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		padding: 20rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

/* ==================== 学生选择器弹窗 ==================== */
	.student-picker-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 70vh;
		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
		border-radius: 32rpx 32rpx 0 0;
		z-index: 999;
		animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.12);
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 36rpx 32rpx 28rpx;
			background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
			flex-shrink: 0;

			.header-title {
				font-size: 36rpx;
				font-weight: 700;
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			background-clip: text;
			}

			.header-actions {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.action-btn {
					font-size: 26rpx;
					color: #666;
					padding: 14rpx 28rpx;
					border-radius: 24rpx;
					background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
					font-weight: 600;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

					&.primary {
						color: #fff;
						background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
						box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
					}

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

		.student-list {
			flex: 1;
			overflow-y: auto;
			padding: 0 20rpx 40rpx;

			.student-item {
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 24rpx;
				background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
				border-radius: 20rpx;
				margin-top: 16rpx;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06), 0 0 0 1rpx rgba(0, 0kt, 0, 0.04) inset;
				position: relative;
				overflow: hidden;

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

				.item-checkbox {
					flex-shrink: 0;
					position: relative;
					z-index: 1;

					.checkbox-inner {
						width: 40rpx;
						height: 40rpx;
						border-radius: 10rpx;
						border: 2rpx solid #d9d9d9;
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

						&.checked {
							border-color: #1890ff;
							background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
							box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
						}
					}
				}

				.item-avatar {
					flex-shrink: 0;
					position: relative;
					z-index: 1;

					.avatar-circle {
						width: 72rpx;
						height: 72rpx;
						border-radius: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
						position: relative;
						overflow: hidden;
						transition: all 0.3s ease;

						&.male {
							background: linear-gradient(135deg, #1890ffkt 0%, #40a9ff 50%, #096dd9 100%);
						}

						&.female {
							background: linear-gradient(135deg, #fa8c16 0%, #ffa940 50%, #d46b08 100%);
						}

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

						.avatar-text {
							font-size: 34rpx;
							color: #fff;
							font-weight: 700;
							letter-spacing: 2rpx;
						}
					}
				}

				.item-info {
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					gap: 10rpx;
					position: relative;
					z-index: 1;

					.item-name {
						font-size: 30rpx;
						font-weight: 600;
						color: #333;
						letter-spacing: 1rpx;
					}

					.item-meta {
						display: flex;
						align-items: center;
						gap: 12rpx;

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

							&.male {
								color: #1890ff;
								background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%);
							}

							&.female {
								color	color: #fa8c16;
								background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(255, 169, 64, 0.05) 100%);
							}
						}

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

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
		backdrop-filter: blur(10rpx);
		z-index: 998;
		animation: fadeIn 0.3s ease;
	}

/* ==================== 表格区域 ==================== */
	.table-section {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.table-wrapper-scroll {
			width: 100%;
			overflow-x: auto;
		}

		.table-header {
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);

			.header-row {
				display: flex;

				.header-cell {
					min-width: 100px;
					padding: 24rpx 16rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #fff;
					text-align: center;
					border-right: 1rpx solid rgba(255, 255, 255, 0.1);
					flex-shrink: 0;

					&:last-child {
						border-right: none;
					}
				}
			}
		}

		.table-body {
			.body-row {
				display: flex;
				transition: all 0.3s ease;

				&.even {
					background-color: #fafafa;
				}

				&.odd {
					background-color: #fff;
				}

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

				.body-cell {
					min-width: 100px;
					padding: 24rpx 16rpx;
					font-size: 26rpx;
					color: #333;
					text-align: center;
					border-right: 1rpx solid #f0f0f0;
					flex-shrink: 0;

					&:last-child {
						border-right: none;
					}
				}
			}
		}
	}

/* ==================== 空状态容器 ==================== */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 80rpx 40rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

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

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>