<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">
				<view class="label-text" style="margin-bottom: 20rpx;">选择项目</view>
				<view class="picker-wrapper" @click="showProject=true">
					<text class="picker-text">{{ selectProcet || '请选择项目' }}</text>
					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<up-picker v-model:show="showProject" keyName="name" valueName="planId" @confirm="selectProcetFunc"
			:columns="projectOptions"></up-picker>

		<!-- 日期选择 -->
		<view class="date-filter" style="margin: 20rpx 20rpx 0;" v-if="selectProcet">
			<view class="date-picker" @click="openCalendar()">
				<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
				<view class="date-text">
					<text class="label">开始日期</text>
					<text class="value">{{ begin || '请选择' }}</text>
				</view>
			</view>
			<view class="date-picker" @click="openCalendar()">
				<up-icon name="calendar" color="#3B82F6" size="25"></up-icon>
				<view class="date-text">
					<text class="label">结束日期</text>
					<text class="value">{{ end || '请选择' }}</text>
				</view>
			</view>
		</view>

		<!-- 学生选择区域 -->
		<view class="select-section" v-if="selectProcet && begin ">
			<view class="select-label">
				<text class="label-text">选择学生</text>
			</view>
			<view class="picker-wrapper" @click="showStudentPicker = 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="showStudentPicker" @click="closeStudentPicker"></view>
		<view class="student-picker-modal" v-if="showStudentPicker">
			<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="confirmStudentSelection">确定</text>
				</view>
			</view>
			<scroll-view class="student-list" scroll-y>
				<view v-for="(student, index) in studentList" :key="student.studentId" class="student-item"
					:class="{ 'selected': selectedStudentIndexes.includes(index) }"
					@click="toggleStudentSelection(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 male">
							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
						</view>
					</view>
					<view class="item-info">
						<text class="item-name">{{ student.name }}</text>

					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="tableData.length>0" class="table-section">
			<next-table :show-header="true" :columns="columns" :stripe="true" :fit="false" :show-summary='false'
				:data="tableData" :showPaging='true' :pageIndex="page" @pageChange="pageChange"  @cellClick="cellClick"
				:pageTotal="pageTotal"></next-table>
		</view>


		<view class="empty-container" v-if="begin && 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>

		<!-- 日历弹窗 -->
		<up-calendar :show="showCalendar" mode="date" minDate='1776240407000' @confirm="calendarConfirm"
			@close="calendarClose">
		</up-calendar>

		<!-- 分段详情弹窗 -->
		<up-popup :show="showSegmentPopup" @close="closeSegmentPopup" @open="openSegmentPopup" mode="center" round="16" bgColor="#fff">
			<view class="segment-popup-content">
				<view class="popup-header">
					<text class="popup-title">分段详情</text>
					<u-icon name="close" size="22" color="#999" @click="closeSegmentPopup"></u-icon>
				</view>
				<view class="popup-table">
					<view class="popup-table-header">
						<text class="popup-th">分段数</text>
						<text class="popup-th">距离</text>
						<text class="popup-th">时间</text>
					</view>
					<scroll-view class="popup-scroll" scroll-y>
						<view v-for="(item, index) in row.split('/')" :key="index" class="popup-table-row">
							<text class="popup-td">{{ index+1 }}</text>
							<text class="popup-td">{{ item.split('-')[0] }}</text>
							<text class="popup-td">{{ item.split('-')[1] }}</text>
						</view>
						<view v-if="row.split('/').length === 0" class="popup-empty">
							<text class="popup-empty-text">暂无分段数据</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

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

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

	interface TableDataItem {
		date : string
		name : string
		projectName : string
		segment20 : string
		segment70 : string
		segment120 : string
		segment170 : string
	}
	
	let row=ref('')
	
	// 项目选择
	let showProject = ref(false)
	let selectProcet = ref('')
	let selectId = ref('')

	// 日期选择
	const begin = ref<string>('')
	const end = ref<string>('')
	const showCalendar = ref(false)

	const projectOptions = ref<Array<any>>([[]])

	const studentList = ref<Student[]>([])
	const selectedStudentIndexes = ref<number[]>([])
	const selectedStudentIds = ref<string[]>([])
	const showStudentPicker = 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(', ')
		}
	})

	let page = ref(1)
	let status = ref('loadmore')

	let pageTotal = ref(10)

	const columns = ref([
		{
			label: '训练日期',
			name: 'addTime',
		},
		{
			label: '姓名',
			name: 'name',
		},
		{
			label: '总时长',
			name: 'time',
		},
		{
			label: '详细数据',
			name: 'subsection',
		}
	])

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





	onLoad(() => {
		getProjectData()
	})

	onShow(() => {

	})

	const getProjectData = () => {
		PlanService.GetPlanListNoPage('分段项目').then(res => {
			if (res.code == 0) {
				projectOptions.value[0] = res.data.list

			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const selectProcetFunc = (e : any) => {
		selectProcet.value = e.value[0].name
		selectId.value = e.value[0].planId
		begin.value = ''
		end.value = ''
		selectedStudentIndexes.value = []
		selectedStudentIds.value = []
		tableData.value = []
		loadProjectStudents(selectId.value)
	}

	const openCalendar = () => {
		showCalendar.value = true
	}

	const calendarConfirm = (e : any) => {
		begin.value = e[0]
		end.value = e[e.length - 1]
		showCalendar.value = false
		selectedStudentIndexes.value = []
		selectedStudentIds.value = []
		tableData.value = []
	}

	const calendarClose = () => {
		showCalendar.value = false
	}

	const loadProjectStudents = (projectId : string) => {
		PlanService.GetPlanInfo(projectId).then(res => {
			if (res.code == 0) {
				studentList.value = res.data.plan.users
			} else {
				Service.Msg(res.msg)
			}
		})
	}

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

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

	const confirmStudentSelection = () => {
		selectedStudentIds.value = selectedStudentIndexes.value.map(index => studentList.value[index].studentId)
		showStudentPicker.value = false
		getRecord()
	}

	const closeStudentPicker = () => {
		showStudentPicker.value = false
	}

	const getRecord = () => {
		page.value = 1
		getRecordList()
	}

	const getRecordList = () => {
		let studentIdList = selectedStudentIndexes.value.map(index => {
			return studentList.value[index].studentId
		})

		let data = {
			planId: selectId.value,
			studentId: JSON.stringify(studentIdList),
			sTime: begin.value,
			eTime: end.value,
			page: page.value
		}
		PlanService.GetFenduanLog(data).then(res => {
			if (res.code == 0) {
				pageTotal.value = res.data.pageTotal
				tableData.value = res.data.list
			} else {
				Service.Msg(res.msg)
			}
		})
	}



	const pageChange = (e) => {
		page.value = e
		getRecordList()
	}
	
	const showSegmentPopup = ref(false)

	interface SegmentItem {
		index: number
		distance: string
		time: string
	}

	const segmentPopupData = ref<SegmentItem[]>([])

	const openSegmentPopup = () => {
		showSegmentPopup.value = true
	}

	const closeSegmentPopup = () => {
		showSegmentPopup.value = false
	}

	const cellClick = (rows: any) => {
		row.value=rows.subsection
		openSegmentPopup()
	}
</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;
			}
		}
	}

	.date-filter {
		display: flex;
		gap: 24rpx;

		.date-picker {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;

			.date-text {
				.label {
					display: block;
					font-size: 26rpx;
					color: #999;
				}

				.value {
					display: block;
					font-size: 30rpx;
					color: #333;
					margin-top: 4rpx;
					font-weight: 600;
				}
			}
		}
	}

	/* ==================== 选择区域通用样式 ==================== */
	.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: #faad14;
				transform: scale(0.98);
			}

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

	.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, #faad14 0%, #ffc53d 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, #faad14 0%, #ffc53d 50%, #d48806 100%);
						box-shadow: 0 4rpx 16rpx rgba(250, 173, 20, 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, 0, 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: #faad14;
							background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
							box-shadow: 0 2rpx 8rpx rgba(250, 173, 20, 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, #1890ff 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: #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);
		}
	}

	.segment-popup-content {
		width: 620rpx;
		max-height: 70vh;
		padding: 32rpx;
		display: flex;
		flex-direction: column;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.popup-title {
				font-size: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.popup-table {
			background-color: #fafafa;
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.popup-table-header {
				display: flex;
				background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
				padding: 24rpx 0;

				.popup-th {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-weight: 700;
					color: #fff;
				}
			}

			.popup-scroll {
				max-height: 400rpx;

				.popup-table-row {
					display: flex;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #eee;
					background-color: #fff;

					&:nth-child(even) {
						background-color: #fafafa;
					}

					.popup-td {
						flex: 1;
						text-align: center;
						font-size: 28rpx;
						color: #333;
					}
				}

				.popup-empty {
					padding: 60rpx 0;
					text-align: center;

					.popup-empty-text {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>