<!-- 平台履约金 / 保证金充值页 -->
<view class="deposit-page">
  <image wx:if="{{imgUrls.pageBg}}" class="page-bg" src="{{imgUrls.pageBg}}" mode="widthFix" />
  <view class="page-bg-fallback" wx:else></view>

  <view class="page-body">
    <view class="user-row">
      <image class="user-avatar" src="{{avatarUrl}}" mode="aspectFill" binderror="onAvatarError" />
      <view class="user-info">
        <text class="user-name">{{nickname || '打手'}}</text>
        <text class="user-id">会员ID: {{uid || '--'}}</text>
      </view>
    </view>

    <view class="deposit-card">
      <view class="deposit-card-left">
        <text class="deposit-card-title">平台接单履约金</text>
        <view class="deposit-price-row">
          <text class="deposit-currency">¥</text>
          <text class="deposit-price">{{yajinDisplay}}</text>
        </view>
        <text class="deposit-validity">有效期：永久有效</text>
      </view>
      <view class="deposit-card-right">
        <view class="icon-clip icon-clip-deposit" wx:if="{{imgUrls.hero}}">
          <image class="icon-clip-img" src="{{imgUrls.hero}}" mode="aspectFill" />
        </view>
        <view class="deposit-status">{{yajinActive ? '已缴纳' : '未激活'}}</view>
      </view>
      <view class="deposit-shimmer"></view>
    </view>

    <view class="section-card">
      <text class="section-title">履约金规则</text>
      <view class="rule-list">
        <view wx:for="{{depositRules}}" wx:key="index" class="rule-item">
          <text class="rule-num">{{index + 1}}.</text>
          <text class="rule-text">{{item}}</text>
        </view>
      </view>
    </view>

    <view class="section-card">
      <text class="section-title">平台履约金权益</text>
      <view class="benefit-grid">
        <view wx:for="{{depositBenefits}}" wx:key="label" class="benefit-item">
          <view wx:if="{{item.iconUrl}}" class="icon-clip icon-clip-deposit-benefit">
            <image class="icon-clip-img" src="{{item.iconUrl}}" mode="aspectFill" />
          </view>
          <text>{{item.label}}</text>
        </view>
      </view>
    </view>
  </view>

  <view class="footer-bar">
    <view class="agree-row" bindtap="toggleAgree">
      <view class="agree-check {{agreed ? 'agree-check--on' : ''}}">{{agreed ? '✓' : ''}}</view>
      <text class="agree-text">已阅读并同意</text>
      <text class="agree-link">《平台履约金缴纳规则》</text>
    </view>
    <view class="pay-btn {{agreed ? '' : 'pay-btn--disabled'}}" bindtap="onTapPay">
      <text>缴纳履约金{{payAmountLabel}}</text>
      <view class="pay-btn-shimmer"></view>
    </view>
  </view>
</view>

<!-- 金额输入弹窗 -->
<view class="modal-mask" wx:if="{{showAmountModal}}" bindtap="hideAmountModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">缴纳履约金</text>
    <text class="modal-sub">支持 1-10000 元整数</text>
    <view class="amount-input-wrap">
      <text class="amount-prefix">¥</text>
      <input class="amount-input" type="digit" value="{{yajinAmount}}" bindinput="onYajinInput" focus="{{showAmountModal}}" />
    </view>
    <view class="quick-row">
      <view wx:for="{{quickAmounts}}" wx:key="*this" class="quick-chip {{yajinAmount == item ? 'active' : ''}}" bindtap="setQuickAmount" data-amount="{{item}}">{{item}}元</view>
    </view>
    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="hideAmountModal">取消</view>
      <view class="modal-btn confirm" bindtap="onConfirmAmount">下一步</view>
    </view>
  </view>
</view>

<!-- 支付方式 -->
<view class="modal-mask" wx:if="{{showPayMethodModal}}" bindtap="hidePayMethodModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">选择支付方式</text>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="wx">
      <text class="pay-method-name">微信支付</text>
      <text class="pay-method-desc">安全快捷</text>
    </view>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="alipay">
      <text class="pay-method-name">支付宝</text>
      <text class="pay-method-desc">扫码支付</text>
    </view>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="balance">
      <text class="pay-method-name">余额抵扣</text>
      <text class="pay-method-desc">使用佣金或分红</text>
    </view>
  </view>
</view>

<view class="modal-mask" wx:if="{{showBalanceModal}}" bindtap="hideBalanceModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">选择抵扣身份</text>
    <view wx:for="{{balanceOptions}}" wx:key="id" class="balance-item" bindtap="onBalanceSelect" data-id="{{item.id}}">
      <text>{{item.jieshao}}</text>
      <text class="balance-need">需¥{{item.xuyao}}</text>
    </view>
  </view>
</view>

<view class="modal-mask" wx:if="{{showConfirmModal}}" bindtap="hideConfirmModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">确认抵扣</text>
    <view class="confirm-row"><text>身份</text><text>{{selectedBalanceInfo.jieshao}}</text></view>
    <view class="confirm-row"><text>金额</text><text>¥{{selectedBalanceInfo.xuyao}}</text></view>
    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="hideConfirmModal">取消</view>
      <view class="modal-btn confirm" bindtap="confirmBalancePay">确认支付</view>
    </view>
  </view>
</view>

<view class="loading-mask" wx:if="{{payLoading}}">
  <view class="loading-box">
    <view class="loading-spinner"></view>
    <text>{{loadingText}}</text>
  </view>
</view>

<global-notification id="global-notification" />
<popup-notice id="popupNotice" />
