<view class="page">
  <!-- 自定义导航栏 -->
  <view class="nav-container">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">个人信息</view>
    </view>
  </view>

  <view class="container" style="padding-top: {{totalNavHeight}}px">
    <!-- 头像选择 -->
    <view class="cell-group">
      <button class="cell avatar-cell" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
        <view class="cell-label">头像</view>
        <view class="cell-value">
          <image class="avatar" src="{{form.avatar || defaultAvatar}}" mode="aspectFill" binderror="onAvatarError" />
          <app-icon name="chevron-right" size="32" color="#C7C7CC" />
        </view>
      </button>
    </view>

    <!-- 基本信息 -->
    <view class="cell-group">
      <view class="cell">
        <view class="cell-label">昵称</view>
        <view class="cell-value">
          <input 
            class="cell-input" 
            type="nickname" 
            placeholder="填写昵称" 
            value="{{form.nickname}}" 
            bindinput="onNicknameInput"
            bindblur="onNicknameBlur"
          />
        </view>
      </view>

      <view class="cell">
        <view class="cell-label">性别</view>
        <view class="cell-value">
          <picker mode="selector" range="{{genderRange}}" bindchange="onGenderChange">
            <view class="picker-value {{form.gender ? '' : 'placeholder'}}">
              {{form.gender === 1 ? '男' : (form.gender === 2 ? '女' : '去选择')}}
            </view>
          </picker>
          <app-icon name="chevron-right" size="32" color="#C7C7CC" />
        </view>
      </view>

      <view class="cell">
        <view class="cell-label">年龄段</view>
        <view class="cell-value">
          <picker mode="selector" range="{{ageRanges}}" bindchange="onAgeRange">
            <view class="picker-value {{form.age_range ? '' : 'placeholder'}}">
              {{form.age_range || '去选择'}}
            </view>
          </picker>
          <app-icon name="chevron-right" size="32" color="#C7C7CC" />
        </view>
      </view>

      <view class="cell">
        <view class="cell-label">地区</view>
        <view class="cell-value">
          <picker mode="region" bindchange="onRegion">
            <view class="picker-value {{form.region ? '' : 'placeholder'}}">
              {{form.region || '去选择'}}
            </view>
          </picker>
          <app-icon name="chevron-right" size="32" color="#C7C7CC" />
        </view>
      </view>
    </view>

    <!-- 手机号 (不可编辑) -->
    <view class="cell-group">
      <view class="cell readonly-cell">
        <view class="cell-label">手机号</view>
        <view class="cell-value">
          <text class="phone-text">{{form.phone || '未绑定'}}</text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="btn-area">
      <button class="save-btn" bindtap="save" disabled="{{saving || uploading}}">
        {{saving ? '保存中...' : '完成'}}
      </button>
      
      <view class="reward-tip" wx:if="{{!isProfileCompleted}}">
        <app-icon name="heart-filled" size="24" color="#B06AB3" />
        <text>完善资料可获得 100 爱心值</text>
      </view>
    </view>
  </view>
</view>
