<template>
	<view class="profile-container">
		<!-- 编辑表单 -->
		<view class="profile-content">
			<!-- 昵称 -->
			<view class="profile-item">
				<text class="item-label">昵称</text>
				<input 
					class="item-input" 
					v-model="nickname" 
					placeholder="请输入昵称"
					maxlength="20"
				/>
			</view>
			
			<view class="tip-text">
				<text>💡 昵称将显示在个人中心和作品列表中</text>
			</view>
			
			<!-- 保存按钮 -->
			<button class="save-btn" @click="saveProfile">保存</button>
		</view>
	</view>
</template>

<script>
import { API_BASE } from '@/config/api.js';

export default {
	data() {
		return {
			nickname: ''
		};
	},
	onLoad() {
		this.loadProfile();
	},
	methods: {
		loadProfile() {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.nickname = userInfo.nickname || '';
			}
		},
		
		async saveProfile() {
			if (!this.nickname.trim()) {
				uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				});
				return;
			}
			
			const userInfo = uni.getStorageSync('userInfo') || {};
			const userId = userInfo.id || uni.getStorageSync('userId');
			
			if (!userId) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			
			// 调用API更新昵称
			uni.showLoading({
				title: '保存中...'
			});
			
			const token = uni.getStorageSync('token');
			
			uni.request({
				url: `${API_BASE}/api/users/profile/${userId}`,
				method: 'PUT',
				header: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${token}`
				},
				data: {
					nickname: this.nickname.trim()
				},
				success: (res) => {
					console.log('[EditProfile] API响应:', res.data);
					
					if (res.statusCode === 200 && res.data.success) {
						// 更新本地存储
						userInfo.nickname = this.nickname;
						uni.setStorageSync('userInfo', userInfo);
						uni.setStorageSync('nickname', this.nickname);
						uni.setStorageSync('userNickname', this.nickname);
						
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.message || '保存失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('[EditProfile] 请求失败:', err);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background: #FDF8F2;
}

/* 编辑内容 */
.profile-content {
	padding: 30upx;
}

.profile-item {
	background: white;
	border-radius: 30upx;
	padding: 30upx;
	margin-bottom: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.08);
	
	.item-label {
		font-size: 28upx;
		color: #333;
		font-weight: 600;
		min-width: 120upx;
	}
	
	.item-value {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		.value-text {
			font-size: 28upx;
			color: #666;
			margin-right: 10upx;
		}
	}
	
	.item-arrow {
		font-size: 32upx;
		color: #999;
	}
	
	.item-input {
		flex: 1;
		text-align: right;
		font-size: 28upx;
		color: #333;
	}
}

/* 提示文本 */
.tip-text {
	padding: 0 30upx;
	margin-top: 10upx;
	margin-bottom: 40upx;
	font-size: 24upx;
	color: #999;
	line-height: 1.6;
}

/* 保存按钮 */
.save-btn {
	width: 100%;
	padding: 36upx;
	background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
	color: white;
	border: none;
	border-radius: 32upx;
	font-size: 32upx;
	font-weight: bold;
	box-shadow: 0 12upx 32upx rgba(139, 115, 85, 0.3);
	transition: all 0.3s;
	margin-top: 20upx;
	
	&:active {
		transform: translateY(-2upx);
		box-shadow: 0 16upx 40upx rgba(139, 115, 85, 0.4);
	}
}
</style>
