<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="我的"
		:show-back="false"
		:show-tab-bar="true"
		@tab-change="handleTabChange"
	>
		<view class="page-content">
			<!-- 用户信息头部 -->
			<view class="user-header">
				<view class="user-avatar">
					<uni-icons type="person-filled" size="60" color="#fff"></uni-icons>
				</view>
				<view class="user-info">
					<text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
					<text class="user-desc">{{ userInfo.username || '点击登录' }}</text>
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="menu-section">
				<view class="menu-item" @tap="navigateTo('/pages/ucenter/profile')">
					<view class="menu-left">
						<uni-icons type="gear" size="20" color="#667eea"></uni-icons>
						<text class="menu-text">个人设置</text>
					</view>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/ucenter/help')">
					<view class="menu-left">
						<uni-icons type="help" size="20" color="#667eea"></uni-icons>
						<text class="menu-text">帮助中心</text>
					</view>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
				<view class="menu-item" @tap="navigateTo('/pages/ucenter/about')">
					<view class="menu-left">
						<uni-icons type="info" size="20" color="#667eea"></uni-icons>
						<text class="menu-text">关于我们</text>
					</view>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-section" v-if="isLogin">
				<button class="logout-btn" @tap="handleLogout">退出登录</button>
			</view>
		</view>
	</un-pages>
</template>

<script>
import { isLogin, logout } from '@/utils/auth.js'

export default {
	data() {
		return {
			userInfo: {},
			isLogin: false
		}
	},
	onLoad() {
		this.checkLoginStatus()
	},
	onShow() {
		this.checkLoginStatus()
	},
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			this.isLogin = isLogin()
			this.userInfo = uni.getStorageSync('userInfo') || {}
		},

		// 页面跳转
		navigateTo(url) {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '/pages/ucenter/login/index'
				})
				return
			}

			uni.showToast({
				title: '功能开发中',
				icon: 'none',
				duration: 2000
			})
		},

		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						logout()
					}
				}
			})
		},

		// Tab切换
		handleTabChange(path) {
			console.log('Tab changed to:', path)
		}
	}
}
</script>

<style lang="scss" scoped>
.page-content {
	padding: 40rpx 30rpx;
}

.user-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	margin: 40rpx 0;
	display: flex;
	align-items: center;

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;

		.user-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 16rpx;
		}

		.user-desc {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

.menu-section {
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

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

			.menu-text {
				font-size: 32rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}
}

.logout-section {
	margin-top: 60rpx;

	.logout-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background: #fff;
		color: #f56c6c;
		font-size: 32rpx;
		border: 2rpx solid #f56c6c;

		&::after {
			border: none;
		}
	}
}
</style>
