<template>
	<view class="profile-container">
		<!-- 用户信息区域 -->
		<view class="header-section">
			<view class="user-profile" @click="handleUserProfileClick">
				<view class="avatar-container">
					<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
					</image>
					<image v-else class="avatar" src="@/static/user-active.png" mode="aspectFill"></image>
					<view class="avatar-badge" v-if="userInfo.isAdmin"></view>
				</view>
				
				<view class="user-details" v-if="userInfo">
					<view class="username">{{ userInfo.nickName }}</view>
					<view class="user-id">{{ userInfo.phone ? maskPhone(userInfo.phone) : '未绑定手机号' }}</view>
				</view>
				
				<view class="user-details" v-else>
					<view class="username">点击登录</view>
					<view class="user-id">授权登录后享受更多服务</view>
				</view>
				
				<view class="edit-profile">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-info">
				<view class="balance-label">押金余额</view>
				<view class="balance-amount">¥{{ deposit }}</view>
			</view>
			<view class="action-button" @click="handleWithdraw">
				<text>提现</text>
			</view>
		</view>
		
		<!-- 功能区域列表 -->
		<view class="function-list">
			<!-- 订单中心 -->
			<view class="function-item" @click="navigateTo('/pages/order/index')">
				<view class="item-left">
					<view class="item-icon">
						<image src="/static/jl.png" mode="aspectFit"></image>
					</view>
					<text class="item-title">订单中心</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 投诉建议 -->
			<view class="function-item" @click="navigateTo('/pages/feedback/index')">
				<view class="item-left">
					<view class="item-icon">
						<image src="/static/complaint.png" mode="aspectFit"></image>
					</view>
					<text class="item-title">投诉建议</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 帮助中心 -->
			<view class="function-item" @click="navigateTo('/pages/help/index')">
				<view class="item-left">
					<view class="item-icon">
						<image src="/static/hlep.png" mode="aspectFit"></image>
					</view>
					<text class="item-title">帮助中心</text>
				</view>
				<view class="item-right">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 
		<view class="section-title">设置</view>

		<view class="settings-list">
			<view 
				v-for="(item, index) in settingItems" 
				:key="index"
				class="settings-item" 
				@click="item.action">
				<view class="settings-item-left">
					<uni-icons :type="item.icon" size="20" color="#4facfe"></uni-icons>
					<text>{{ item.name }}</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view> -->
		
		<!-- <u-popup ref="authPopup" mode="center" border-radius="15" width="600rpx" @open="onPopupOpen" @close="onPopupClose">
			<view class="auth-popup">
				<view class="auth-title">授权登录</view>
				<view class="auth-desc">获取您的微信头像、昵称等公开信息</view>
				<view class="auth-buttons">
					<button class="cancel-btn" @click="closeAuthPopup">取消</button>
					<button class="confirm-btn" @click="getUserProfile">确定</button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import {
		wxLogin,
		getUserInfo
	} from '../../util/index.js';

	// 响应式状态
	const userInfo = ref({});
	const deposit = ref('0.00');
	const openId = ref('');
	const authPopup = ref(null); // u-popup 的引用
	const isPopupVisible = ref(false);

	// 页面加载时初始化
	onMounted(() => {
		getInfo();
	});

	// 获取用户信息
	const getInfo = async () => {
		try {
			const token = uni.getStorageSync('token');
			if (!token) {
				await wxLogin();
				return;
			}

			const res = await getUserInfo();
			console.log('User info response:', res);
			
			if (res.code == 200) {
				// 保存openId
				if (res.data.openId) {
					openId.value = res.data.openId;
					uni.setStorageSync('openId', res.data.openId);
				}
				
				// 更新用户信息
				userInfo.value = {
					nickName: res.data.nickname,
					phone: res.data.phone,
					avatar: res.data.iconUrl,
					isAdmin: res.data.isAdmin
				};
				
				uni.setStorageSync('userInfo', userInfo.value);
				deposit.value = res.data.balanceAmount || '0.00';
			}
		} catch (error) {
			console.error('获取用户信息失败:', error);
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'none'
			});
		}
	};

	// 导航到指定页面
	const navigateTo = (url) => {
		uni.navigateTo({
			url
		});
	};
	
	// 处理提现按钮点击
	const handleWithdraw = () => {
		navigateTo('/pages/deposit/index');
	};

	// 处理用户资料点击
	const handleUserProfileClick = () => {
		if (!userInfo.value) {
			// 打开授权弹窗
			openAuthPopup();
		} else {
			// 已登录用户点击个人资料，可以导航到编辑页面
			// navigateTo('/pages/profile/edit');
		}
	};
	
	// 打开授权弹窗
	const openAuthPopup = () => {
		if (authPopup.value) {
			authPopup.value.open();
			isPopupVisible.value = true;
		}
	};
	
	// 弹窗打开事件处理
	const onPopupOpen = () => {
		console.log('授权弹窗已打开');
		isPopupVisible.value = true;
		// 这里可以添加弹窗打开后的逻辑
	};
	
	// 弹窗关闭事件处理
	const onPopupClose = () => {
		console.log('授权弹窗已关闭');
		isPopupVisible.value = false;
		// 这里可以添加弹窗关闭后的逻辑
	};

	// 获取微信用户个人信息
	const getUserProfile = () => {
		// #ifdef MP-WEIXIN
		uni.showLoading({
			title: '获取中...',
			mask: true
		});
		
		wx.getUserProfile({
			desc: '用于完善会员资料',
			success: (res) => {
				console.log('获取用户信息成功:', res);
				updateUserInfo(res.userInfo);
			},
			fail: (err) => {
				console.error('获取用户信息失败:', err);
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
			},
			complete: () => {
				uni.hideLoading();
				closeAuthPopup();
			}
		});
		// #endif
		
		// #ifndef MP-WEIXIN
		uni.showToast({
			title: '请在微信小程序中使用此功能',
			icon: 'none'
		});
		closeAuthPopup();
		// #endif
	};

	// 更新用户信息
	const updateUserInfo = async (wxUserInfo) => {
		try {
			// 更新本地用户信息
			const updatedInfo = {
				...userInfo.value,
				nickName: wxUserInfo.nickName,
				avatar: wxUserInfo.avatarUrl
			};
			
			userInfo.value = updatedInfo;
			uni.setStorageSync('userInfo', updatedInfo);
			
			// 这里可以添加调用后端API更新用户信息的代码
			// const updateRes = await updateUserInfoApi({
			//   openId: openId.value,
			//   nickName: wxUserInfo.nickName,
			//   avatarUrl: wxUserInfo.avatarUrl,
			//   gender: wxUserInfo.gender
			// });
			
			uni.showToast({
				title: '信息更新成功',
				icon: 'success'
			});
			
			// 更新完成后重新获取用户信息
			getInfo();
		} catch (error) {
			console.error('更新用户信息失败:', error);
			uni.showToast({
				title: '更新用户信息失败',
				icon: 'none'
			});
		}
	};

	// 关闭授权弹窗
	const closeAuthPopup = () => {
		if (authPopup.value) {
			authPopup.value.close();
			isPopupVisible.value = false;
		}
	};

	// 关于我们
	const handleAboutUs = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	};

	// 隐私政策
	const handlePrivacyPolicy = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	};

	// 手机号掩码函数
	function maskPhone(phone) {
	  if (!phone) return '';
	  // 只处理11位手机号
	  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: env(safe-area-inset-bottom);
}

/* Header Section */
.header-section {
	padding: 40rpx;
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	position: relative;
	border-radius: 0 0 30rpx 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(79, 172, 254, 0.2);
}

.user-profile {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}

.avatar-container {
	position: relative;
	margin-right: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.avatar-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36rpx;
	height: 36rpx;
	border-radius: 18rpx;
	background-color: #ff9500;
	border: 4rpx solid white;
}

.user-details {
	flex: 1;
}

.username {
	font-size: 36rpx;
	font-weight: 600;
	color: white;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
}

.edit-profile {
	background-color: rgba(255, 255, 255, 0.2);
	padding: 10rpx;
	border-radius: 50%;
}

/* Balance Card */
.balance-card {
	margin: 30rpx;
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.balance-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.balance-amount {
	font-size: 48rpx;
	font-weight: 600;
	color: #4facfe;
}

.action-button {
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	border-radius: 40rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40rpx;
	color: white;
	font-weight: 500;
	font-size: 30rpx;
	box-shadow: 0 8rpx 16rpx rgba(79, 172, 254, 0.2);
	
	&:active {
		opacity: 0.9;
		transform: scale(0.98);
	}
	
	text {
		margin-right: 10rpx;
	}
}

/* Function List */
.function-list {
	margin: 30rpx;
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
}

.function-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background-color: #f9f9f9;
	}
}

.item-left {
	display: flex;
	align-items: center;
}

.item-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.item-title {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.item-right {
	display: flex;
	align-items: center;
}

/* Auth Popup */
.auth-popup {
	background-color: white;
	width: 100%;
	padding: 40rpx;
	border-radius: 15rpx;
}

.auth-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
	margin-bottom: 20rpx;
}

.auth-desc {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 40rpx;
}

.auth-buttons {
	display: flex;
	justify-content: space-between;
}

.cancel-btn, 
.confirm-btn {
	width: 240rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 28rpx;
	
	&::after {
		border: none;
	}
}

.cancel-btn {
	background-color: #f0f0f0;
	color: #666;
}

.confirm-btn {
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	color: white;
}
</style>