<view class="profile-edit-container">
  <!-- 顶部导航栏 -->
  <view class="nav-bar">
    <view class="nav-back" bindtap="closeAllPickers">
    </view>
    <view class="nav-save" bindtap="saveChanges">
      <text class="save-text">保存</text>
    </view>
  </view>

  <!-- 滑动内容容器 -->
  <view class="scroll-container">
  <!-- 头像区域 -->
  <view class="avatar-section">
    <view class="avatar-container">
      <image class="avatar" src="{{userInfo.avatar || '/images/placeholder.txt'}}" mode="aspectFill"></image>
      <view class="avatar-upload" bindtap="changeAvatar">
        <text class="upload-icon">+</text>
      </view>
    </view>
  </view>

  <!-- 用户信息区域 -->
  <view class="info-section">
    <!-- 用户ID -->
    <view class="info-item">
      <text class="info-label">用户ID</text>
      <text class="info-value">{{userInfo.customId}}</text>
    </view>

    <!-- 昵称 -->
    <view class="info-item">
      <text class="info-label">昵称</text>
      <view class="nickname-container" bindtap="startEditNickname">
        <text class="info-value">{{userInfo.nickname}}</text>
        <text class="edit-icon">✎</text>
      </view>
    </view>
  </view>

  <!-- 个人简历区域 -->
  <view class="resume-section">
    <view class="section-title">个人简历</view>
    <view class="resume-item" bindtap="startEditSignature">
      <text class="resume-value">{{userInfo.signature || '点击添加个人简历'}}</text>
      <text class="edit-icon">✎</text>
    </view>
  </view>

  <!-- 关于我区域 -->
  <view class="about-section">
    <view class="section-title">关于我</view>

    <!-- 职业 -->
    <view class="about-item" bindtap="openCareerPicker">
      <text class="about-label">职业</text>
      <view class="about-content">
        <text class="about-value">{{userInfo.career || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 教育背景 -->
    <view class="about-item" bindtap="openEducationPicker">
      <text class="about-label">教育</text>
      <view class="about-content">
        <text class="about-value">{{userInfo.education || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="basic-info">
      <!-- 性别 -->
      <view class="basic-info-item" bindtap="openGenderPicker">
        <text class="info-label">性别</text>
        <text class="info-value">{{userInfo.gender || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>

      <!-- 生日 -->
      <view class="basic-info-item" bindtap="openBirthdayPicker">
        <text class="info-label">生日</text>
        <text class="info-value">{{userInfo.birthday || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>

      <!-- 家乡 -->
      <view class="basic-info-item" bindtap="openHometownPicker">
        <text class="info-label">家乡</text>
        <text class="info-value">{{userInfo.hometown || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>
  </view>

  <!-- 更多区域 -->
  <view class="more-section">
    <view class="section-title">更多</view>

    <!-- 星座 -->
    <view class="more-item" bindtap="openConstellationPicker">
      <text class="more-label">星座</text>
      <view class="more-content">
        <text class="more-value">{{userInfo.constellation || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 身高 -->
    <view class="more-item" bindtap="openHeightPicker">
      <text class="more-label">身高</text>
      <view class="more-content">
        <text class="more-value">{{userInfo.height ? userInfo.height + 'cm' : ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 人格类型 -->
    <view class="more-item" bindtap="openPersonalityPicker">
      <text class="more-label">人格类型</text>
      <view class="more-content">
        <text class="more-value">{{userInfo.personalityType || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 睡眠习惯 -->
    <view class="more-item" bindtap="openSleepHabitPicker">
      <text class="more-label">睡眠习惯</text>
      <view class="more-content">
        <text class="more-value">{{userInfo.sleepHabit || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>

    <!-- 社交活跃度 -->
    <view class="more-item" bindtap="openSocialActivityPicker">
      <text class="more-label">社交活跃度</text>
      <view class="more-content">
        <text class="more-value">{{userInfo.socialActivity || ' '}}</text>
        <text class="arrow-icon">→</text>
      </view>
    </view>
  </view>

  <!-- 编辑昵称弹窗 -->
  <view class="modal-mask" wx:if="{{isEditingNickname}}" bindtap="cancelEditNickname"></view>
  <view class="modal-container" wx:if="{{isEditingNickname}}">
    <view class="modal-title">编辑昵称</view>
    <input class="modal-input" value="{{tempNickname}}" bindinput="inputNickname" maxlength="30" placeholder="请输入昵称"></input>
    <view class="modal-buttons">
      <view class="modal-button cancel" bindtap="cancelEditNickname">取消</view>
      <view class="modal-button confirm" bindtap="confirmEditNickname">确定</view>
    </view>
  </view>

  <!-- 编辑签名弹窗 -->
  <view class="modal-mask" wx:if="{{isEditingSignature}}" bindtap="cancelEditSignature"></view>
  <view class="modal-container" wx:if="{{isEditingSignature}}">
    <view class="modal-title">编辑个人简介</view>
    <textarea class="modal-textarea" value="{{tempSignature}}" bindinput="inputSignature" maxlength="200" placeholder="请输入个人简介"></textarea>
    <view class="modal-buttons">
      <view class="modal-button cancel" bindtap="cancelEditSignature">取消</view>
      <view class="modal-button confirm" bindtap="confirmEditSignature">确定</view>
    </view>
  </view>

  <!-- 星座选择器 -->
  <view class="picker-mask" wx:if="{{showConstellationPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showConstellationPicker}}">
    <view class="picker-title">选择星座</view>
    <view class="constellation-grid">
      <view class="constellation-item {{selectedConstellation === item ? 'selected' : ''}}" wx:for="{{constellations}}" wx:key="index" data-value="{{item}}" bindtap="selectConstellation">{{item}}</view>
    </view>
    <view class="picker-button confirm" bindtap="confirmConstellation">确定</view>
  </view>

  <!-- 人格类型选择器 -->
  <view class="picker-mask" wx:if="{{showPersonalityPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showPersonalityPicker}}">
    <view class="picker-title">选择人格类型</view>
    <view class="personality-grid">
      <view class="personality-item {{selectedPersonality === item ? 'selected' : ''}}" wx:for="{{personalityTypes}}" wx:key="index" data-value="{{item}}" bindtap="selectPersonality">{{item}}</view>
    </view>
    <view class="picker-button confirm" bindtap="confirmPersonality">确定</view>
  </view>

  <!-- 职业选择器 -->
  <view class="picker-mask" wx:if="{{showCareerPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showCareerPicker}}">
    <view class="picker-title">选择职业</view>
    <view class="search-container">
      <input class="search-input" placeholder="搜索职业" value="{{searchCareerText}}" bindinput="searchCareer"></input>
      <text class="search-icon">🔍</text>
    </view>
    <scroll-view class="career-scroll" scroll-y>
      <view class="career-item" wx:for="{{filteredCareers}}" wx:key="index" data-value="{{item}}" bindtap="selectCareer">{{item}}</view>
    </scroll-view>
  </view>

  <!-- 教育背景选择器 -->
  <view class="picker-mask" wx:if="{{showEducationPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showEducationPicker}}">
    <view class="picker-title">选择教育背景</view>
    <view class="search-container">
      <input class="search-input" placeholder="搜索院校" value="{{searchEducationText}}" bindinput="searchEducation"></input>
      <text class="search-icon">🔍</text>
    </view>
    <scroll-view class="education-scroll" scroll-y>
      <view class="education-item" wx:for="{{filteredEducations}}" wx:key="index" data-value="{{item}}" bindtap="selectEducation">{{item}}</view>
    </scroll-view>
  </view>

  <!-- 家乡选择器 - 滑动选择方式 -->
  <view class="picker-mask" wx:if="{{showHometownPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showHometownPicker}}">
    <view class="picker-title">选择家乡</view>
    <view class="hometown-picker-view">
      <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 400rpx;" bindchange="onHometownChange" value="{{hometownValue}}">
        <picker-view-column>
          <view wx:for="{{cities[selectedProvince] || []}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{provinces}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view class="picker-button confirm" bindtap="confirmHometown">确定</view>
  </view>

  <!-- 生日选择器 - 滑动选择方式 -->
  <view class="picker-mask" wx:if="{{showBirthdayPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showBirthdayPicker}}">
    <view class="picker-title">选择生日</view>
    <view class="birthday-picker-view">
      <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 400rpx;" bindchange="onBirthdayChange">
        <picker-view-column>
          <view wx:for="{{years}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{months}}" wx:key="index" style="line-height: 50rpx;">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{days}}" wx:key="index" style="line-height: 50rpx;">{{item}}日</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view class="picker-button confirm" bindtap="confirmBirthday">确定</view>
  </view>

  <!-- 身高选择器 -->
  <view class="picker-mask" wx:if="{{showHeightPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showHeightPicker}}">
    <view class="picker-title">选择身高</view>
    <view class="height-picker">
      <text class="picker-label">身高</text>
      <slider min="130" max="220" value="{{selectedHeight}}" show-value bindchange="adjustHeight"></slider>
      <text class="height-value">{{selectedHeight}}cm</text>
    </view>
    <view class="picker-button confirm" bindtap="confirmHeight">确定</view>
  </view>

  <!-- 性别选择器 -->
  <view class="picker-mask" wx:if="{{showGenderPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showGenderPicker}}">
    <view class="picker-title">选择性别</view>
    <view class="gender-picker">
      <text class="picker-label">性别</text>
      <view class="gender-options">
        <view class="gender-option {{selectedGender === '男' ? 'selected' : ''}}" data-value="男" bindtap="selectGender">男</view>
        <view class="gender-option {{selectedGender === '女' ? 'selected' : ''}}" data-value="女" bindtap="selectGender">女</view>
      </view>
    </view>
  </view>

  <!-- 睡眠习惯选择器 -->
  <view class="picker-mask" wx:if="{{showSleepHabitPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showSleepHabitPicker}}">
    <view class="picker-title">选择睡眠习惯</view>
    <view class="sleep-habit-section">
      <scroll-view class="sleep-habit-scroll" scroll-y>
        <view class="habit-item" wx:for="{{sleepHabits}}" wx:key="index" data-value="{{item}}" bindtap="selectSleepHabit">{{item}}</view>
      </scroll-view>
    </view>
  </view>

  <!-- 社交活跃度选择器 -->
  <view class="picker-mask" wx:if="{{showSocialActivityPicker}}" bindtap="closeAllPickers"></view>
  <view class="picker-container" wx:if="{{showSocialActivityPicker}}">
    <view class="picker-title">选择社交活跃度</view>
    <view class="social-activity-section">
      <scroll-view class="social-activity-scroll" scroll-y>
        <view class="activity-item" wx:for="{{socialActivities}}" wx:key="index" data-value="{{item}}" bindtap="selectSocialActivity">{{item}}</view>
      </scroll-view>
    </view>
  </view>

  </view>

  <!-- 相机预览 -->
  <view class="camera-mask" wx:if="{{showCameraPreview}}" bindtap="retakePhoto"></view>
  <view class="camera-preview" wx:if="{{showCameraPreview}}">
    <image src="{{tempAvatarPath}}" mode="aspectFit"></image>
    <view class="preview-buttons">
      <view class="preview-button retake" bindtap="retakePhoto">重拍</view>
      <view class="preview-button use" bindtap="usePhoto">使用照片</view>
    </view>
  </view>
</view>