<template>
	<view class="container">
		<view class="user-info" @click="handleUserInfoClick">
			<image v-if="userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
			<view v-else class="avatar">
				<text class="avatar-text">{{ userInfo.nickName ? userInfo.nickName.charAt(0) : 'U' }}</text>
			</view>
			<view class="info">
				<text class="username">{{ userInfo.nickName || '未登录' }}</text>
				<text v-if="!userInfo.nickName" class="login-tip">点击登录，保存答题记录</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item">
				<text class="menu-text">关于我们</text>
				<text class="arrow">></text>
			</view>
		</view>
		
		<view v-if="userInfo.nickName" class="action-section">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
import storage from '../../utils/storage.js'

export default {
	data() {
		return {
			userInfo: {}
		}
	},
	
	onShow() {
		this.loadUserInfo()
	},
	
	methods: {
		loadUserInfo() {
			const userInfo = storage.getUserInfo()
			if (userInfo) {
				this.userInfo = userInfo
			} else {
				this.userInfo = {}
			}
		},
		
		handleUserInfoClick() {
			if (!this.userInfo.nickName) {
				this.handleLogin()
			}
		},
		
		handleLogin() {
			uni.navigateTo({
				url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/mine/mine')
			})
		},
		
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						storage.removeToken()
						storage.removeRefreshToken()
						storage.removeUserInfo()
						storage.removeQuestion()
						storage.clearAnsweredQuestions()
						
						this.userInfo = {}
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
}

.user-info {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 80rpx 40rpx;
	display: flex;
	align-items: center;
}

.user-info:active {
	opacity: 0.9;
}

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

.avatar-text {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
}

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

.username {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 10rpx;
}

.login-tip {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.menu-list {
	margin-top: 20rpx;
}

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

.menu-item:active {
	background: #f8f9fa;
}

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

.arrow {
	font-size: 32rpx;
	color: #999;
}

.action-section {
	margin-top: 60rpx;
	padding: 0 40rpx;
}

.logout-btn {
	width: 100%;
	height: 88rpx;
	background: #ffffff;
	color: #ff4d4f;
	font-size: 32rpx;
	border-radius: 12rpx;
	border: 2rpx solid #ff4d4f;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logout-btn:active {
	background: #fff1f0;
}
</style>
