<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>
			<!-- 学生选择器组件 -->
			<picker mode="selector" :range="studentOptions" range-key="name" :value="selectedStudentIndex"
				@change="handleStudentChange">
				<view class="picker-wrapper">
					<text class="picker-text">{{ selectedStudentName }}</text>
					<u-icon name="arrow-down" size="18" color="#999"></u-icon>
				</view>
			</picker>
		</view>

		<!-- ==================== 未完成选择提示 ==================== -->
		<!-- 当用户未完成所有选择时显示提示 -->
		<!-- <view class="hint-state" v-if="!isDataReady">
			<view class="hint-icon">
				<u-icon name="list" size="80" color="#1890ff"></u-icon>
			</view>
			<text class="hint-text">{{ hintText }}</text>
		</view> -->

		<!-- ==================== 数据展示区域 ==================== -->
		<!-- 仅在完成所有选择后显示 -->
		<view class="data-section" v-if="isDataReady">
			<!-- 学生信息卡片 -->
			<view class="student-card">
				<view class="student-header">
					<text class="card-title">学生信息</text>
				</view>
				<view class="student-info">
					<!-- 学生基本信息项 -->
					<view class="info-item">
						<text class="info-label">姓名</text>
						<text class="info-value">{{ currentStudent?.name }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">性别</text>
						<text class="info-value">{{ currentStudent?.gender }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">年龄</text>
						<text class="info-value">{{ currentStudent?.age }}岁</text>
					</view>
					<view class="info-item">
						<text class="info-label">项目</text>
						<text class="info-value">{{ currentStudent?.projectName }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">总成绩</text>
						<text class="info-value highlight">{{ currentStudent?.totalTime }}s</text>
					</view>
				</view>
			</view>

			<!-- 分段记录表格卡片 -->
			<view class="segment-card">
				<view class="segment-header">
					<text class="card-title">分段记录</text>
					<view class="segment-count">
						<u-icon name="list" size="14" color="#1890ff"></u-icon>
						<text class="count-text">{{ segmentTableData.length }}段</text>
					</view>
				</view>

				<!-- 分段数据表格 -->
				<view class="table-wrapper">
					<sl-table
						:columns="segmentColumns"
						:tableData="segmentTableData"
						:showRowIndex="false"
						@cell-click="handleSegmentCellClick">
						<!-- 空数据插槽 -->
						<template #empty>
							<view class="empty-container">
								<view class="empty-icon">
									<u-icon name="file-text" size="80" color="#ccc"></u-icon>
								</view>
								<text class="empty-text">暂无分段数据</text>
							</view>
						</template>
					</sl-table>
				</view>
			</view>
		</view>
	</view>
</template>

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

	// ==================== TypeScript 接口定义 ====================

	/**
	 * 项目接口
	 * 定义游泳项目的基本信息
	 */
	interface Project {
		id: string				// 项目 ID
		name: string			// 项目名称
	}

	/**
	 * 学生接口
	 * 定义学生的基本信息和成绩
	 */
	interface Student {
		id: string				// 学生 ID
		name: string			// 学生姓名
		gender: string			// 性别：男/女
		age: number			// 年龄
		projectName: string		// 项目名称
		totalTime: number		// 总成绩（秒）
		projectId: string		// 所属项目 ID
	}

	/**
	 * 分段数据接口
	 * 定义分段训练的详细信息
	 */
	interface SegmentData {
		id: string				// 分段 ID
		distance: number		// 分段距离（米）
		time: number			// 分段成绩（秒）
		timeDiff: number		// 时间差（与平均值的差值，秒）
	}

	/**
	 * 完整学生记录接口
	 * 包含学生信息和分段数据
	 */
	interface StudentRecord {
		student: Student		// 学生基本信息
		segments: SegmentData[]	// 分段数据列表
		date: string			// 记录日期
	}

	// ==================== 响应式数据 - 年月相关 ====================

	/**
	 * 当前年份
	 * 用于月份切换时记录当前年份
	 */
	const currentYear = ref(new Date().getFullYear())

	/**
	 * 当前月份（1-12）
	 * 用于月份切换时记录当前月份
	 */
	const currentMonth = ref(new Date().getMonth() + 1)

	// ==================== 响应式数据 - 项目相关 ====================

	/**
	 * 项目列表数据
	 * 从后端 API 获取或使用模拟数据
	 */
	const projectList = ref<Project[]>([
		{ id: '1', name: '100米自由泳' },
		{ id: '2', name: '200米自由泳' },
		{ id: '3', name: '50米蛙泳' },
		{ id: '4', name: '100米蝶泳' }
	])

	/**
	 * 项目选择器选项
	 * 用于 picker 组件显示
	 */
	const projectOptions = ref(projectList.value)

	/**
	 * 当前选中的项目索引
	 * 用于 picker 组件的 value 属性
	 */
	const selectedProjectIndex = ref(-1)

	/**
	 * 当前选中的项目 ID
	 * 用于后续数据查询
	 */
	const selectedProjectId = ref('')

	/**
	 * 计算属性：当前选中的项目名称
	 * 根据选中的索引返回项目名称，默认显示提示文本
	 */
	const selectedProjectName = computed(() => {
		if (selectedProjectIndex.value === -1) {
			return '请选择项目'
		}
		return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
	})

	// ==================== 响应式数据 - 日期相关 ====================

	/**
	 * 当前选中的日期
	 * 格式：YYYY-MM-DD
	 */
	const selectedDate = ref('')

	/**
	 * 日历打点数据
	 * 用于在日历上标记有训练记录的日期
	 * date: 日期字符串，'YYYY-MM-DD'
	 * info: 显示在日期上的标记信息
	 */
	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[]>([])

	/**
	 * 学生选择器选项
	 * 用于 picker 组件显示
	 */
	const studentOptions = ref<Student[]>([])

	/**
	 * 当前选中的学生索引
	 * 用于 picker 组件的 value 属性
	 */
	const selectedStudentIndex = ref(-1)

	/**
	 * 当前选中的学生 ID
	 * 用于后续数据查询
	 */
	const selectedStudentId = ref('')

	/**
	 * 计算属性：当前选中的学生名称
	 * 根据选中的索引返回学生名称，默认显示提示文本
	 */
	const selectedStudentName = computed(() => {
		if (selectedStudentIndex.value === -1) {
			return '请选择学生'
		}
		return studentList.value[selectedStudentIndex.value]?.name || '请选择学生'
	})

	// ==================== 响应式数据 - 分段相关 ====================

	/**
	 * 当前选中的学生详细信息
	 * 包含学生基本信息和分段数据
	 */
	const currentStudent = ref<Student | null>(null)

	/**
	 * 分段数据列表（用于表格展示）
	 * 按段序号排序后的数据
	 */
	const segmentList = ref<SegmentData[]>([])

	/**
	 * 分段表格列定义
	 * 列顺序：分段距离、时间差、分段成绩
	 */
	const segmentColumns = ref([
		{
			label: '分段距离',
			prop: 'distance',
			width: '140px'
		},
		{
			label: '时间差',
			prop: 'timeDiff',
			width: '140px'
		},
		{
			label: '分段成绩',
			prop: 'time',
			width: '140px'
		}
	])

	/**
	 * 分段表格数据
	 * 将分段数据转换为表格所需格式
	 */
	const segmentTableData = computed(() => {
		return segmentList.value.map(segment => ({
			distance: segment.distance,		// 分段距离
			timeDiff: segment.timeDiff,		// 时间差
			time: segment.time			// 分段成绩
		}))
	})

	// ==================== 计算属性 - 页面状态判断 ====================

	/**
	 * 计算属性：数据是否准备就绪
	 * 只有项目、日期、学生都选择后才返回 true
	 */
	const isDataReady = computed(() => {
		return selectedProjectId.value !== '' &&
		       selectedDate.value !== '' &&
		       selectedStudentId.value !== '' &&
		       currentStudent.value !== null
	})

	/**
	 * 计算属性：提示文本
	 * 根据当前选择状态返回不同的提示信息
	 */
	const hintText = computed(() => {
		if (!selectedProjectId.value) {
			return '请先选择项目'
		} else if (!selectedDate.value) {
			return '请在日历选择日期'
		} else if (!selectedStudentId.value) {
			return '请选择学生'
		}
		return '暂无数据'
	})

	// ==================== 模拟数据 ====================

	/**
	 * 模拟的学生记录数据
	 * 按项目 ID 分组，每组包含该项目的学生记录
	 * 每个学生记录包含多个日期的分段数据
	 */
	const mockStudentRecords: Record<string, StudentRecord[]> = {
		'1': [ // 100米自由泳项目的学生记录
			{
				student: {
					id: 's1',
					name: '王小明',
					gender: '男',
					age: 12,
					projectName: '100米自由泳',
					totalTime: 68.5,
					projectId: '1'
				},
				date: '2026-03-12',
				segments: [
					{ id: 'seg1', distance: 25, time: 17.2, timeDiff: 0.8 },
					{ id: 'seg2', distance: 25, time: 17.5, timeDiff: 1.1 },
					{ id: 'seg3', distance: 25, time: 16.8, timeDiff: 0.4 },
					{ id: 'seg4', distance: 25, time: 17.0, timeDiff: 0.6 }
				]
			},
			{
				student: {
					id: 's2',
					name: '张小红',
					gender: '女',
					age: 11,
					projectName: '100米自由泳',
					totalTime: 72.3,
					projectId: '1'
				},
				date: '2026-03-12',
				segments: [
					{ id: 'seg5', distance: 25, time: 18.5, timeDiff: 1.2 },
					{ id: 'seg6', distance: 25, time: 18.0, timeDiff: 0.7 },
					{ id: 'seg7', distance: 25, time: 17.8, timeDiff: 0.5 },
					{ id: 'seg8', distance: 25, time: 18.0, timeDiff: 0.7 }
				]
			},
			{
				student: {
					id: 's3',
					name: '李小龙',
					gender: '男',
					age: 13,
					projectName: '100米自由泳',
					totalTime: 65.2,
					projectId: '1'
				},
				date: '2026-03-14',
				segments: [
					{ id: 'seg9', distance: 25, time: 16.5, timeDiff: 0.1 },
					{ id: 'seg10', distance: 25, time: 16.3, timeDiff: -0.1 },
					{ id: 'seg11', distance: 25, time: 16.4, timeDiff: 0 },
					{ id: 'seg12', distance: 25, time: 16.0, timeDiff: -0.4 }
				]
			}
		],
		'2': [ // 200米自由泳项目的学生记录
			{
				student: {
					id: 's4',
					name: '赵小芳',
					gender: '女',
					age: 10,
					projectName: '200米自由泳',
					totalTime: 145.2,
					projectId: '2'
				},
				date: '2026-03-16',
				segments: [
					{ id: 'seg13', distance: 50, time: 36.5, timeDiff: 2.1 },
					{ id: 'seg14', distance: 50, time: 35.8, timeDiff: 1.4 },
					{ id: 'seg15', distance: 50, time: 36.2, timeDiff: 1.8 },
					{ id: 'seg16', distance: 50, time: 36.7, timeDiff: 2.3 }
				]
			}
		],
		'3': [ // 50米蛙泳项目的学生记录
			{
				student: {
					id: 's5',
					name: '陈小刚',
					gender: '男',
					age: 14,
					projectName: '50米蛙泳',
					totalTime: 42.8,
					projectId: '3'
				},
				date: '2026-03-19',
				segments: [
					{ id: 'seg17', distance: 25, time: 21.5, timeDiff: 1.2 },
					{ id: 'seg18', distance: 25, time: 21.3, timeDiff: 1.0 }
				]
			}
		],
		'4': [ // 100米蝶泳项目的学生记录
			{
				student: {
					id: 's6',
					name: '周小丽',
					gender: '女',
					age: 12,
					projectName: '100米蝶泳',
					totalTime: 78.6,
					projectId: '4'
				},
				date: '2026-03-24',
				segments: [
					{ id: 'seg19', distance: 25, time: 19.8, timeDiff: 1.5 },
					{ id: 'seg20', distance: 25, time: 19.5, timeDiff: 1.2 },
					{ id: 'seg21', distance: 25, time: 19.6, timeDiff: 1.3 },
					{ id: 'seg22', distance: 25, time: 19.7, timeDiff: 1.4 }
				]
			}
		]
	}

	// ==================== 生命周期钩子 ====================

	/**
	 * 页面加载时触发
	 * 在页面初始化时执行，只执行一次
	 */
	onLoad(() => {
		// 初始化数据，加载项目列表
		loadProjectData()
	})

	/**
	 * 页面显示时触发
	 * 每次页面从后台切换到前台时执行
	 */
	onShow(() => {
		// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
		// 例如：检查是否有数据更新，重新加载当前选中的数据
	})

	// ==================== 业务逻辑方法 - 项目相关 ====================

	/**
	 * 加载项目数据
	 * 从后端 API 获取项目列表
	 * TODO: 实际项目中应该调用后端 API
	 */
	const loadProjectData = () => {
		// 示例代码（调用后端 API）：
		// Service.Request('/api/projects', 'GET').then(res => {
		// 	projectList.value = res.data
		// 	projectOptions.value = res.data
		// })

		// 当前使用模拟数据，已在初始化时赋值
		console.log('项目数据加载完成')
	}

	/**
	 * 处理项目选择变化事件
	 * 当用户选择项目时触发
	 * @param e picker 选择事件对象，包含 detail.value 属性表示选中的索引
	 */
	const handleProjectChange = (e: any) => {
		// 获取选中的项目索引
		const index = e.detail.value

		// 更新选中项目的索引
		selectedProjectIndex.value = index

		// 获取选中的项目
		const selectedProject = projectList.value[index]

		if (selectedProject) {
			// 更新选中项目的 ID
			selectedProjectId.value = selectedProject.id

			// 清空之前的日期和学生选择
			selectedDate.value = ''
			selectedStudentId.value = ''
			selectedStudentIndex.value = -1
			currentStudent.value = null
			segmentList.value = []

			// 加载该项目下的学生列表
			loadProjectStudents(selectedProject.id)
		}

		// TODO: 实际项目中可能需要调用 API 获取该项目的学生列表
	}

	// ==================== 业务逻辑方法 - 日历相关 ====================

	/**
	 * 处理日历月份切换事件
	 * 当用户切换日历的月份时触发
	 * @param e 切换事件对象，包含 year 和 month 属性
	 */
	const handleMonthSwitch = (e: any) => {
		// 更新当前年份
		currentYear.value = e.year

		// 更新当前月份
		currentMonth.value = e.month

		// 重新加载数据
		// 获取切换后月份的训练记录和日历标记
		loadMonthData()

		// 清空选中的日期
		// 因为切换了月份，之前选择的日期可能不再显示
		selectedDate.value = ''

		// 清空学生选择和数据
		selectedStudentId.value = ''
		selectedStudentIndex.value = -1
		currentStudent.value = null
		segmentList.value = []

		// TODO: 实际项目中应该调用 API 获取该月份的日历标记数据
	}

	/**
	 * 处理日历日期选择事件
	 * 当用户点击日历上的某个日期时触发
	 * @param e 选择事件对象，fulldate 属性包含完整的日期字符串
	 */
	const handleDateChange = (e: any) => {
		// 获取选择的完整日期，格式为 'YYYY-MM-DD'
		const date = e.fulldate

		// 更新选中的日期
		selectedDate.value = date

		// 清空学生选择
		selectedStudentId.value = ''
		selectedStudentIndex.value = -1
		currentStudent.value = null
		segmentList.value = []

		// TODO: 实际项目中可能需要调用 API 获取该日期的数据
		// 并根据日期加载该日期的学生列表
	}

	/**
	 * 加载月份数据
	 * 根据当前年月加载日历标记数据
	 */
	const loadMonthData = () => {
		// TODO: 实际项目中应该调用 API 获取该月份的日历标记
		// Service.Request('/api/segment/dates', 'GET', {
		// 	year: currentYear.value,
		// 	month: currentMonth.value,
		// 	projectId: selectedProjectId.value
		// }).then(res => {
		// 	selectedDates.value = res.data
		// })

		console.log(`加载 ${currentYear.value}年${currentMonth.value}月 的日历标记数据`)
	}

	// ==================== 业务逻辑方法 - 学生相关 ====================

	/**
	 * 加载项目学生列表
	 * 根据项目 ID 获取该项目的学生列表
	 * @param projectId 项目 ID
	 */
	const loadProjectStudents = (projectId: string) => {
		// 从模拟数据中提取该项目的学生列表（去重）
		const records = mockStudentRecords[projectId] || []
		const uniqueStudents = new Map<string, Student>()
		records.forEach(record => {
			if (!uniqueStudents.has(record.student.id)) {
				uniqueStudents.set(record.student.id, record.student)
			}
		})
		studentList.value = Array.from(uniqueStudents.values())
		studentOptions.value = studentList.value

		console.log(`项目 ${projectId} 的学生列表加载完成，共 ${studentList.value.length} 位学生`)
	}

	/**
	 * 处理学生选择变化事件
	 * 当用户选择学生时触发
	 * @param e picker 选择事件对象，包含 detail.value 属性表示选中的索引
	 */
	const handleStudentChange = (e: any) => {
		// 获取选中的学生索引
		const index = e.detail.value

		// 更新选中学生的索引
		selectedStudentIndex.value = index

		// 获取选中的学生
		const selectedStudent = studentList.value[index]

		if (selectedStudent) {
			// 更新选中学生的 ID
			selectedStudentId.value = selectedStudent.id

			// 加载学生数据（包括分段数据）
			loadStudentData(selectedProjectId.value, selectedStudentId.value, selectedDate.value)
		}

		// TODO: 实际项目中可能需要调用 API 获取学生的详细数据和分段记录
	}

	/**
	 * 加载学生数据
	 * 根据项目 ID、学生 ID 和日期获取学生的详细信息和分段数据
	 * @param projectId 项目 ID
	 * @param studentId 学生 ID
	 * @param date 记录日期
	 */
	const loadStudentData = (projectId: string, studentId: string, date: string) => {
		// 从模拟数据中查找匹配的记录
		const records = mockStudentRecords[projectId] || []
		const record = records.find(r => r.student.id === studentId && r.date === date)

		if (record) {
			// 更新学生信息
			currentStudent.value = record.student

			// 更新分段列表（已按原顺序，通过计算属性转换为表格数据）
			segmentList.value = record.segments

			console.log(`学生数据加载完成：${record.student.name}，共 ${record.segments.length} 个分段`)
		} else {
			// 未找到匹配的记录
			currentStudent.value = null
			segmentList.value = []

			Service.Msg('未找到该日期的记录数据')
		}

		// TODO: 实际项目中应该调用后端 API
		// Service.Request(`/api/segments?projectId=${projectId}&studentId=${studentId}&date=${date}`, 'GET')
		//   .then(res => {
		//     currentStudent.value = res.data.student
		//     segmentList.value = res.data.segments
		//   })
	}

	// ==================== 业务逻辑方法 - 分段相关 ====================

	/**
	 * 处理分段表格单元格点击事件
	 * 点击某分段单元格查看详情
	 * @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
	 */
	const handleSegmentCellClick = (event: any) => {
		console.log('分段表格单元格点击事件:', event)
		// TODO: 可以跳转到分段详情页面或弹出详细信息
		// Service.GoPage('/pages/dataAnalyze/segmentDetail', { segmentId: event.rowData.id })
	}
</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);
	}

	/* ==================== 提示状态容器 ==================== */
	.hint-state {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 80rpx 40rpx;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

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

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

	/* ==================== 数据展示区域 ==================== */
	.data-section {
		margin: 0 20rpx;

		// 学生信息卡片
		.student-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 28rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;

			

			.student-header {
				margin-bottom: 24rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f0f0f0;

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

			.student-info {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20rpx;

				.info-item {
					display: flex;
					flex-direction: column;
					gap: 8rpx;

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

					.info-value {
						font-size: 30rpx;
						font-weight: 600;
						color: #333;

						&.highlight {
							color: #1890ff;
							font-size: 34rpx;
						}
					}
				}
			}
		}

		// 分段记录表格卡片
		.segment-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 28rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;

			

			.segment-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #f0f0f0;

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

				.segment-count {
					display: flex;
					align-items: center;
					gap: 6rpx;
					background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(9, 109, 217, 0.1) 100%);
					padding: 8rpx 16rpx;
					border-radius: 16rpx;

					.count-text {
						font-size: 24rpx;
						color: #1890ff;
						font-weight: 600;
					}
				}
			}

			// 表格容器
			.table-wrapper {
				margin-top: 20rpx;
			}
		}
	}

	/* ==================== 空状态容器 ==================== */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;

		// 空状态图标
		.empty-icon {
			margin-bottom: 24rpx;
		}

		// 空状态文字
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	/* ==================== sl-table 样式覆盖 ==================== */
	// 表格容器
	::v-deep .sl-table {
		width: 100%;
	}

	// 表头背景色 - 使用蓝色渐变
	::v-deep .sl-table__header {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
	}

	// 表头单元格样式
	::v-deep .sl-table__header__cell {
		color: #fff !important;
		font-weight: 700;
		font-size: 28rpx;
	}

	// 表格单元格样式
	::v-deep .sl-table__body__cell {
		font-size: 26rpx;
		color: #333;
		padding: 24rpx 16rpx;
	}

	// 偶数行背景色
	::v-deep .sl-table__body__row:nth-child(even) {
		background-color: #fafafa !important;
	}

	// 奇数行背景色
	::v-deep .sl-table__body__row:nth-child(odd) {
		background-color: #fff !important;
	}
</style>
