<template>
	<view class="analyze-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">数据分析</text>
				<text class="subtitle">训练数据统计与分析</text>
			</view>
		</view>

		<!-- 功能入口卡片列表 -->
		<view class="function-list">
			<!-- 包干数据 -->
			<view class="function-card package-card" @click="Service.GoPage('/pages/dataAnalyze/baoganAnalyze')">
				<view class="card-icon package-icon">
					<u-icon name="grid" size="36" color="#fff"></u-icon>
				</view>
				<view class="card-info">
					<text class="card-title">包干数据</text>
					<text class="card-desc">查看包干项目训练记录</text>
				</view>

				<view class="card-arrow">
					<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
				</view>
			</view>

			<!-- 计时数据 -->
			<view class="function-card timing-card" @click="Service.GoPage('/pages/dataAnalyze/timingAnalze')">
				<view class="card-icon timing-icon">
					<u-icon name="clock" size="36" color="#fff"></u-icon>
				</view>
				<view class="card-info">
					<text class="card-title">计时数据</text>
					<text class="card-desc">查看计时项目训练记录</text>
				</view>
				<view class="card-arrow">
					<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
				</view>
			</view>

			<!-- 曲线走势图 -->
			<view class="function-card chart-card" @click="Service.GoPage('/pages/dataAnalyze/Curve')">
				<view class="card-icon chart-icon">
					<u-icon name="calendar" size="36" color="#fff"></u-icon>
				</view>
				<view class="card-info">
					<text class="card-title">曲线走势图</text>
					<text class="card-desc">查看学员成绩趋势变化</text>
				</view>

				<view class="card-arrow">
					<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
				</view>
			</view>

			<!-- 分段数据 -->
			<view class="function-card segment-card" @click="Service.GoPage('/pages/dataAnalyze/paragraphAnalyze')">
				<view class="card-icon segment-icon">
					<u-icon name="list" size="36" color="#fff"></u-icon>
				</view>
				<view class="card-info">
					<text class="card-title">分段数据</text>
					<text class="card-desc">查看分段训练记录</text>
				</view>

				<view class="card-arrow">
					<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
				</view>
			</view>

			<!-- 成绩排名 -->
			<view class="function-card ranking-card" @click="Service.GoPage('/pages/dataAnalyze/grades')">
				<view class="card-icon ranking-icon">
					<u-icon name="integral" size="36" color="#fff"></u-icon>
				</view>
				<view class="card-info">
					<text class="card-title">成绩排名</text>
					<text class="card-desc">查看学员成绩排名情况</text>
				</view>
				<view class="card-arrow">
					<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

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

	// 功能入口数据统计
	const packageCount = ref(18)
	const timingCount = ref(36)
	const chartCount = ref(12)
	const segmentCount = ref(24)
	const rankingCount = ref(15)

	onLoad(() => {

	})

	onShow(() => {

	})

	// 跳转到包干数据
	const goToPackageData = () => {
		Service.GoPage('/pages/userFunc/project')
	}

	// 跳转到计时数据
	const goToTimingData = () => {
		Service.Msg('计时数据功能开发中')
	}

	// 跳转到曲线走势图
	const goToChart = () => {
		Service.GoPage('/pages/userFunc/dataAnalyze')
	}

	// 跳转到分段数据
	const goToSegment = () => {
		Service.GoPage('/pages/userFunc/segmentation')
	}

	// 跳转到成绩排名
	const goToRanking = () => {
		Service.Msg('成绩排名功能开发中')
	}
</script>

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

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

	/* 页面标题区域 */
	.header-section {
		margin-bottom: 24rpx;

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

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

	/* 功能入口卡片列表 */
	.function-list {
		.function-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 32rpx 28rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 6rpx;
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.04);

				&::before {
					opacity: 1;
				}
			}

			&.package-card::before {
				background: linear-gradient(180deg, #faad14 0%, #ffc53d 100%);
			}

			&.timing-card::before {
				background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
			}

			&.chart-card::before {
				background: linear-gradient(180deg, #52c41a 0%, #73d13d 100%);
			}

			&.segment-card::before {
				background: linear-gradient(180deg, #722ed1 0%, #9254de 100%);
			}

			&.ranking-card::before {
				background: linear-gradient(180deg, #eb2f96 0%, #f759ab 100%);
			}

			.card-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-right: 24rpx;

				&.package-icon {
					background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
					box-shadow: 0 4rpx 12rpx rgba(250, 173, 20, 0.3);
				}

				&.timing-icon {
					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
				}

				&.chart-icon {
					background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
					box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
				}

				&.segment-icon {
					background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
					box-shadow: 0 4rpx 12rpx rgba(114, 46, 209, 0.3);
				}

				&.ranking-icon {
					background: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
					box-shadow: 0 4rpx 12rpx rgba(235, 47, 150, 0.3);
				}
			}

			.card-info {
				flex: 1;
				margin-right: 20rpx;

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

				.card-desc {
					font-size: 24rpx;
					color: #999;
					display: block;
				}
			}



			.card-arrow {
				flex-shrink: 0;
				transition: transform 0.3s ease;
			}

			&:active .card-arrow {
				transform: translateX(6rpx);
			}
		}
	}
</style>