<template>
	<view class="user-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar">
				<view class="avatar-circle">
					<u-icon name="account" size="52" color="#fff"></u-icon>
				</view>

			</view>
			<view class="user-info">
				<text class="user-nickname">游泳爱好者</text>
				<view class="user-phone-wrapper">
					<text class="user-phone">138****8888</text>
				</view>
			</view>
			<view @click="Service.GoPage('/pages/userFunc/set')" class="user-edit">
				<u-icon name="edit-pen" size="20" color="rgba(255,255,255,0.8)"></u-icon>
			</view>
		</view>

		<!-- 统计数据区域 -->
		<view class="stats-section">
			<view class="stats-card">
				<view class="stat-item" >

					<view class="stat-info">
						<text class="stat-value">12</text>
						<text class="stat-label">我的项目</text>
					</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" >

					<view class="stat-info">
						<text class="stat-value">8</text>
						<text class="stat-label">记录数</text>
					</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" >
					<view class="stat-info">
						<text class="stat-value">8</text>
						<text class="stat-label">学员数</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<view class="menu-card">
				<view class="menu-item" @click="Service.GoPage('/pages/userFunc/projectList')">
					<view class="menu-icon-bg project-icon-bg">
						<u-icon name="list" size="28" color="#fff"></u-icon>
					</view>
					<view class="menu-content">
						<view class="menu-header">
							<text class="menu-title">项目管理</text>
							<view class="menu-tag project-tag">
								<text class="tag-text">常用</text>
							</view>
						</view>
						<text class="menu-desc">管理训练项目和设置</text>
					</view>
					<view class="menu-arrow">
						<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
					</view>
				</view>

				<view class="menu-divider"></view>

				<view class="menu-item" @click="Service.GoPage('/pages/userFunc/student')">
					<view class="menu-icon-bg academy-icon-bg">
						<u-icon name="grid" size="28" color="#fff"></u-icon>
					</view>
					<view class="menu-content">
						<view class="menu-header">
							<text class="menu-title">学员管理</text>
							<view class="menu-tag academy-tag">
								<text class="tag-text">核心</text>
							</view>
						</view>
						<text class="menu-desc">管理学员信息和课程</text>
					</view>
					<view class="menu-arrow">
						<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
					</view>
				</view>

				<view class="menu-divider"></view>

				<view class="menu-item" @click="Service.GoPage('/pages/userFunc/analyze')">
					<view class="menu-icon-bg analysis-icon-bg">
						<u-icon name="order" size="28" color="#fff"></u-icon>
					</view>
					<view class="menu-content">
						<view class="menu-header">
							<text class="menu-title">数据分析</text>
							<view class="menu-tag analysis-tag">
								<text class="tag-text">智能</text>
							</view>
						</view>
						<text class="menu-desc">查看训练数据和统计</text>
					</view>
					<view class="menu-arrow">
						<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	onLoad(() => {

	})

	onShow(() => {

	})





	// 跳转到设置
	const goToSettings = () => {
		Service.Msg('系统设置功能开发中')
	}

	// 跳转到关于
	const goToAbout = () => {
		Service.Msg('关于我们功能开发中')
	}
</script>

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

	.user-container {
		padding: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
	}

	/* 用户信息卡片 */
	.user-card {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		border-radius: 28rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.25);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -40%;
			right: -30%;
			width: 300rpx;
			height: 300rpx;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
			pointer-events: none;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: -30%;
			left: -20%;
			width: 250rpx;
			height: 250rpx;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			pointer-events: none;
		}
	}

	.user-avatar {
		position: relative;
		z-index: 1;

		.avatar-circle {
			width: 130rpx;
			height: 130rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 5rpx solid rgba(255, 255, 255, 0.4);
			backdrop-filter: blur(20rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		}

		.avatar-badge {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 44rpx;
			height: 44rpx;
			background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 3rpx solid #fff;
			box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.4);
		}
	}

	.user-info {
		flex: 1;
		position: relative;
		z-index: 1;

		.user-nickname {
			font-size: 38rpx;
			font-weight: 700;
			color: #fff;
			margin-bottom: 14rpx;
			display: block;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.user-phone-wrapper {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.user-phone {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				font-weight: 500;
			}
		}
	}

	.user-edit {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
		position: relative;
		z-index: 1;
		transition: all 0.3s ease;

		&:active {
			background: rgba(255, 255, 255, 0.35);
			transform: scale(0.95);
		}
	}

	/* 统计数据区域 */
	.stats-section {
		margin-bottom: 24rpx;

		.stats-card {
			background-color: #fff;
			border-radius: 28rpx;
			padding: 36rpx 24rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			position: relative;
			overflow: hidden;
		}

		.stat-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			cursor: pointer;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}
		}

		.stat-icon-bg {
			width: 68rpx;
			height: 68rpx;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);

			&.project-stat {
				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			}

			&.record-stat {
				background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
			}

			&.student-stat {
				background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
			}
		}

		.stat-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 4rpx;
		}

		.stat-value {
			font-size: 42rpx;
			font-weight: 700;
			background: linear-gradient(135deg, #333 0%, #666 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			line-height: 1;
		}

		.stat-label {
			font-size: 24rpx;
			color: #999;
			font-weight: 500;
		}

		.stat-divider {
			width: 1rpx;
			height: 80rpx;
			background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
		}
	}

	/* 功能菜单区域 */
	.menu-section,
	.settings-section {
		margin-bottom: 24rpx;

		.menu-card {
			background-color: #fff;
			border-radius: 28rpx;
			padding: 8rpx 0;
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
		}

		.menu-item {
			display: flex;
			align-items: center;
			padding: 36rpx 32rpx;
			transition: all 0.3s ease;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				height: 100%;
				background: linear-gradient(90deg, rgba(24, 144, 255, 0.06) 0%, transparent 50%);
				opacity: 0;
				transition: opacity 0.3s ease;
				pointer-events: none;
			}

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

		.menu-icon-bg {
			width: 84rpx;
			height: 84rpx;
			border-radius: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
			transition: all 0.3s ease;
			position: relative;

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

			&.project-icon-bg {
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
			}

			&.academy-icon-bg {
				background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #389e0d 100%);
			}

			&.analysis-icon-bg {
				background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
			}

			&.settings-icon-bg {
				background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
			}

			&.about-icon-bg {
				background: linear-gradient(135deg, #722ed1 0%, #9254de 50%, #531dab 100%);
			}
		}

		.menu-content {
			flex: 1;
		}

		.menu-header {
			display: flex;
			align-items: center;
			gap: 12rpx;
			margin-bottom: 8rpx;
		}

		.menu-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
		}

		.menu-tag {
			padding: 4rpx 12rpx;
			border-radius: 16rpx;
			font-size: 20rpx;
			font-weight: 500;

			&.project-tag {
				background: linear-gradient(135deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.08) 100%);
				color: #1890ff;
			}

			&.academy-tag {
				background: linear-gradient(135deg, rgba(82, 196, 26, 0.12) 0%, rgba(82, 196, 26, 0.08) 100%);
				color: #52c41a;
			}

			&.analysis-tag {
				background: linear-gradient(135deg, rgba(250, 173, 20, 0.12) 0%, rgba(250, 173, 20, 0.08) 100%);
				color: #faad14;
			}

			.tag-text {
				font-size: 20rpx;
				font-weight: 500;
			}
		}

		.menu-desc {
			font-size: 24rpx;
			color: #999;
			line-height: 1.4;
		}

		.menu-arrow {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.04);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.menu-item:active {
			.menu-icon-bg {
				transform: scale(0.92) translateY(2rpx);
			}

			.menu-arrow {
				background: rgba(24, 144, 255, 0.1);
				transform: scale(1.1);
			}
		}

		.menu-divider {
			height: 1rpx;
			background: linear-gradient(90deg, transparent 0%, #f0f0f0 15%, #f0f0f0 85%, transparent 100%);
			margin: 0 32rpx;
		}
	}
</style>