<!--手机号绑定页面-->
<view class="container" style="height: {{windowHeight}}px;">
  
  <!-- 自定义导航栏 -->
  <view class="custom-navbar" style="height: {{navBarHeight}}px; padding-top: {{statusBarHeight}}px;">
    <view class="navbar-content">
      <view class="navbar-left" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="navbar-title">绑定手机号</view>
      <view class="navbar-right"></view>
    </view>
  </view>

  <!-- 主要内容 -->
  <view class="main-content">
    
    <!-- 头部说明 -->
    <view class="header-section">
      <view class="header-icon">📱</view>
      <view class="header-title">绑定手机号</view>
      <view class="header-desc">为了更好的使用体验和账号安全，请绑定您的手机号</view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      
      <!-- 手机号输入 -->
      <view class="input-group">
        <text class="input-label">手机号</text>
        <view class="input-container">
          <view class="input-icon">📱</view>
          <input 
            class="phone-input" 
            type="number" 
            placeholder="请输入手机号" 
            maxlength="11"
            value="{{phoneNumber}}"
            bindinput="onPhoneInput"
            placeholder-class="input-placeholder"
          />
        </view>
      </view>

      <!-- 验证码输入 -->
      <view class="input-group">
        <text class="input-label">验证码</text>
        <view class="input-container code-container">
          <view class="input-icon">🔐</view>
          <input 
            class="code-input" 
            type="number" 
            placeholder="请输入验证码" 
            maxlength="6"
            value="{{verifyCode}}"
            bindinput="onCodeInput"
            placeholder-class="input-placeholder"
          />
          <view 
            class="code-button {{canSendCode ? 'active' : 'disabled'}}" 
            bindtap="sendVerifyCode"
          >
            <text class="code-button-text">{{codeButtonText}}</text>
          </view>
        </view>
      </view>

      <!-- 绑定按钮 -->
      <view 
        class="bind-button {{canBind ? 'active' : 'disabled'}}" 
        bindtap="handleBind"
      >
        <view class="bind-content">
          <view class="bind-icon" wx:if="{{isBinding}}">⏳</view>
          <view class="bind-icon" wx:else>🔗</view>
          <text class="bind-text">{{isBinding ? '绑定中...' : '立即绑定'}}</text>
        </view>
      </view>

    </view>

    <!-- 温馨提示 -->
    <view class="tips-section">
      <view class="tips-title">温馨提示</view>
      <view class="tips-item">• 绑定手机号后可以更安全地管理您的账号</view>
      <view class="tips-item">• 如果该手机号已关联其他账号，系统会提示您进行账号合并</view>
      <view class="tips-item">• 账号合并后，所有数据将统一到当前账号</view>
    </view>

  </view>

  <!-- 账号合并对话框 -->
  <view class="merge-dialog-mask" wx:if="{{showMergeDialog}}" bindtap="closeMergeDialog">
    <view class="merge-dialog" catchtap="">
      
      <view class="dialog-header">
        <view class="dialog-title">发现可合并的账号</view>
        <view class="dialog-close" bindtap="closeMergeDialog">×</view>
      </view>

      <view class="dialog-content">
        <view class="dialog-desc">该手机号已关联以下账号，请选择处理方式：</view>
        
        <!-- 候选账号列表 -->
        <view class="candidates-list">
          <view
            class="candidate-item"
            wx:for="{{mergeCandidates}}"
            wx:key="customId"
          >
            <view class="candidate-info">
              <view class="candidate-name">{{item.nickname || '未知用户'}}</view>
              <view class="candidate-detail">
                <text class="detail-item">注册时间：{{item.registerTime}}</text>
                <text class="detail-item">匹配原因：{{item.matchReason}}</text>
                <text class="detail-item">可信度：{{item.confidence}}%</text>
              </view>
            </view>
            <view
              class="merge-btn"
              data-custom-id="{{item.customId}}"
              bindtap="mergeSpecificAccount"
            >
              合并此账号
            </view>
          </view>
        </view>
      </view>

      <view class="dialog-actions">
        <view class="action-btn cancel-btn" bindtap="closeMergeDialog">取消</view>
        <view class="action-btn auto-btn" bindtap="autoMergeAll">自动合并所有</view>
      </view>

    </view>
  </view>

  <!-- 安全区域占位 -->
  <view style="height: {{safeAreaBottom}}px;"></view>

</view>
