<template>
	<view class="my-page">
		<view class="user-card" @click="navigateTo('/subPackages/user/userProfile/index')">
			<view class="avatar-box">
				<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill" lazy-load="true">
				</image>
				<image v-else class="avatar" src="@/static/head.png" mode="aspectFill" lazy-load="true"></image>
			</view>
			<view class="user-text">
				<view class="nickname">{{ userInfo.nickName || $t('user.clickToLogin') }}</view>
				<view class="subtext">{{ userInfo.phone ? maskPhone(userInfo.phone) : $t('user.loginPrompt') }}</view>
			</view>
			<uv-icon type="right" size="16" color="#999"></uv-icon>
		</view>


		<!-- <view class="assets-card">
			<view class="assets-left">
				<view class="label">押金余额</view>
				<view class="amount">¥{{ deposit }}</view>
			</view>
			<view class="assets-right" @click="handleWithdraw">
				<text class="withdraw-btn">提现</text>
			</view>
		</view> -->

		<view class="section">
			<!-- 广告轮播 -->
			<view class="banner-card" v-if="bannerImages.length > 0">
				<swiper class="banner-swiper" :indicator-dots="bannerImages.length > 1"
					:autoplay="bannerImages.length > 1" :circular="true" :interval="3000">
					<swiper-item v-for="(image, index) in bannerImages" :key="index">
						<image class="banner-image" :src="image" mode="aspectFill" @click="handleBannerClick(index)"
							lazy-load="true">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 默认图片（当没有广告时显示） -->
			<!-- <view class="banner-card" v-else @click="navigateTo('/pages/join/index')">
				<image class="banner-image" src="/static/userCenter_swiper.png" mode="aspectFill" lazy-load="true"></image>
			</view> -->
			<!-- <view class="section-title">常用服务</view> -->
			<view class="list">
				<view class="list-item" @click="handleQuickReturn">
					<view class="left">
						<image class="icon" src="/static/express_return.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.quickReturn') }}<text
								style="font-size: 18rpx;">{{ $t('user.quickReturnDesc') }}</text></text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/pages/expressReturn/index')" v-if="showMenuItem">
					<view class="left">
						<image class="icon" src="/static/express.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.expressReturn') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/subPackages/order/index')">
					<view class="left">
						<image class="icon" src="/static/orderList.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.myOrders') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/subPackages/business/my-card')">
					<view class="left">
						<image class="icon" src="/static/my_member.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.myCards') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/subPackages/business/my-coupon')">
					<view class="left">
						<image class="icon" src="/static/my_coupon.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.myCoupons') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/subPackages/service/help/index')">
					<view class="left">
						<image class="icon" src="/static/customer-service.png" mode="aspectFit" lazy-load="true">
						</image>
						<text class="title">{{ $t('user.customerService') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<view class="list-item" @click="navigateTo('/subPackages/service/feedback/index')">
					<view class="left">
						<image class="icon" src="/static/suggess.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.feedback') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<!-- <view class="list-item" @click="navigateTo('/pages/legal/agreement')">
					<view class="left">
						<image class="icon" src="/static/business-licence.png" mode="aspectFit"></image>
						<text class="title">{{ $t('user.businessLicense') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view> -->
				<!-- #ifndef MP-ALIPAY -->
				<view class="list-item" @click="navigateTo('/subPackages/other/join/index')">
					<view class="left">
						<image class="icon" src="/static/peopleInWork.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.cooperation') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
				<!-- #endif -->
				<view class="list-item" @click="navigateTo('/subPackages/user/setting/index')">
					<view class="left">
						<image class="icon" src="/static/setting.png" mode="aspectFit" lazy-load="true"></image>
						<text class="title">{{ $t('user.settings') }}</text>
					</view>
					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
				</view>
			</view>
		</view>

		<view class="footer-agreements">
			<view class="link-box">
				<text class="link"
					@click="navigateTo('/subPackages/other/legal/agreement')">{{ $t('user.userAgreement') }}</text>
				<text class="sep">｜</text>
				<text class="link"
					@click="navigateTo('/subPackages/other/legal/privacy')">{{ $t('user.privacyPolicy') }}</text>
			</view>
			<view class="version">{{ $t('user.version') }}{{ appVersion }}</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 {
		onShow
	} from '@dcloudio/uni-app';

	import {
		wxLogin,
		getUserInfo
	} from '@/util/index.js';
	import {
		uploadUserAvatar
	} from '@/config/api/user.js'
	import {
		getCurrentAdvertisement
	} from '@/config/api/system.js'
	import {
		getInUseOrder
	} from '@/config/api/order.js'
	import {
		useI18n
	} from '@/utils/i18n.js'
	// 设置页执行退出登录，此页不再直接调用

	const {
		t
	} = useI18n()

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

	const showMenuItem = ref(false)
	const bannerImages = ref([]) // 广告图片列表
	const bannerImageList = ref([]) // 完整的广告配置列表（包含链接信息）

	// 获取广告图片
	const getBannerImages = async () => {
		try {
			let appPlatform;
			// #ifdef MP-WEIXIN
			appPlatform = 'wechat'
			// #endif
			// #ifdef MP-ALIPAY
			appPlatform = 'ali'
			// #endif
			// 调用接口获取广告内容
			const res = await getCurrentAdvertisement({
				appPlatform: appPlatform, // 微信平台
				appType: 'user', // 用户端
				pictureLocation: 'userProfile_banner'
			})

			if (res && res.code === 200 && res.data) {
				// 使用 imageList 字段（包含图片和链接信息）
				const imageList = res.data.imageList || []
				if (imageList.length > 0) {
					bannerImageList.value = imageList
					// 提取图片URL用于展示
					bannerImages.value = imageList.map(item => item.imageUrl)
				}
			} else {
				console.warn('获取个人中心广告失败:', res?.msg || '未知错误')
			}
		} catch (error) {
			console.error('获取个人中心广告失败:', error)
		}
	}

	// 处理广告点击
	const handleBannerClick = (index) => {
		if (!bannerImageList.value || !bannerImageList.value[index]) {
			return
		}

		const config = bannerImageList.value[index]

		// 根据链接类型进行跳转
		if (config.linkType === 'miniapp' && config.appId) {
			// 跳转到外部小程序
			// #ifdef MP-WEIXIN
			uni.navigateToMiniProgram({
				appId: config.appId,
				path: config.linkUrl || '',
				success: () => {},
				fail: (err) => {
					console.error('跳转小程序失败:', err)
					uni.showToast({
						title: t('common.loadFailed'),
						icon: 'none'
					})
				}
			})
			// #endif
			// #ifndef MP-WEIXIN
			uni.showToast({
				title: t('auth.pleaseUseInWechat'),
				icon: 'none'
			})
			// #endif
		} else if (config.linkType === 'external' && config.linkUrl) {
			// 跳转到外部链接（H5页面）
			uni.navigateTo({
				url: `subPackages/other/webview/index?url=${encodeURIComponent(config.linkUrl)}`
			})
		} else if (config.linkType === 'internal' && config.linkUrl) {
			// 跳转到内部页面
			uni.navigateTo({
				url: config.linkUrl
			})
		}
	}

	// 页面加载时初始化
	onMounted(() => {
		uni.setNavigationBarTitle({
			title: t('user.personalCenter')
		})
		// getInfo();
		initVersion();
		getBannerImages(); // 加载广告
	});

	// 页面显示时刷新用户信息
	onShow(() => {
		getInfo();
		getBannerImages(); // 刷新广告
	});

	// 获取用户信息
	const getInfo = async () => {
		try {
			const res = await getUserInfo();

			if (res.code == 401 || res.code == 40101) {
				redirectToLogin()
				return
			} else 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) {
			uni.showToast({
				title: t('user.getUserInfoFailed'),
				icon: 'none'
			});
		}
	};

	// 初始化应用版本号（多端兼容，取可用信息）
	const initVersion = () => {
		// #ifdef MP-WEIXIN
		try {
			const info = wx.getAccountInfoSync && wx.getAccountInfoSync();
			if (info && info.miniProgram && info.miniProgram.version) {
				appVersion.value = info.miniProgram.version;
			}
		} catch (e) {}
		// #endif

		// #ifdef APP-PLUS
		try {
			if (typeof plus !== 'undefined' && plus.runtime && plus.runtime.version) {
				appVersion.value = plus.runtime.version;
			}
		} catch (e) {}
		// #endif
	};

	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: `/subPackages/user/login/index?redirect=${redirect}`
			})
		} catch (e) {
			uni.reLaunch({
				url: '/subPackages/user/login/index'
			})
		}
	}

	// 导航到指定页面
	const navigateTo = (url) => {
		uni.navigateTo({
			url
		});
	};

	// 处理快速归还
	const handleQuickReturn = async () => {
		try {
			uni.showLoading({
				title: t('common.loading')
			});

			// 获取使用中的订单
			const res = await getInUseOrder();

			uni.hideLoading();

			if (res && res.code === 200 && res.data) {
				const inUseOrder = res.data;
				// 跳转到统一订单详情页面
				uni.navigateTo({
					url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${inUseOrder.deviceNo}`
				});
			} else {
				uni.showToast({
					title: t('order.noOrder'),
					icon: 'none'
				});
			}
		} catch (error) {
			uni.showToast({
				title: t('order.getOrderFailed'),
				icon: 'none'
			});
		}
	};

	// 处理提现按钮点击
	const handleWithdraw = () => {
		navigateTo('/pages/deposit/index');
	};

	// 处理用户资料点击
	const handleUserProfileClick = () => {
		const token = uni.getStorageSync('token')
		if (!token) {
			redirectToLogin()
			return
		}
		// #ifdef MP-WEIXIN
		getUserProfile()
		// #endif
		// #ifndef MP-WEIXIN
		uni.showToast({
			title: t('auth.pleaseUseInWechat'),
			icon: 'none'
		})
		// #endif
	};

	// 小程序原生选择头像回调（需基础库>=2.21.2）
	const onChooseAvatar = async (e) => {
		try {
			const token = uni.getStorageSync('token')
			if (!token) {
				redirectToLogin()
				return
			}
			const avatarLocalPath = e?.detail?.avatarUrl
			if (!avatarLocalPath) {
				uni.showToast({
					title: t('user.noAvatar'),
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: t('common.uploading'),
				mask: true
			})
			const uploadRes = await uploadUserAvatar(avatarLocalPath)
			const serverAvatar = uploadRes?.data?.url || uploadRes?.url || uploadRes?.data || ''
			if (serverAvatar) {
				userInfo.value = {
					...userInfo.value,
					avatar: serverAvatar
				}
				uni.setStorageSync('userInfo', userInfo.value)
			}
			uni.showToast({
				title: t('user.avatarUpdated'),
				icon: 'success'
			})
			await getInfo()
		} catch (err) {
			uni.showToast({
				title: t('user.avatarUploadFailed'),
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	// 打开授权弹窗
	const openAuthPopup = () => {
		if (authPopup.value) {
			authPopup.value.open();
			isPopupVisible.value = true;
		}
	};

	// 弹窗打开事件处理
	const onPopupOpen = () => {
		isPopupVisible.value = true;
		// 这里可以添加弹窗打开后的逻辑
	};

	// 弹窗关闭事件处理
	const onPopupClose = () => {
		isPopupVisible.value = false;
		// 这里可以添加弹窗关闭后的逻辑
	};

	// 获取微信用户个人信息
	const getUserProfile = () => {
		// #ifdef MP-WEIXIN
		uni.showLoading({
			title: t('common.getting'),
			mask: true
		});

		wx.getUserProfile({
			desc: '用于完善会员资料',
			success: (res) => {
				console.log('获取用户信息成功:', res);
				updateUserInfo(res.userInfo);
				uploadAvatarAndRefresh(res.userInfo);
			},
			fail: (err) => {
				console.error('获取用户信息失败:', err);
				uni.showToast({
					title: t('user.getUserInfoFailed'),
					icon: 'none'
				});
			},
			complete: () => {
				uni.hideLoading();
				closeAuthPopup();
			}
		});
		// #endif

		// #ifndef MP-WEIXIN
		uni.showToast({
			title: t('auth.pleaseUseInWechat'),
			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: t('user.updateSuccess'),
				icon: 'success'
			});

			// 更新完成后重新获取用户信息
			getInfo();
		} catch (error) {
			console.error('更新用户信息失败:', error);
			uni.showToast({
				title: t('user.updateFailed'),
				icon: 'none'
			});
		}
	};

	// 下载并上传头像，更新用户信息
	const uploadAvatarAndRefresh = async (wxUserInfo) => {
		try {
			const avatarUrl = wxUserInfo?.avatarUrl
			if (!avatarUrl) {
				uni.showToast({
					title: t('user.noAvatarUrl'),
					icon: 'none'
				})
				return
			}
			// 下载微信头像为本地临时文件
			const tempFilePath = await new Promise((resolve, reject) => {
				uni.downloadFile({
					url: avatarUrl,
					success: (res) => {
						if (res.statusCode === 200 && res.tempFilePath) {
							resolve(res.tempFilePath)
							return
						}
						reject(new Error(t('user.avatarDownloadFailed')))
					},
					fail: reject
				})
			})
			// 上传到后端
			const uploadRes = await uploadUserAvatar(tempFilePath)
			// 直接使用返回的头像地址（如果有），并刷新用户信息
			const serverAvatar = uploadRes?.data?.url || uploadRes?.url || uploadRes?.data || ''
			if (serverAvatar) {
				userInfo.value = {
					...userInfo.value,
					avatar: serverAvatar
				}
				uni.setStorageSync('userInfo', userInfo.value)
			}
			uni.showToast({
				title: t('user.avatarUpdated'),
				icon: 'success'
			})
			await getInfo()
		} catch (error) {
			uni.showToast({
				title: t('user.avatarUploadFailed'),
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

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

	// 关于我们
	const handleAboutUs = () => {
		uni.showToast({
			title: t('help.functionDeveloping'),
			icon: 'none'
		});
	};

	// 隐私政策
	const handlePrivacyPolicy = () => {
		uni.showToast({
			title: t('help.functionDeveloping'),
			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>
	.my-page {
		min-height: 100vh;
		background-color: #ffffff;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-direction: column;
	}

	.user-card {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;

		// background-color: #D1FFE1;
		background: linear-gradient(180deg, #D1FFE1 0%, #ffffff 100%);
		// border-bottom: 1rpx solid #f0f0f0;
		// margin: 0 20rpx;
	}

	.banner-card {
		margin: 20rpx 30rpx 0 30rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;
	}

	.banner-swiper {
		width: 100%;
		height: 260rpx;
	}

	.banner-image {
		width: 100%;
		height: 260rpx;
		border-radius: 50rpx;
		display: block;
	}

	.avatar-box {
		margin-right: 20rpx;
		position: relative;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #f0f0f0;
	}

	/* 仅小程序端存在，此按钮覆盖在头像上捕获点击以触发选择头像 */
	/* #ifdef MP-WEIXIN */
	.avatar-choose-btn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100rpx;
		height: 100rpx;
		border: none;
		background: transparent;
		padding: 0;
		margin: 0;
		opacity: 0;
		/* 保持可点击但不可见 */
	}

	/* #endif */

	.user-text {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}

	.subtext {
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.assets-card {
		margin: 20rpx 0;
		padding: 24rpx 30rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.assets-left .label {
		font-size: 26rpx;
		color: #666666;
	}

	.assets-left .amount {
		margin-top: 8rpx;
		font-size: 40rpx;
		color: #e2231a;
		font-weight: 600;
	}

	.withdraw-btn {
		display: inline-block;
		padding: 14rpx 28rpx;
		color: #e2231a;
		border: 1rpx solid #e2231a;
		border-radius: 6rpx;
		font-size: 26rpx;
	}

	.section {
		margin-top: 20rpx;
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #ffffff;
		flex: 1;
		// border-top: 1rpx solid #f0f0f0;
		// border-bottom: 1rpx solid #f0f0f0;
		border-radius: 20rpx;
	}

	.section-title {
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.list-item:first-child {
		border-top: none;
	}

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

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.title {
		font-size: 30rpx;
		color: #333333;
	}

	.footer-agreements {
		margin: 40rpx 0 20rpx 0;
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 22rpx;

		.link-box {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.footer-agreements .link {
		color: #999999;
	}

	.footer-agreements .sep {
		margin: 0 10rpx;
		color: #c0c0c0;
	}

	.footer-agreements .version {
		margin-top: 10rpx;
		color: #c0c0c0;
		font-size: 20rpx;
	}

	/* 保留弹窗样式（未启用） */
	.auth-popup {
		background-color: #ffffff;
		width: 100%;
		padding: 40rpx;
		border-radius: 12rpx;
	}

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

	.auth-desc {
		font-size: 28rpx;
		color: #666666;
		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;
	}
</style>