<template>
	<view class="timing-container">
		<!-- 顶部筛选卡片 -->
		<view class="filter-card">
			<view class="card-title">
				<u-icon name="search" size="18" color="#faad14"></u-icon>
				<text>筛选条件</text>
			</view>

			<view class="filter-item" @click="showProjectPopup = true">
				<text class="filter-label">项目</text>
				<view class="filter-value">
					<text class="value-text"
						:class="{ placeholder: !selectProcet }">{{ selectProcet || '请选择项目' }}</text>
					<u-icon name="arrow-right" size="14" color="#bbb"></u-icon>
				</view>
			</view>

			<view class="filter-item" @click="openCalendar">
				<text class="filter-label">日期</text>
				<view class="filter-value">
					<text class="value-text" :class="{ placeholder: !begin }">
						{{ dateDisplay }}
					</text>
					<u-icon name="arrow-right" size="14" color="#bbb"></u-icon>
				</view>
			</view>

			<view class="filter-item" @click="showStudentPicker = true">
				<text class="filter-label">学生</text>
				<view class="filter-value">
					<text class="value-text" :class="{ placeholder: selectedStudentIndexes.length === 0 }">
						{{ selectedStudentDisplay }}
					</text>
					<u-icon name="arrow-right" size="14" color="#bbb"></u-icon>
				</view>
			</view>
		</view>

		<!-- 项目选择弹窗 -->
		<up-popup :show="showProjectPopup" mode="center" round="32" :safeAreaInsetBottom="false" @close="showProjectPopup = false">
			<view class="project-popup-content">
				<view class="modal-header">
					<text class="modal-title">选择项目</text>
					<view class="modal-close" @click="showProjectPopup = false">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="popup-project-list">
					<view class="project-list-inner">
						<view v-for="(project, index) in projectOptions[0]" :key="project.planId" class="project-item" @click="selectProject(project)">
							<view class="item-info">
								<text class="item-name">{{ project.name }}</text>
							</view>
						</view>
						<view v-if="!projectOptions[0] || projectOptions[0].length === 0" class="empty-project">
							<text class="empty-text">暂无项目</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>

		<!-- 数据表格 -->
		<view class="data-card">
			<view class="card-title">
				<u-icon name="list" size="18" color="#1890ff"></u-icon>
				<text>训练记录</text>
			</view>
			<view v-for="(item,index) in tableData" :key="index">
				<view class="day-title" @click="toggleDayCollapse(index)">
					<text>{{ item.dayTime }} · {{ item.planName }} </text>
					<u-icon name="arrow-down" size="16" color="#666"
						:class="{ 'arrow-rotate': collapsedDays[index] }"></u-icon>
				</view>
				<view class="table-wrap" v-if="collapsedDays[index]">
					<next-table :show-header="true" @cellClick="cellClick" :columns="columns" :stripe="true"
						:fit="false" :show-summary="false" :data="item.data"></next-table>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if=" tableData.length == 0" class="empty-card">
			<u-icon name="info-circle" size="64" color="#d9d9d9"></u-icon>
			<text class="empty-text"> {{ isLoading?'暂无训练记录':'加载中'  }} </text>
		</view>



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

		<!-- 学生选择弹窗 -->
		<view class="modal-overlay" v-if="showStudentPicker" @click="closeStudentPicker"></view>
		<view class="student-picker-modal" v-if="showStudentPicker">
			<view class="picker-header">
				<view class="header-left">
					<text class="header-title">选择学生</text>
					<text class="student-count">已选({{ selectedStudentIndexes.length }}/{{ studentList.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>
					<text class="action-btn primary" @click="confirmStudentSelection">确定</text>
				</view>
			</view>
			<scroll-view class="student-list" scroll-y>
				<view class="student-grid">
					<view v-for="(student, index) in studentList" :key="student.studentId" class="student-item"
						:class="{ checked: selectedStudentIndexes.includes(index) }"
						@click="toggleStudentSelection(index)">
						<view class="student-checkbox" :class="{ checked: selectedStudentIndexes.includes(index) }">
							<text v-if="selectedStudentIndexes.includes(index)" class="checkbox-index">
								{{ selectedStudentIndexes.indexOf(index) + 1 }}
							</text>
						</view>
						<view class="student-info">
							<view class="student-name">{{ student.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 记录详情弹窗 -->
		<up-popup :show="showRecordPopup" @close="closeRecordPopup" mode="center" round="16" bgColor="#fff">
			<view class="segment-popup-content">
				<view class="popup-header">
					<text class="popup-title">{{ rowData.studentName +'·'+ rowData.planName }}</text>
					<u-icon name="close" size="22" color="#999" @click="closeRecordPopup"></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>
						<text class="popup-th">分段成绩</text>
					</view>
					<scroll-view class="popup-scroll" scroll-y>
						<view v-for="(item, index) in segmentList" :key="index" class="popup-table-row">
							<text class="popup-td">{{ item.index }}</text>
							<text class="popup-td">{{ item.distance }}</text>
							<text class="popup-td">{{ formatSimpleTime(item.time) }}</text>
							<text class="popup-td">{{ formatSimpleTime(item.segmentTime) }}</text>
						</view>
						<view v-if="segmentList.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'
	import { studentService } from '@/Service/swimming/studentService'

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

	interface TableDataItem {
		date : string
		name : string
		projectName : string
		plan : string
		completion : number
		detail : string
	}

	// 数据加载
	let isLoading = ref(false)

	// 项目选择
	let showProjectPopup = ref(false)
	let selectProcet = ref('')
	let selectId = ref('')

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

	// 分页相关
	let page = ref(1)
	let pageTotal = ref(10)

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


	let row = ref('')
	let rowData=ref({
		studentName:'',
		planName:''
	})
	
	
	const tableData = ref<any[]>([])
	const projectOptions = ref<Array<any>>([[]])
	const studentList = ref<Student[]>([])
	const selectedStudentIndexes = ref<number[]>([])
	const selectedStudentIds = ref<string[]>([])
	const showStudentPicker = ref(false)

	// 日期折叠状态
	const collapsedDays = ref<boolean[]>([])

	// 切换日期折叠状态
	const toggleDayCollapse = (index : number) => {
		collapsedDays.value[index] = !collapsedDays.value[index]
	}

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

	const dateDisplay = computed(() => {
		if (!begin.value) return '请选择'
		if (begin.value === end.value) return begin.value
		return `${begin.value} 至 ${end.value}`
	})
	// 计算分段数据
	const segmentList = computed(() => {
		if (!row.value) return []
		const parts = row.value.split('/')
		let prevTime = 0
		return parts.map((part, index) => {
			const [distance, timeStr] = part.split('-')
			const time = parseFloat(timeStr) || 0
			const segmentTime = index === 0 ? time : time - prevTime
			prevTime = time
			return {
				index: index + 1,
				distance,
				time,
				segmentTime
			}
		})
	})

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

	onShow(() => { })





	const getProjectData = () => {
		PlanService.GetPlanListNoPage('计时项目').then(res => {
			if (res.code == 0) {
				projectOptions.value[0] = res.data.list
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const getStudentList = () => {
		studentService.GetStudentList().then(res => {
			if (res.code == 0) {
				studentList.value = res.data
			} else {
				Service.Msg(res.msg)
			}
		})
	}


	const cellClick = (rows : any) => {
		rowData.value=rows
		row.value = rows.subsection
		showRecordPopup.value = true
	}

	const selectProject = (project : any) => {
		selectProcet.value = project.name
		selectId.value = project.planId
		showProjectPopup.value = false
		begin.value = ''
		end.value = ''
		selectedStudentIndexes.value = []
		selectedStudentIds.value = []
		// studentList.value = []
		tableData.value = []
		// getProjectDetail()
		getRecord()
	}

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

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

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

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

	const allSelected = computed(() => {
		return studentList.value.length > 0 && studentList.value.every((_, index) => selectedStudentIndexes.value.includes(index))
	})

	const toggleSelectAll = () => {
		if (allSelected.value) {
			selectedStudentIndexes.value = []
		} else {
			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 getRecord = () => {
		page.value = 1
		getRecordList()
	}

	const getRecordList = () => {
		Service.Msg('数据加载中...')
		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
		}

		PlanService.GetFenduanLog(data).then(res => {
			isLoading.value = true
			Service.LoadClose()
			if (res.code == 0) {
				pageTotal.value = res.data.pageTotal
				tableData.value = res.data.list
				// 初始化折叠状态，默认全部展开
				collapsedDays.value = new Array(res.data.list.length).fill(false)
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const pageChange = (e : any) => {
		page.value = e
		getRecordList()
	}

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

	// 记录详情弹窗
	const showRecordPopup = ref(false)

	interface RecordItem {
		name : string
		time : string
	}

	const recordList = ref<RecordItem[]>([])

	// 打开记录详情弹窗
	const openRecordPopup = (data : RecordItem[]) => {
		recordList.value = data
		showRecordPopup.value = true
	}

	// 关闭记录详情弹窗
	const closeRecordPopup = () => {
		showRecordPopup.value = false
	}
	// 简化时间格式化（分:秒.毫秒）
	const formatSimpleTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60)
		const secs = Math.floor(seconds % 60)
		const millis = Math.floor((seconds % 1) * 100)
		return `${mins.toString().padStart(2, '0')}′${secs.toString().padStart(2, '0')}″${millis.toString().padStart(2, '0')}`
	}
</script>

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

	.timing-container {
		min-height: 100vh;
		padding: 24rpx;
	}

	/* 通用卡片标题 */
	.card-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	/* 筛选卡片 */
	.filter-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.filter-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

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

		&:active {
			opacity: 0.7;
		}
	}

	.filter-label {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		width: 100rpx;
	}

	.filter-value {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 12rpx;
	}

	.value-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		max-width: 420rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;

		&.placeholder {
			color: #999;
			font-weight: 400;
		}
	}

	/* 数据表格卡片 */
	.data-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.day-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333;
		padding: 16rpx 0 8rpx;
		cursor: pointer;

		&:active {
			opacity: 0.7;
		}

		.arrow-rotate {
			transform: rotate(180deg);
			transition: transform 0.3s ease;
		}
	}

	.table-wrap {
		border-radius: 12rpx;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	/* 空状态 */
	.empty-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

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

	/* 弹窗遮罩 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 998;
	}

	/* 学生选择弹窗 */
	.student-picker-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60vh;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.25s ease;
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #fafafa;
		border-radius: 24rpx 24rpx 0 0;

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

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

		.header-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

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

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

		.action-btn {
			font-size: 26rpx;
			color: #666;
			padding: 10rpx 24rpx;
			border-radius: 28rpx;
			background: #eeeeee;
			font-weight: 500;

			&.primary {
				color: #fff;
				background: #faad14;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}

	.student-list {
		flex: 1;
		overflow-y: auto;
		padding: 16rpx 24rpx 40rpx;
	}

	.student-grid {
		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-info {
		width: 100%;

		.student-name {
			font-size: 26rpx;
			font-weight: 600;
			color: #333;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	/* 表格深度样式 */
	::v-deep .sl-table {
		width: 100%;
	}

	::v-deep .sl-table__header {
		background: #faad14 !important;
	}

	::v-deep .sl-table__header__cell {
		color: #fff !important;
		font-weight: 600;
		font-size: 26rpx;
	}

	::v-deep .sl-table__body__cell {
		font-size: 26rpx;
		color: #333;
		padding: 22rpx 14rpx;
	}

	::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;
	}
	
	
	/* 项目选择弹窗 */
	.project-popup-content {
		width: 680rpx;
		max-height: 70vh;
		background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
		border-radius: 32rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.25), 0 0 0 1rpx rgba(0, 0, 0, 0.04);
	}

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

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

		.modal-close {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

			&:active {
				background: linear-gradient(135deg, #e8e8e8 0%, #e0e0e0 100%);
				transform: scale(0.92);
			}
		}
	}

	.popup-project-list {
		max-height: 55vh;
		padding: 24rpx 28rpx;
	}

	.project-list-inner {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.project-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 20rpx 24rpx;
		background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
		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;
		border-radius: 16rpx;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 4rpx;
			height: 100%;
			background: linear-gradient(180deg, #1890ff 0%, #40a9ff 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:active::after {
			opacity: 1;
		}

		.item-icon {
			flex-shrink: 0;

			.icon-bg {
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #36cfc9 100%);
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
				position: relative;

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

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

		.item-info {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;

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

	.empty-project {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 20rpx;
		gap: 16rpx;

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

		&::before {
			content: '';
			width: 120rpx;
			height: 120rpx;
			background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(64, 169, 255, 0.03) 100%);
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8rpx;
		}
	}

	/* 分段详情弹窗 */
		.segment-popup-content {
			width: 90vw;
			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;
						}
					}
				}
			}
		}
	
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 记录详情弹窗 */
	.record-popup-content {
		width: 600rpx;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	}

	.record-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #fafafa;
		border-radius: 16rpx 16rpx 0 0;

		.record-popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.record-popup-body {
		flex: 1;
		overflow-y: auto;
		padding: 20rpx 24rpx;
		max-height: 50vh;
	}

	.record-table {
		border-radius: 12rpx;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;
	}

	.record-table-header {
		display: flex;
		padding: 22rpx 20rpx;
		background: #faad14;

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

	.record-table-row {
		display: flex;
		padding: 24rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		background: #ffffff;

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

		&.record-row-odd {
			background: #fafafa;
		}
	}

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

	.record-empty {
		padding: 40rpx;
		text-align: center;

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