<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 class="function-item" @click="navigateTo('/pages/expressReturn/index')">
				<view class="item-left">
					<view class="item-icon">
						<image src="/static/express.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) {
				redirectToLogin()
				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 redirectToLogin = () => {
		try {
			const pages = getCurrentPages()
			const current = pages && pages.length ? pages[pages.length - 1] : null
			const route = current && current.route ? ('/' + current.route) : '/pages/index/index'
			const query = current && current.options ? Object.keys(current.options).map(k => `${k}=${encodeURIComponent(current.options[k])}`).join('&') : ''
			const redirect = encodeURIComponent(query ? `${route}?${query}` : route)
			uni.reLaunch({ url: `/pages/login/index?redirect=${redirect}` })
		} catch (e) {
			uni.reLaunch({ url: '/pages/login/index' })
		}
	}

	// 导航到指定页面
	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>