<template>
	<view class="baogan-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">包干数据</text>
				<text class="subtitle">包干项目训练记录统计</text>
			</view>
		</view>

		<!-- 日历组件 -->
		<view class="calendar-wrapper">
			<uni-calendar
				:insert="true"
				:lunar="false"
				:show-month="true"
				:selected="selectedDates"
				@monthSwitch="handleMonthSwitch"
				@change="handleDateChange">
			</uni-calendar>
		</view>

		<!-- 选中日期数据统计 -->
		<view class="date-summary" v-if="selectedDate">
			<view class="summary-item">
				<text class="summary-label">选中日期</text>
				<text class="summary-value">{{ selectedDate }}</text>
			</view>
			<view class="summary-divider"></view>
			<view class="summary-item">
				<text class="summary-label">训练人数</text>
				<text class="summary-value">{{ tableData.length }}人</text>
			</view>
			<view class="summary-divider"></view>
			<view class="summary-item">
				<text class="summary-label">完成率平均</text>
				<text class="summary-value">{{ averageCompletion }}%</text>
			</view>
		</view>

		<!-- 数据表格 -->
		<view class="table-section" v-if="selectedDate">
			<sl-table
				:columns="columns"
				:tableData="tableData"
				@cell-click="handleCellClick">
				<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 class="hint-state" v-if="!selectedDate">
			<view class="hint-icon">
				<u-icon name="calendar" size="80" color="#faad14"></u-icon>
			</view>
			<text class="hint-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'

	// 当前年月
	const currentYear = ref(new Date().getFullYear())
	const currentMonth = ref(new Date().getMonth() + 1)

	// 选中的日期
	const selectedDate = ref('')

	// 表格列定义
	const columns = ref([
		{
			label: '姓名',
			prop: 'name',
			width: '100px'
		},
		{
			label: '项目名称',
			prop: 'projectName',
			width: '120px'
		},
		{
			label: '包干计划',
			prop: 'plan',
			width: '100px'
		},
		{
			label: '完成比例',
			prop: 'completion',
			width: '100px'
		},
		{
			label: '详细数据',
			prop: 'detail',
			width: '120px'
		}
	])

	// 表格数据
	interface TableDataItem {
		name: string
		projectName: string
		plan: string
		completion: number
		detail: string
	}

	const tableData = ref<TableDataItem[]>([{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }])

	// 日历打点数据
	const selectedDates = ref([
		{ date: '2026-03-15', info: '训练' },
		{ date: '2026-03-18', info: '训练' },
		{ date: '2026-03-20', info: '训练' },
		{ date: '2026-03-22', info: '训练' },
		{ date: '2026-03-25', info: '训练' }
	])

	// 平均完成率
	const averageCompletion = computed(() => {
		if (tableData.value.length === 0) return 0
		const total = tableData.value.reduce((sum, item) => sum + item.completion, 0)
		return Math.round(total / tableData.value.length)
	})

	// 模拟数据
	const mockData: Record<string, TableDataItem[]> = {
		'2026-03-15': [
			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }
		],
		'2026-03-18': [
			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 85, detail: '1530/1800' },
			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 95, detail: '1425/1500' }
		],
		'2026-03-20': [
			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 87, detail: '1740/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' }
		],
		'2026-03-22': [
			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 90, detail: '1620/1800' },
			{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
			{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 75, detail: '1500/2000' }
		],
		'2026-03-25': [
			{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 85, detail: '1700/2000' },
			{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
			{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 88, detail: '1584/1800' }
		]
	}

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

	onShow(() => {
		// 页面显示时刷新数据
	})

	// 加载数据
	const loadData = () => {
		// TODO: 调用API获取数据
	}

	// 月份单元格点击处理
	const handleCellClick = (event: any) => {
		console.log('单元格点击事件:', event)
	}

	// 月份切换处理
	const handleMonthSwitch = (e: any) => {
		currentYear.value = e.year
		currentMonth.value = e.month
		loadData()
		// 切换月份后清空选中日期
		selectedDate.value = ''
		tableData.value = []
	}

	// 日期选择处理
	const handleDateChange = (e: any) => {
		// 点击日期后的处理
		const date = e.fulldate
		selectedDate.value = date

		// 加载该日期的数据
		if (mockData[date]) {
			tableData.value = mockData[date]
		} else {
			tableData.value = []
		}
	}
</script>

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

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

	/* 日历组件包装 */
	.calendar-wrapper {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
	}

	/* 日期数据统计 */
	.date-summary {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.summary-item {
			text-align: center;

			.summary-label {
				font-size: 24rpx;
				color: #999;
				display: block;
				margin-bottom: 8rpx;
			}

			.summary-value {
				font-size: 32rpx;
				font-weight: 700;
				color: #faad14;
			}
		}

		.summary-divider {
			width: 1rpx;
			height: 50rpx;
			background-color: #eee;
		}
	}

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

	/* 空状态容器 */
	.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;
		}
	}

	/* 提示状态 */
	.hint-state {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		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;
		}
	}

	/* sl-table 样式覆盖 */
	::v-deep .sl-table {
		width: 100%;
	}

	::v-deep .sl-table__header {
		background: linear-gradient(135deg, #faad14 0%, #ffc53d 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>
