<template>
	<view class="page-wrapper">
		<!-- 顶部弥散渐变背景 -->
		<view class="header-bg">
			<!-- 弥散光斑效果 -->
			<view class="blur-circle circle-1"></view>
			<view class="blur-circle circle-2"></view>
			<view class="blur-circle circle-3"></view>
			
			<!-- 标题 -->
			<!-- <view class="header-title">我的</view> -->
			
			<!-- 用户信息区域 -->
			<view class="user-info-section">
				<view class="user-avatar">
					<image class="avatar-img" :src="getImageUrl(userInfo.avatar) || defaultAvatar" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<view class="user-name">{{ userInfo.nickName || '未设置昵称' }}</view>
					<view class="user-phone">{{ userInfo.phonenumber || '未绑定手机' }}</view>
				</view>
				<button class="edit-btn" @click="editinfo()">编辑资料</button>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 菜单卡片 -->
			<view class="menu-card">
				<!-- <view class="menu-item" @click="Helpcenter()">
					<view class="menu-left">
						<image src="/static/my/Helpcenter.png" class="menu-icon"></image>
						<text class="menu-text">帮助中心</text>
					</view>
					<text class="cuIcon-right menu-arrow"></text>
				</view> -->
				<!-- <view class="menu-item">
					<view class="menu-left">
						<image src="/static/my/CustomerService.png" class="menu-icon"></image>
						<text class="menu-text">智能客服</text>
					</view>
					<text class="cuIcon-right menu-arrow"></text>
				</view> -->
				<view class="menu-item" @click="editinfo()">
					<view class="menu-left">
						<image src="/static/my/Notification.png" class="menu-icon"></image>
						<text class="menu-text">编辑个人信息</text>
					</view>
					<text class="cuIcon-right menu-arrow"></text>
				</view>
				<view class="menu-item" @click="Account()">
					<view class="menu-left">
						<image src="/static/my/Account.png" class="menu-icon"></image>
						<text class="menu-text">修改登录密码</text>
					</view>
					<text class="cuIcon-right menu-arrow"></text>
				</view>
				<!-- <view class="menu-item">
					<view class="menu-left">
						<image src="/static/my/Delete.png" class="menu-icon"></image>
						<text class="menu-text">清除缓存</text>
					</view>
					<view class="menu-right">
						<text class="menu-value">0B</text>
						<text class="cuIcon-right menu-arrow"></text>
					</view>
				</view>
				<view class="menu-item" @click="Settings()">
					<view class="menu-left">
						<image src="/static/my/Settings.png" class="menu-icon"></image>
						<text class="menu-text">通用设置</text>
					</view>
					<text class="cuIcon-right menu-arrow"></text>
				</view>
				<view class="menu-item">
					<view class="menu-left">
						<image src="/static/my/Helpcenter.png" class="menu-icon"></image>
						<text class="menu-text">关于</text>
					</view>
					<view class="menu-right">
						<text class="menu-value">1.0.0</text>
						<text class="cuIcon-right menu-arrow"></text>
					</view>
				</view> -->
			</view>
			
			<!-- 退出登录按钮 -->
			<button class="logout-btn" @click="handleLogout()">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onShow } from '@dcloudio/uni-app';
	import { baseUrl } from '@/request/request.js';
	import { getProfileDetail } from '@/request/three_one_api/info.js';
	
	const defaultAvatar = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg';
	
	// 用户信息
	const userInfo = reactive({
		avatar: '',
		nickName: '',
		phonenumber: ''
	});
	
	// 获取图片完整URL（用于显示）
	const getImageUrl = (path) => {
		if (!path) return '';
		if (path.startsWith('http')) return path;
		return baseUrl + path;
	};
	
	// 获取用户信息
	const loadUserInfo = async () => {
		try {
			const res = await getProfileDetail();
			if (res.code === 0 && res.data) {
				userInfo.avatar = res.data.avatar || '';
				userInfo.nickName = res.data.nickName || '';
				userInfo.phonenumber = res.data.phonenumber || '';
			}
		} catch (e) {
			console.error('获取用户信息失败:', e);
		}
	};
	
	// 每次页面显示时获取最新数据（包括从编辑页返回）
	onShow(() => {
		loadUserInfo();
	});
	
	//帮助中心
	const Helpcenter = () => {
		uni.navigateTo({
			url:'/pages/personalcenter/helpcenter'
		})
	}	
	//新消息通知
	const notification = () => {
		uni.navigateTo({
			url:'/pages/personalcenter/notification'
		})
	}
	//编辑个人信息
	const editinfo = () => {
		uni.navigateTo({
			url:'/pages/personalcenter/edit'
		})
	}
	//通用设置
	const Settings = () => {
		uni.navigateTo({
			url:'/pages/personalcenter/settings'
		})
	}
	//账号安全
	const Account = () => {
		uni.navigateTo({
			url:'/pages/personalcenter/account'
		})
	}
	//退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					uni.clearStorageSync()
					uni.reLaunch({
						url:'/pages/login/login'
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	
</script>

<style lang="scss" scoped>
.page-wrapper {
	min-height: 100vh;
	background: #EBF2FC;
}

// 顶部弥散渐变背景
.header-bg {
	position: relative;
	height: 400rpx;
	background: linear-gradient(180deg, #3B7FED 0%, #007AFF 50%, #8BB8F8 100%);
	padding-top: 60rpx;
	overflow: hidden;
	
	// 弥散光斑效果
	.blur-circle {
		position: absolute;
		border-radius: 50%;
		filter: blur(60rpx);
		opacity: 0.5;
	}
	
	.circle-1 {
		width: 300rpx;
		height: 300rpx;
		background: rgba(100, 180, 255, 0.6);
		top: -50rpx;
		left: -50rpx;
	}
	
	.circle-2 {
		width: 250rpx;
		height: 250rpx;
		background: rgba(150, 200, 255, 0.5);
		top: 100rpx;
		right: -30rpx;
	}
	
	.circle-3 {
		width: 200rpx;
		height: 200rpx;
		background: rgba(180, 220, 255, 0.4);
		bottom: 50rpx;
		left: 200rpx;
	}
}

// 标题
.header-title {
	text-align: center;
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	position: relative;
	z-index: 5;
}

// 用户信息区域
.user-info-section {
	display: flex;
	align-items: center;
	padding: 60rpx 40rpx 0;
	position: relative;
	z-index: 5;
	
	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid rgba(255, 255, 255, 0.5);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
		
		.avatar-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.user-details {
		flex: 1;
		margin-left: 24rpx;
		
		.user-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #fff;
			margin-bottom: 8rpx;
		}
		
		.user-phone {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.85);
		}
	}
	
	.edit-btn {
		// padding: 16rpx 32rpx;
		background: rgba(255, 255, 255, 0.25);
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
		font-size: 26rpx;
		color: #fff;
		backdrop-filter: blur(10rpx);
		
		&::after {
			border: none;
		}
	}
}

// 内容区域
.content-area {
	position: relative;
	margin-top: -60rpx;
	padding: 0 30rpx 50rpx;
	z-index: 10;
}

// 菜单卡片
.menu-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 10rpx 0;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 36rpx;
	border-bottom: 1rpx solid #F5F5F5;
	
	&:last-child {
		border-bottom: none;
	}
	
	.menu-left {
		display: flex;
		align-items: center;
		
		.menu-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 24rpx;
		}
		
		.menu-text {
			font-size: 30rpx;
			color: #333;
		}
	}
	
	.menu-right {
		display: flex;
		align-items: center;
		
		.menu-value {
			font-size: 28rpx;
			color: #999;
			margin-right: 8rpx;
		}
	}
	
	.menu-arrow {
		font-size: 28rpx;
		color: #ccc;
	}
}

// 退出登录按钮
.logout-btn {
	margin-top: 60rpx;
	height: 96rpx;
	line-height: 96rpx;
	background: linear-gradient(135deg, #3B7FED 0%, #5A9CF5 100%);
	border-radius: 48rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
	box-shadow: 0 8rpx 24rpx rgba(59, 127, 237, 0.35);
	
	&::after {
		border: none;
	}
}
</style>