<template>
  <view class="nickname-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <!-- <text class="nav-icon">&lt;</text> -->
      </view>
      <view class="nav-title">昵称</view>
      <view class="nav-right" @click="saveNickname">
        <text class="nav-text">完成</text>
      </view>
    </view>

    <!-- 内容区 -->
    <view class="content">
      <view class="input-item">
        <text class="label">名称</text>
        <input 
          class="input" 
          v-model="nickname" 
          placeholder="请输入昵称" 
          maxlength="20"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nickname: '' // 绑定输入框的昵称值
    }
  },
  onLoad(options) {
    // 如果是从其他页面跳转过来，可以接收并回显旧昵称
    if (options.oldNickname) {
      this.nickname = options.oldNickname
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    // 保存昵称
    saveNickname() {
      if (!this.nickname.trim()) {
        uni.showToast({
          title: '昵称不能为空',
          icon: 'none'
        })
        return
      }
      
      // 这里可以调用接口保存昵称到后端
      uni.showLoading({
        title: '保存中...'
      })
      
      // 模拟接口请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        
        // 保存成功后返回上一页，并携带新昵称
        uni.navigateBack({
          success() {
            const pages = getCurrentPages()
            const prevPage = pages[pages.length - 1]
            if (prevPage) {
              // 通知上一页更新昵称显示
              prevPage.$vm.$emit('updateNickname', this.nickname)
            }
          }
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.nickname-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #409eff;
  color: #fff;
  padding: 0 15px;
}

.nav-left {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-icon {
  font-size: 18px;
  font-weight: bold;
}

.nav-title {
  font-size: 17px;
  font-weight: 500;
}

.nav-right {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-text {
  font-size: 16px;
}

/* 内容区 */
.content {
  margin-top: 10px;
  background-color: #fff;
}

.input-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.label {
  font-size: 16px;
  color: #333;
  width: 60px;
  flex-shrink: 0;
}

.input {
  flex: 1;
  font-size: 16px;
  color: #333;
  text-align: right;
}
</style>