<template>
	<view class="my-container">
		<view class="user-info" v-if="isLogin">
			<image class="avatar" :src="userInfo.avatar || '/static/avatar.png'"></image>
			<view class="user-details">
				<text class="username">{{ userInfo.username }}</text>
				<text class="user-id">ID: {{ userInfo.userId }}</text>
			</view>
		</view>
		
		<view class="user-info" v-else @click="goLogin">
			<image class="avatar" src="/static/avatar.png"></image>
			<view class="user-details">
				<text class="username">点击登录</text>
				<text class="user-id">登录后查看更多信息</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
				<view class="menu-item-left">
					<text class="iconfont" :class="item.icon"></text>
					<text class="menu-text">{{ item.title }}</text>
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<view class="logout-btn" @click="handleLogout" v-if="isLogin">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {
					username: '',
					userId: '',
					avatar: ''
				},
				menuItems: [
					{ title: '个人资料', icon: 'icon-user', action: 'profile' },
					// { title: '我的订单', icon: 'icon-order', action: 'orders' },
					// { title: '我的收藏', icon: 'icon-star', action: 'favorites' },
					{ title: '设置', icon: 'icon-settings', action: 'settings' },
					{ title: '帮助中心', icon: 'icon-help', action: 'help' }
				]
			}
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus();
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				try {
					const token = uni.getStorageSync('token');
					const userInfo = uni.getStorageSync('userInfo');
					
					if (token && userInfo) {
						this.isLogin = true;
						this.userInfo = JSON.parse(userInfo);
					} else {
						this.isLogin = false;
						this.userInfo = {
							username: '',
							userId: '',
							avatar: ''
						};
					}
				} catch (e) {
					console.error('获取登录状态失败', e);
					this.isLogin = false;
				}
			},
			
			// 前往登录页
			goLogin() {
				// 显示登录方式选择
				uni.showActionSheet({
					itemList: ['账号密码登录', '微信登录'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 账号密码登录
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.tapIndex === 1) {
							// 微信登录
							this.wxLogin();
						}
					}
				});
			},
			
			// 微信登录
			wxLogin() {
				// 判断是否在微信环境中
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '登录中...'
				});
				
				// 直接使用 uni.login 获取 code
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取登录凭证成功后，直接请求后端
						this.wxLoginRequest(loginRes.code);
						
						// 如果需要用户头像和昵称，可以使用新的接口
						this.getUserProfileNew();
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '微信登录失败',
							icon: 'none'
						});
						console.error('微信登录失败', err);
					}
				});
				// #endif
				
				// 非微信环境提示
				// #ifndef MP-WEIXIN
				uni.showToast({
					title: '请在微信环境中使用微信登录',
					icon: 'none'
				});
				// #endif
			},
			
			// 使用新的方式获取用户头像和昵称
			getUserProfileNew() {
				// 获取头像
				wx.getUserInfo({
					desc: '用于完善用户资料',
					success: (res) => {
						console.log('获取用户信息成功', res);
						// 可以在这里更新用户头像
					},
					fail: (err) => {
						console.error('获取用户信息失败', err);
					}
				});
				
				// 如果需要获取头像，可以使用 button 组件的开放能力
				// 在模板中添加：
				// <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取头像</button>
			},
			
			// 头像选择回调
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail;
				// 这里可以将头像上传到服务器或进行其他处理
				console.log('用户选择的头像:', avatarUrl);
			},
			
			// 发送微信登录请求到服务器
			wxLoginRequest(code, userInfo = {}) {
				// 这里替换为您的实际接口地址
				uni.request({
					url: 'https://your-api-domain.com/api/wx/login',
					method: 'POST',
					data: {
						code: code,
						// 不再依赖 getUserProfile 获取的信息
						// 如果有用户选择的头像，可以在这里传递
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === 0) {
							// 登录成功，保存用户信息和token
							const userData = {
								username: res.data.data.username || '微信用户',
								userId: res.data.data.userId,
								avatar: res.data.data.avatar || '/static/avatar.png'
							};
							
							try {
								uni.setStorageSync('token', res.data.data.token);
								uni.setStorageSync('userInfo', JSON.stringify(userData));
								
								// 更新状态
								this.isLogin = true;
								this.userInfo = userData;
								
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});
							} catch (e) {
								console.error('保存登录信息失败', e);
							}
						} else {
							uni.showToast({
								title: res.data.msg || '登录失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
						console.error('微信登录请求失败', err);
					}
				});
			},
			
			handleMenuClick(item) {
				// 检查是否需要登录
				const needLogin = ['profile', 'orders', 'favorites'];
				
				if (needLogin.includes(item.action) && !this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.goLogin();
					}, 1500);
					return;
				}
				
				// 根据action跳转到对应页面
				switch(item.action) {
					case 'profile':
						uni.navigateTo({ url: '/pages/profile/profile' });
						break;
					case 'orders':
						uni.navigateTo({ url: '/pages/orders/orders' });
						break;
					case 'favorites':
						uni.navigateTo({ url: '/pages/favorites/favorites' });
						break;
					case 'settings':
						uni.navigateTo({ url: '/pages/settings/settings' });
						break;
					case 'help':
						uni.navigateTo({ url: '/pages/help/help' });
						break;
					default:
						uni.showToast({
							title: `点击了${item.title}`,
							icon: 'none'
						});
				}
			},
			
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录信息
							try {
								uni.removeStorageSync('token');
								uni.removeStorageSync('userInfo');
								
								// 更新状态
								this.isLogin = false;
								this.userInfo = {
									username: '',
									userId: '',
									avatar: ''
								};
								
								uni.showToast({
									title: '已退出登录',
									icon: 'success'
								});
							} catch (e) {
								console.error('退出登录失败', e);
								uni.showToast({
									title: '退出登录失败',
									icon: 'none'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.my-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
	}
	
	.user-details {
		display: flex;
		flex-direction: column;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.user-id {
		font-size: 24rpx;
		color: #999;
	}
	
	.menu-list {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	
	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.menu-item:last-child {
		border-bottom: none;
	}
	
	.menu-item-left {
		display: flex;
		align-items: center;
	}
	
	.menu-text {
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	.logout-btn {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		text-align: center;
		color: #ff0000;
		font-size: 32rpx;
	}
	
	/* 这里应该引入iconfont，但为了简化，我们先不添加 */
	.iconfont {
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.icon-right {
		color: #cccccc;
	}
</style> 