<template>
  <view class="container">
    <!-- 表单内容 -->
    <view class="form-content">
      <!-- 昵称表单项 -->
      <view class="form-item">
        <view class="form-label">昵称：</view>
        <input 
          type="text" 
          class="input-field" 
          placeholder="请输入昵称"
          v-model="nickname"
        />
      </view>
      
      <!-- 头像表单项 -->
      <view class="form-item">
        <view class="form-label">头像：</view>
        <view class="avatar-container">
          <view class="avatar-preview" @tap="changeAvatar">
          </view>
          <view class="avatar-tip">点击更新头像</view>
        </view>
      </view>
      </view>
      <!-- 保存按钮 -->
      <button class="save-btn" @tap="saveUserInfo">保存</button>
    
  </view>
</template>

<script setup>
import { ref } from 'vue';

const nickname = ref("玩家59306");

const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      uni.showToast({
        title: '头像已更新',
        icon: 'success'
      });
    }
  });
};

const saveUserInfo = () => {
  if (!nickname.value.trim()) {
    uni.showToast({
      title: '昵称不能为空',
      icon: 'none'
    });
    return;
  }
  
  uni.showToast({
    title: '用户信息已保存',
    icon: 'success'
  });
  
  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};
</script>

<style>
page{
	background-color: rgb(240, 243, 245);
}
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.page-header {
  background-color: #6a5acd;
  color: white;
  padding: 40rpx;
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
}

/* 表单内容 */
.form-content {
  padding: 20rpx 40rpx;
  margin-top: 30rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
}

.form-label {
  width: 160rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.input-field {
  flex: 1;
  padding: 20rpx 30rpx;
  border: 1px solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  outline: none;
  background-color: #f9f9f9;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-preview {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
  background-color: #1e3a8a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-tip {
  color: #999;
  font-size: 28rpx;
}

/* 保存按钮 */
.save-btn {
  
  background-color: rgb(55, 47, 172);
  color: white;
  border: none;
  border-radius: 13rpx;
  width: 550rpx;
  font-size: 36rpx;
  font-weight: 500;
  margin-top: 40rpx;
}
</style>