<template>
	<view class="container">
		<view class="user-info">
			<view class="avatar">
				<text class="avatar-text">{{ userInfo ? userInfo.name.charAt(0).toUpperCase() : 'U' }}</text>
			</view>
			<view class="info">
				<text class="username">{{ userInfo ? userInfo.name : '未登录' }}</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @click="handleLogout">
				<text class="menu-text">退出登录</text>
				<text class="arrow">></text>
			</view>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			userInfo: null
		}
	},
	
	onLoad() {
		this.loadUserInfo()
	},
	
	onShow() {
		this.loadUserInfo()
	},
	
	methods: {
		loadUserInfo() {
			const userInfo = storage.getUserInfo()
			if (userInfo) {
				this.userInfo = userInfo
			}
		},
		
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						storage.clearAll()
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

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

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

.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;
}

.phone {
	font-size: 28rpx;
	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;
}
</style>
