<template>
	<view class="my">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="background">

			</view>
			<view class="info-content">
				<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
					{{userInfo.nickName}}
				</view>
				<view class="avatars">
					<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://pic.rmb.bdstatic.com/bjh/down/1742bc3845cbbcf0c78c01eb59bb1c1a.jpeg'" @click="updateAvatar"></image>
				</view>
				<view class="hello-text">
					<p>你好，{{userInfo.nickName}}</p>
					<p>欢迎使用计分小程序</p>
				</view>
			</view>
		</view>
		
		<!-- 数据统计区域 -->
		<view class="data-section">
			<view class="data-item" @click="navigateToHistory">
				<text class="data-label">总对局数</text>
				<text class="data-number">{{totalGames || 0}}</text>
			</view>
			<view class="data-divider"></view>
			<view class="data-item" @click="navigateToHistory">
				<text class="data-label">胜利局数</text>
				<text class="data-number">{{totalWins || 0}}</text>
			</view>
			<view class="data-divider"></view>
			<view class="data-item" @click="navigateToHistory">
				<text class="data-label">胜率</text>
				<text class="data-number">{{winRate || '0%'}}</text>
			</view>
		</view>
		
		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<!-- 第一组菜单 -->
			<view class="menu-group">
				
				<view class="menu-item" @click="navigateToFavorites">
					<view class="menu-left">
						<image src="/static/favorites.png" alt="收藏的对局" class="menu-icon" mode="aspectFit"></image>
						<text class="menu-text">收藏的对局</text>
					</view>
					<uni-icons type="right" size="24" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 第二组菜单 -->
			<view class="menu-group">
				<view class="menu-item" @click="openSettings">
					<view class="menu-left">
						<image src="/static/setting.png" alt="设置" class="menu-icon" mode="aspectFit"></image>
						<text class="menu-text">设置</text>
					</view>
					<uni-icons type="right" size="24" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="openFeedback">
					<view class="menu-left">
						<image src="/static/feedback.png" alt="帮助与反馈" class="menu-icon" mode="aspectFit"></image>
						<text class="menu-text">帮助与反馈</text>
					</view>
					<uni-icons type="right" size="24" color="#999"></uni-icons>
				</view>
				
				<view class="menu-item" @click="aboutUs">
					<view class="menu-left">
						<image src="/static/about.png" alt="关于我们" class="menu-icon" mode="aspectFit"></image>
						<text class="menu-text">关于我们</text>
					</view>
					<uni-icons type="right" size="24" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 版本信息 -->
		<view class="version-info">
			<text>版本 {{version || '1.0.0'}}</text>
		</view>
	</view>
</template>

<script setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { getOpenId } from '@/utils/wxutils.js'
import { register, login } from '@/api/user.js'

const proxy = getCurrentInstance().proxy;

// 小程序胶囊高度
const topHeight = ref(proxy.$StaticValue.getTopHeight()); 

// 用户信息相关
const userInfo = ref({});
const totalGames = ref(0);
const totalWins = ref(0);
const winRate = ref('0%');
const unreadCount = ref(0);
const version = ref('1.0.0');

// 获取用户信息
const getUserInfo = async () => {
	// 从本地获取用户信息
	userInfo.value = proxy.$StaticValue.getUserInfo();
	if(!userInfo.value?.userId) {
		// 如果没有登录, 获取到当前用户的openid
		const openIdRes = await getOpenId();
		const openId = openIdRes.openid;
		userInfo.value = {
			openId: openId,
			nickName: '用户'+openId.substring(0, 6)
		};
		register(userInfo.value).then(res => {
			// 注册成功就执行登录
			login(userInfo.value).then(loginRes => {
				userInfo.value = loginRes.data;
				// 存储用户信息到本地
				proxy.$StaticValue.setUserInfo(userInfo.value);
				// 获取用户统计数据
				fetchUserStats();
			});
		});
	} else {
		// 已登录，获取用户统计数据
		fetchUserStats();
	}
}

// 获取用户统计数据
const fetchUserStats = () => {
	// 实际项目中应该调用API获取真实数据
	// 这里使用模拟数据
	totalGames.value = 42;
	totalWins.value = 28;
	winRate.value = '66.7%';
	unreadCount.value = 2;
	
	// 实际API调用示例：
	// getUserStats(userInfo.value.userId).then(res => {
	//   totalGames.value = res.data.totalGames;
	//   totalWins.value = res.data.totalWins;
	//   winRate.value = res.data.winRate;
	//   unreadCount.value = res.data.unreadCount;
	// });
}

// 更新头像
const updateAvatar = () => {
	/* #ifdef MP-WEIXIN */
	wx.chooseMedia({
		count: 1,
		mediaType: ['image'],
		sourceType: ['album', 'camera'],
		sizeType: ['compressed'],
		success: (res) => {
			if (res.tempFiles && res.tempFiles.length > 0) {
				const tempFilePath = res.tempFiles[0].tempFilePath;
				
				// 预览选择的头像
				wx.previewImage({
					urls: [tempFilePath],
					success: () => {
						// 更新头像
						userInfo.value.avatarUrl = tempFilePath;
						// 在实际项目中应该上传头像到服务器
						proxy.$StaticValue.setUserInfo(userInfo.value);
						
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						});
					}
				});
			}
		},
		fail: (err) => {
			console.log('选择头像失败', err);
			if (err.errMsg !== 'chooseMedia:fail cancel') {
				uni.showToast({
					title: '选择头像失败',
					icon: 'none'
				});
			}
		}
	});
	/* #endif */
	
	/* #ifndef MP-WEIXIN */
	uni.chooseImage({
		count: 1,
		success: (res) => {
			if (res.tempFilePaths && res.tempFilePaths.length > 0) {
				userInfo.value.avatarUrl = res.tempFilePaths[0];
				proxy.$StaticValue.setUserInfo(userInfo.value);
				uni.showToast({
					title: '头像更新成功',
					icon: 'success'
				});
			}
		}
	});
	/* #endif */
}

// 导航到历史对局页面
const navigateToHistory = () => {
	uni.navigateTo({
		url: '/pages/history-game/history-game'
	});
}

// 导航到收藏对局页面
const navigateToFavorites = () => {
	// 如果收藏页面不存在，可以创建一个或跳转到历史页面并筛选
	uni.navigateTo({
		url: '/pages/my/favorites'
	});
}

// 打开设置页面
const openSettings = () => {
	uni.navigateTo({
		url: '/pages/my/setting'
	});
}

// 打开帮助与反馈
const openFeedback = () => {
	uni.navigateTo({
		url: '/pages/my/feedback'
	});
}

// 关于我们
const aboutUs = () => {
	uni.showModal({
		title: '关于计分小程序',
		content: '计分小程序 v' + version.value + '\n\n一款便捷的计分工具，支持多种游戏模式。\n\n© 2023 计分小程序团队',
		showCancel: false,
		confirmText: '确定'
	});
}

// 退出登录
const logout = () => {
	uni.showModal({
		title: '确认退出',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				// 清除本地存储的用户信息
				proxy.$StaticValue.clearUserInfo();
				// 重置用户信息
				userInfo.value = {};
				totalGames.value = 0;
				totalWins.value = 0;
				winRate.value = '0%';
				
				// 重新获取用户信息（会自动重新登录）
				getUserInfo();
				
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				});
			}
		}
	});
}

onMounted(() => {
	getUserInfo();
	// 获取版本信息
	/* #ifdef MP-WEIXIN */
	const appInfo = wx.getAccountInfoSync();
	version.value = appInfo.miniProgram.version || '1.0.0';
	/* #endif */
});

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

</script>

<style lang="less" scoped>
.my {
	width: 750rpx;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background-color: #f8f8f8;
}

/* 用户信息区域样式 */
.user-info {
	--user-height: 500rpx;
	width: 750rpx;
	height: var(--user-height);
	position: relative;
	.background {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(rgb(87, 255, 87), rgb(144, 251, 144));
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.info-content {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
		padding-top: calc(var(--top-margin) + 20rpx);
		.top-user-name {
			width: 100%;
			font-size: 40rpx;
			font-weight: bold;
			color: #000000;
			padding: 0 20rpx;
			box-sizing: border-box;
			ttext-align: center;
		}
		.avatars {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			.avatar-img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				border: 4rpx solid #ffffff;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				// 添加点击效果
				&:active {
					opacity: 0.8;
					transform: scale(0.95);
				}
			}
		}
		.hello-text {
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #000000;
			p {
				margin: 5rpx 0;
			}
		}
	}
}

/* 数据统计区域样式 */
.data-section {
	width: 100%;
	height: 160rpx;
	background-color: #ffffff;
	margin-top: -30rpx;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 40rpx;
	margin-bottom: 30rpx;
	.data-item {
		flex: 1;
		text-align: center;
		.data-number {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}
		.data-label {
			font-size: 24rpx;
			color: #666;
		}
		// 添加点击效果
		&:active {
			opacity: 0.7;
		}
	}
	.data-divider {
		width: 1rpx;
		height: 80rpx;
		background-color: #eee;
	}
}

/* 功能菜单区域样式 */
.menu-section {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	.menu-group {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
			// 最后一个菜单项不需要底边框
			&:last-child {
				border-bottom: none;
			}
			.menu-left {
				display: flex;
				align-items: center;
				.menu-icon {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
				.menu-text {
					font-size: 32rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
			.menu-right {
				display: flex;
				align-items: center;
				.menu-badge {
					background-color: #FF3B30;
					color: #ffffff;
					font-size: 20rpx;
					padding: 2rpx 10rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
					min-width: 20rpx;
					text-align: center;
				}
			}
			// 添加点击效果
			&:active {
				background-color: #f8f8f8;
			}
		}
	}
}

/* 退出登录按钮样式 */
.logout-section {
	width: 100%;
	padding: 0 40rpx;
	box-sizing: border-box;
	margin-bottom: 40rpx;
	.logout-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 34rpx;
		background-color: #ffffff;
		color: #FF3B30;
		border: 1rpx solid #FF3B30;
	}
}

/* 版本信息样式 */
.version-info {
	width: 100%;
	text-align: center;
	padding-bottom: 60rpx;
	text {
		font-size: 24rpx;
		color: #999;
	}
}

/* 安全区域适配 */
/* #ifdef MP-WEIXIN */
.my {
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
/* #endif */
</style>
