<!--个人资料页面 - 美化版设计-->
<view class="profile-container">
  
  <scroll-view class="profile-content" 
               scroll-y="true" 
               enhanced="true"
               bounces="true"
               show-scrollbar="false"
               refresher-enabled="true" 
               refresher-triggered="{{refreshing}}" 
               bindrefresherrefresh="onRefresh">
    
<!-- 个人信息卡片（改版） -->
<view class="profile-card">
  <!-- 顶部区域：头像、名字、ID、去认证 -->
  <view class="profile-top">
    <view class="avatar-section">
      <view class="avatar-container" bindtap="changeAvatar">
        <image class="avatar-image" 
               src="{{userInfo.user.avatar || '/images/1111.jpg'}}" 
               mode="aspectFill" />
        <view class="avatar-overlay">
          <view class="camera-icon">📷</view>
        </view>
        <view class="avatar-decoration" wx:if="{{userInfo.user.isVip}}">👑</view>
        <view class="online-status online"></view>
      </view>
    </view>

    <view class="profile-main-info">
      <view class="profile-name-row">
        <text class="profile-name">{{userInfo.user.nickname || 'FindMe用户'}}</text>
        <view class="gender-badge" wx:if="{{userInfo.user.gender}}">
          {{userInfo.user.gender === 'male' ? '♂️' : userInfo.user.gender === 'female' ? '♀️' : ''}}
        </view>
        <view class="vip-crown" wx:if="{{userInfo.user.isVip}}">👑</view>
      </view>
      
      <view class="profile-id">
        <text class="id-label">ID: </text>
        <text class="id-value">{{userInfo.user.customId || (userInfo.user.id ? 'findme_' + userInfo.user.id : '未设置')}}</text>
        <!-- 新增：去认证按钮 -->
        <view class="verify-btn" wx:if="{{!userInfo.user.verified}}" bindtap="goVerify">
          <image class="verify-btn-p" bindtap="copyId" src="/images/btn.png" mode="widthFix" />
          <text class="verify-text">去认证</text>
        </view>
        <view class="verified-tag" wx:if="{{userInfo.user.verified}}">
          <image class="verified-tag-p" bindtap="copyId" src="/images/tag.png" mode="widthFix" />
          <text class="verified-text">已认证</text>
        </view>
        
      </view>
    </view>
  </view>

  <!-- 底部信息区：位置、二维码、编辑按钮、设置、简介、个人标签 -->
  <view class="profile-bottom">
    <!-- 操作按钮区 -->
    <view class="action-buttons">
      <view class="qr-code-btn" bindtap="navigateToQRCode">
        <image src="/images/qr-code.png" class="qr-code-icon"/>
      </view>
      
      <view class="edit-btn" bindtap="editProfile">
        <image src="/images/Edit3.png" class="edit-icon"/>
        <text class="edit-text">编辑</text>
      </view>
      
      <view class="setting-btn" bindtap="openSettings">
        <image src="/images/Subtract.png" class="setting-icon"/>
      </view>
    </view>

    <!-- 位置信息 -->
    <view class="profile-location"  bindtap="goVerify">
      <image src="/images/location.png" class="location-icon"/>
      <text class="location-text">291, Anwar Yousuf Road</text>
      <!-- <text class="location-text">{{userInfo.location}}</text> -->
    </view>

    <!-- 个人简介 wx:if="{{!userInfo.user.verified}}"-->
    <view class="profile-signature"  bindtap="goVerify"> <!--测试期加了"!"，实际是要删掉--> 
      <!--<text class="signature-text">{{userInfo.signature}} </text>-->
      <text class="signature-text">Morem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.  </text>
    </view>

    <!-- 个人标签区域 -->
    <view class="profile-tabs">
  <scroll-view scroll-x="true" class="tab-scroll" enable-flex="true">
    <view class="tab-item {{selectedTab === 'gender' ? 'active' : ''}}" data-tab="gender" bindtap="onTabSelect">
      <text>{{userInfo.user.gender === 'male' ? '♂️' : userInfo.user.gender === 'female' ? '♀️' : '？'}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'age' ? 'active' : ''}}" data-tab="age" bindtap="onTabSelect">
      <text>年龄 {{userInfo.age}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'mood' ? 'active' : ''}}" data-tab="mood" bindtap="onTabSelect">
      <text>心情 {{userInfo.mood}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'personality' ? 'active' : ''}}" data-tab="personality" bindtap="onTabSelect">
      <text>人格 {{userInfo.personality}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'identity' ? 'active' : ''}}" data-tab="identity" bindtap="onTabSelect">
      <text>身份 {{userInfo.identity}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'constellation' ? 'active' : ''}}" data-tab="constellation" bindtap="onTabSelect">
      <text>星座 {{userInfo.constellation}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'school' ? 'active' : ''}}" data-tab="school" bindtap="onTabSelect">
      <text>学校 {{userInfo.school}}</text>
    </view>

    <view class="tab-item {{selectedTab === 'occupation' ? 'active' : ''}}" data-tab="occupation" bindtap="onTabSelect">
      <text>职业 {{userInfo.occupation}}</text>
    </view>
  </scroll-view>
</view>
  </view>
</view>

<!-- My Footprints -->
<view class="myfootprint">
  <!-- Title -->

  <!-- White pill badge -->
  <view class="footprint-badge">
    <text>1个NOW，2个地点</text>
  </view>
</view>

<!-- Custom Post Input goes here  -->
<view>
<text class="textcolor">我的动态</text>
  <view class="input-box">
  <input type="text" placeholder="Write something" class="input-field"/>
  <image src="/images/cameras.png" class="camera-icon" mode="aspectFit"/>
</view>
</view>



<!-- My Moments -->
<view class="moments">
  <view class="moment-card">
    <!-- date & year -->
    <view class="moment-header">
      <text>26 Sep</text>
      <text>2025</text>
    </view>

    <!-- description -->
    <text class="moment-text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea eveniet, delectus unde quibusdam ipsum fugiat nostrum rerum maiores quisquam enim?
    </text>

    <!-- image -->
    <image src="/images/moments.png" mode="widthFix" class="moment-img"/>
  </view>
</view>



<!-- 会员卡片 -->


    <!-- 快捷功能区 -->
    <!-- <view class="quick-actions">
      <view class="action-row">
        <view class="action-item" bindtap="openWallet">
          <image src="/images/wallet-solid.png" class="action-icon wallete"/>
          <text class="action-text">卡包</text>
        </view>
        <view class="action-item" bindtap="openFavorites">
          <image src="/images/folder-favorite.png" class="action-icon favorites"/>
          <text class="action-text">收藏</text>
        </view>
        <view class="action-item" bindtap="openCards">
          <image src="/images/album-bold.png" class="action-icon album"/>
          <text class="action-text">相册</text>
        </view>
      </view>
      <view class="action-row">
        <view class="action-item" bindtap="openStickers">
          <image src="/images/emoji-lol.png" class="action-icon stickers"/>
          <text class="action-text">圈子</text>
        </view>
        <view class="action-item" bindtap="openGames">
          <image src="/images/game-fill.png" class="action-icon games"/>
          <text class="action-text">游戏</text>
        </view>
        <view class="action-item" bindtap="openShopping">
          <image src="/images/shopping-bag.png" class="action-icon shopping"/>
          <text class="action-text">团购</text>
        </view>
      </view>
    </view> -->

    <!-- 调试信息卡片 -->
    <view class="debug-card" wx:if="{{debugMode}}">
      <view class="debug-header">
        <view class="debug-icon">🔧</view>
        <text class="debug-title">调试信息</text>
        <view class="debug-toggle" bindtap="toggleDebug">
          <text class="toggle-text">{{showDebugDetails ? '隐藏' : '展开'}}</text>
        </view>
      </view>
      
      <view class="debug-content" wx:if="{{showDebugDetails}}">
        <view class="debug-section">
          <text class="debug-label">用户信息:</text>
          <text class="debug-value">{{debugInfo.userInfo}}</text>
        </view>
        
        <view class="debug-section">
          <text class="debug-label">Token状态:</text>
          <text class="debug-value {{debugInfo.tokenValid ? 'success' : 'error'}}">
            {{debugInfo.tokenValid ? '✅ 有效' : '❌ 无效'}}
          </text>
        </view>
        
        <view class="debug-section">
          <text class="debug-label">网络状态:</text>
          <text class="debug-value">{{debugInfo.networkType || '未知'}}</text>
        </view>
        
        <view class="debug-section">
          <text class="debug-label">版本信息:</text>
          <text class="debug-value">{{debugInfo.version || 'v1.0.0'}}</text>
        </view>
        
        <view class="debug-actions">
          <view class="debug-btn" bindtap="testAPI">
            <text class="btn-text">测试API</text>
          </view>
          <view class="debug-btn" bindtap="showCacheStats">
            <text class="btn-text">缓存统计</text>
          </view>
          <view class="debug-btn" bindtap="clearCache">
            <text class="btn-text">清除缓存</text>
          </view>
          <view class="debug-btn" bindtap="exportLogs">
            <text class="btn-text">导出日志</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部空间 - 确保所有内容都能滚动到 -->
    <view class="bottom-space" style="height: {{safeAreaBottom + 60}}px;"></view>
  </scroll-view>

  <!-- 个人状态编辑弹窗 -->
  <view class="status-modal {{showStatusModal ? 'show' : ''}}" wx:if="{{showStatusModal}}">
    <view class="modal-mask" bindtap="hideStatusModal"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">设置状态</text>
        <view class="modal-close" bindtap="hideStatusModal">✕</view>
      </view>
      
      <view class="modal-body">
        <view class="status-options">
          <view class="status-option" 
                wx:for="{{statusOptions}}" 
                wx:key="id"
                bindtap="selectStatus" 
                data-status="{{item}}"
                class="{{selectedStatus.id === item.id ? 'selected' : ''}}">
            <view class="option-icon">{{item.icon}}</view>
            <text class="option-text">{{item.text}}</text>
          </view>
        </view>
        
        <view class="status-input">
          <input class="custom-status" 
                 placeholder="自定义状态..." 
                 value="{{customStatus}}" 
                 bindinput="onStatusInput" />
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="modal-btn cancel" bindtap="hideStatusModal">取消</view>
        <view class="modal-btn confirm" bindtap="saveStatus">保存</view>
      </view>
    </view>
  </view>

  <!-- 成就徽章展示 -->
  <view class="achievement-banner" wx:if="{{showAchievement}}">
    <view class="banner-content">
      <view class="achievement-icon">🏆</view>
      <view class="achievement-text">
        <text class="achievement-title">恭喜获得新徽章!</text>
        <text class="achievement-desc">{{newAchievement.name}}</text>
      </view>
      <view class="banner-close" bindtap="hideAchievement">✕</view>
    </view>
  </view>
</view>