<template>
	<view class="user-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar">
				<view class="avatar-circle" v-if="!userInfo.headImg">
					<u-icon name="account" size="52" color="#fff"></u-icon>
				</view>
				<image v-else class="avatar-image" :src="Service.GetMateUrlByImg(userInfo.headImg)" mode="aspectFill">
				</image>
			</view>
			<view class="user-info">
				<text class="user-nickname">{{ userInfo.name }}</text>
				<view class="user-phone-wrapper">
					<text class="user-phone">{{ userInfo.phone || '暂无手机号' }}</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 @click="goPage('/pages/userFunc/projectList')" class="stat-info">
						<text class="stat-value">{{ planCount }}</text>
						<text class="stat-label">我的项目</text>
					</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view @click="goPage('/pages/userFunc/student')" class="stat-info">
						<text class="stat-value">{{ studentCount }}</text>
						<text class="stat-label">学员数</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<view class="menu-card">
				<!-- 项目管理菜单项 -->
				<view class="menu-item" @click="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="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="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 class="menu-section" v-if="userInfo.role==1">
			<view class="menu-card">
				<!-- 权限管理菜单项 -->
				<view class="menu-item" @click="goPage('/pages/userFunc/userPermission')">
					<view class="menu-icon-bg admin-icon-bg">
						<u-icon name="lock" size="28" color="#fff"></u-icon>
					</view>
					<view class="menu-content">
						<view class="menu-header">
							<text class="menu-title">权限管理</text>
							<view class="menu-tag admin-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="goPage('/pages/userFunc/contactManage')">
					<view class="menu-icon-bg contact-icon-bg">
						<u-icon name="phone" size="28" color="#fff"></u-icon>
					</view>
					<view class="menu-content">
						<view class="menu-header">
							<text class="menu-title">联系方式管理</text>
							<view class="menu-tag contact-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 v-if="userInfo.role!=1" class="contact-footer" @click="callContact">
			<text class="contact-label">客服联系人：{{ kefuName }}</text>
			<text class="contact-phone">{{ kefuPhone }}</text>
		</view>
	</view>
</template>

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

	let planCount = ref(0)
	let studentCount = ref(0)
	let userInfo = ref<any>({})
	let isUse = ref(false)
	let kefuName = ref('')
	let kefuPhone = ref('')
	
	onLoad(() => {

	})

	onShow(() => {
		loadUserInfo()
		isUseFunc()
	})

	const isUseFunc = () => {
		userService.IsCheakUserVerify().then(res => {
			if (res.code == 0) {
				isUse.value = res.data.isCheak
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const loadUserInfo = () => {
		userService.GetUserInfo().then((content : any) => {
			if (content.code == 0) {
				studentCount.value = content.data.studentCount
				planCount.value = content.data.planCount
				userInfo.value = content.data.userInfo
				kefuName.value = content.data.kefuName
				kefuPhone.value = content.data.kefuPhone

			} else {
				Service.Msg(content.msg)
			}
		})
	}

	const goPage = (path : any) => {
		if (!isUse.value) {
			Service.Msg('用户暂无权限，请等待审核!')
			return
		}
		Service.GoPage(path)
	}

	const callContact = () => {
		uni.makePhoneCall({
			phoneNumber: kefuPhone.value,
			fail: () => {
				Service.Msg('拨打电话失败')
			}
		})
	}
</script>

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

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

	}

	/* 用户信息卡片 */
	.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-image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			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;
		}

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

			/* 训练计划图标背景色 - 紫色渐变 */
			&.plan-icon-bg {
				background: linear-gradient(135deg, #722ed1 0%, #9254de 50%, #531dab 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%);
			}

			/* 权限管理图标背景色 - 红色渐变 */
			&.admin-icon-bg {
				background: linear-gradient(135deg, #f5222d 0%, #ff4d4f 50%, #cf1322 100%);
			}

			/* 联系方式管理图标背景色 - 青色渐变 */
			&.contact-icon-bg {
				background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 50%, #08979c 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;
			}

			/* 训练计划标签样式 - 紫色 */
			&.plan-tag {
				background: linear-gradient(135deg, rgba(114, 46, 209, 0.12) 0%, rgba(114, 46, 209, 0.08) 100%);
				color: #722ed1;
			}

			/* 学员管理标签样式 - 绿色 */
			&.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;
			}

			/* 管理员标签样式 - 红色 */
			&.admin-tag,
			&.contact-tag {
				background: linear-gradient(135deg, rgba(245, 34, 45, 0.12) 0%, rgba(245, 34, 45, 0.08) 100%);
				color: #f5222d;
			}

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

	/* 底部固定联系信息 */
	.contact-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 16rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
		z-index: 10;

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

		.contact-phone {
			font-size: 26rpx;
			color: #1890ff;
		}
	}
</style>