<template>

	<view class="page">

		<view class="profile-header">

			<view class="profile-info">

				<view class="profile-avatar">

					<text class="avatar-text">{{ avatarText }}</text>

				</view>

				<view class="profile-detail">

					<text class="profile-name">{{ user?.nickname || '云泽用户' }}</text>

					<text class="profile-id">ID: {{ userId }}</text>

				</view>

				<view class="profile-edit" @tap="onEdit">

					<FaIcon name="pen-to-square" color="#3c9cff" :size="18" />

				</view>

			</view>



			<view class="profile-stats">

				<view class="profile-stat" v-for="item in profileStats" :key="item.label">

					<text class="stat-num">{{ item.value }}</text>

					<text class="stat-label">{{ item.label }}</text>

				</view>

			</view>

		</view>



		<view class="main-scroll">

			<view class="menu-group" v-for="(group, gIndex) in menuGroups" :key="gIndex">

				<view

					class="menu-item"

					v-for="item in group"

					:key="item.title"

					@tap="onMenuTap(item)"

				>

					<view class="menu-left">

						<view class="menu-icon">

							<FaIcon :name="item.icon" color="#3c9cff" :size="18" />

						</view>

						<text class="menu-title">{{ item.title }}</text>

					</view>

					<view class="menu-right">

						<text v-if="item.badge" class="menu-badge">{{ item.badge }}</text>

						<FaIcon name="chevron-right" color="#9acafc" :size="14" />

					</view>

				</view>

			</view>



			<view class="logout-btn" @tap="handleLogout">

				<text class="logout-text">退出登录</text>

			</view>



			<view class="bottom-space" />

		</view>



		<AppTabbar current="profile" />

	</view>

</template>



<script setup>

import { ref, computed, onMounted } from 'vue'

import { getUser, logout, isLoggedIn } from '@/utils/auth.js'

import AppTabbar from '@/components/AppTabbar.vue'



const user = ref(null)



const avatarText = computed(() => {

	const name = user.value?.nickname || '云'

	return name.charAt(0).toUpperCase()

})



const userId = computed(() => {

	return user.value?.phone

		? user.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')

		: '10086'

})



const profileStats = ref([

	{ label: '关注', value: '128' },

	{ label: '粉丝', value: '256' },

	{ label: '获赞', value: '1.2k' }

])



const menuGroups = ref([

	[

		{ title: '我的订单', icon: 'clipboard-list' },

		{ title: '我的收藏', icon: 'star' },

		{ title: '浏览历史', icon: 'clock-rotate-left' }

	],

	[

		{ title: '消息通知', icon: 'bell', badge: '3' },

		{ title: '账号安全', icon: 'lock' },

		{ title: '隐私设置', icon: 'eye' }

	],

	[

		{ title: '帮助中心', icon: 'circle-question' },

		{ title: '关于我们', icon: 'circle-info' },

		{ title: '设置', icon: 'gear' }

	]

])



onMounted(() => {

	if (!isLoggedIn()) {

		uni.reLaunch({ url: '/pages/login/login' })

		return

	}

	user.value = getUser()

})



function onEdit() {

	uni.showToast({ title: '编辑资料', icon: 'none' })

}



function onMenuTap(item) {

	uni.showToast({ title: item.title, icon: 'none' })

}



function handleLogout() {

	uni.showModal({

		title: '提示',

		content: '确定要退出登录吗？',

		success(res) {

			if (res.confirm) {

				logout()

				uni.reLaunch({ url: '/pages/login/login' })

			}

		}

	})

}

</script>



<style lang="scss" scoped>

.page {

	height: 100vh;

	background: #ffffff;

	display: flex;

	flex-direction: column;

	overflow: hidden;

}



.profile-header {

	flex-shrink: 0;

	padding: calc(var(--status-bar-height, 44px) + 24rpx) 40rpx 32rpx;

	background: #ffffff;

}



.profile-info {

	display: flex;

	align-items: center;

	gap: 24rpx;

}



.profile-avatar {

	width: 100rpx;

	height: 100rpx;

	border-radius: 50%;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-shrink: 0;

}



.avatar-text {

	font-size: 40rpx;

	font-weight: 600;

	color: $u-primary;

}



.profile-detail {

	flex: 1;

}



.profile-name {

	display: block;

	font-size: 36rpx;

	font-weight: 600;

	color: $u-primary;

}



.profile-id {

	display: block;

	font-size: 24rpx;

	color: $u-primary-disabled;

	margin-top: 6rpx;

}



.profile-edit {

	width: 64rpx;

	height: 64rpx;

	border-radius: 50%;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	display: flex;

	align-items: center;

	justify-content: center;



	&:active {

		border-color: $u-primary-disabled;

	}

}



.profile-stats {

	display: flex;

	justify-content: space-around;

	margin-top: 32rpx;

	padding: 28rpx 0;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

}



.profile-stat {

	display: flex;

	flex-direction: column;

	align-items: center;

}



.stat-num {

	font-size: 32rpx;

	font-weight: 600;

	color: $u-primary;

}



.stat-label {

	font-size: 22rpx;

	color: $u-primary-disabled;

	margin-top: 4rpx;

}



.main-scroll {

	flex: 1;

	min-height: 0;

	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

	padding: 8rpx 40rpx 0;

}



.menu-group {

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

	margin-bottom: 24rpx;

	overflow: hidden;

}



.menu-item {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 28rpx;

	border-bottom: 2rpx solid #f0f6fb;



	&:last-child {

		border-bottom: none;

	}



	&:active {

		background: #f8fafc;

	}

}



.menu-left {

	display: flex;

	align-items: center;

	gap: 20rpx;

}



.menu-icon {

	width: 64rpx;

	height: 64rpx;

	border-radius: 16rpx;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	display: flex;

	align-items: center;

	justify-content: center;

}



.menu-title {

	font-size: 28rpx;

	color: $u-primary;

}



.menu-right {

	display: flex;

	align-items: center;

	gap: 12rpx;

}



.menu-badge {

	font-size: 20rpx;

	color: #ffffff;

	background: $u-primary;

	padding: 2rpx 12rpx;

	border-radius: 999rpx;

	min-width: 32rpx;

	text-align: center;

}



.logout-btn {

	margin-top: 8rpx;

	height: 96rpx;

	background: #ffffff;

	border: 2rpx solid #e8f0f8;

	border-radius: 16rpx;

	display: flex;

	align-items: center;

	justify-content: center;



	&:active {

		border-color: $u-primary-disabled;

		background: #f8fafc;

	}

}



.logout-text {

	font-size: 30rpx;

	color: $u-primary-disabled;

	font-weight: 500;

}



.bottom-space {

	height: 40rpx;

}

</style>


