<view class="page safe-bottom">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="onBack">
      <image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
      <text class="unified-back-text">返回</text>
    </view>
    <text class="unified-header-title">余额提现</text>
    <view class="unified-header-right"></view>
  </view>

  <view class="wrap" style="padding-top: 214rpx">
    <!-- Balance Card -->
    <view class="card balance-card">
      <view class="balance-header">
        <text class="label">可提现佣金</text>
        <app-icon name="help-circle" size="32" color="#9CA3AF" />
      </view>
      <view class="balance-row">
        <text class="currency">¥</text>
        <text class="value">{{balance}}</text>
      </view>
      <view class="withdraw-tip">
        <app-icon name="info" size="24" color="#B06AB3" />
        <text>最低提现金额 ¥{{withdrawConfig.minWithdrawAmount || '1.00'}}</text>
      </view>
    </view>

    <!-- Form Card -->
    <view class="card form-card">
      <view class="field-group">
        <text class="f-label">提现金额</text>
        <view class="input-wrapper">
          <text class="input-prefix">¥</text>
          <input class="input" type="number" placeholder="0.00" placeholder-class="placeholder" value="{{amount}}" bindinput="onAmount" />
          <view class="all-btn" bindtap="fillAll">全部</view>
        </view>
      </view>

      <view class="field-group">
        <text class="f-label">提现方式</text>
        <view class="select-wrapper">
          <view class="select-left">
            <view class="wechat-icon-box">
              <app-icon name="wechat" size="40" color="#FFFFFF" />
            </view>
            <text class="select-text">微信零钱</text>
          </view>
          <app-icon name="check-circle-fill" size="40" color="#B06AB3" />
        </view>
      </view>
      
      <button class="btn-reset submit-btn" bindtap="submit" disabled="{{submitting}}">
        {{submitting ? '处理中...' : '立即提现'}}
      </button>

      <!-- 提现规则入口 -->
      <view class="rules-entry" bindtap="onOpenRules">
        <text class="rules-entry-text">提现规则与常见问题</text>
      </view>
    </view>

    <!-- Records Section -->
    <view class="records-section" wx:if="{{records.length > 0}}">
      <view class="section-header">
        <text class="section-title">提现记录</text>
      </view>
      <view class="record-list">
        <view class="record-item" wx:for="{{records}}" wx:key="id">
          <view class="record-info">
            <view class="record-type">微信提现</view>
            <view class="record-time">{{item.timeStr}}</view>
          </view>
          <view class="record-amount">
            <view class="amount-value">-¥{{item.amount}}</view>
            <view class="record-status status-{{item.status}}">{{item.statusText}}</view>
          </view>
          <!-- Rejection Reason -->
          <view class="reject-reason" wx:if="{{item.status === 'rejected' && item.rejectReason}}">
            <text class="reason-label">拒绝原因：</text>
            <text class="reason-content">{{item.rejectReason}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 规则说明弹窗 -->
  <view class="modal-mask" wx:if="{{showRulesModal}}" bindtap="onCloseRules"></view>
  <view class="modal-container" wx:if="{{showRulesModal}}">
    <view class="modal-header">
      <text class="modal-title">提现规则与常见问题</text>
      <view class="modal-close" bindtap="onCloseRules">
        <app-icon name="close" size="40" color="#9CA3AF" />
      </view>
    </view>
    <scroll-view scroll-y class="modal-scroll">
      <!-- 规则说明 -->
      <view class="rule-block">
        <view class="rule-header">
          <text class="rule-icon">📄</text>
          <text class="rule-title">提现规则说明</text>
        </view>
        <view class="rule-content">
          <view class="rule-item">1. <text class="rule-label">最低提现金额：</text>单笔提现金额不低于 ¥100.00。</view>
          <view class="rule-item">2. <text class="rule-label">每日提现次数：</text>每日最多可发起 3 次提现申请。</view>
          <view class="rule-item">3. <text class="rule-label">可提现余额：</text>仅限“已结算”状态的收入可提现，待结算金额暂不支持。</view>
          <view class="rule-item">4. <text class="rule-label">提现服务费：</text>每笔提现收取 1% 服务费（最低 ¥1.00），由第三方支付平台收取。</view>
          <view class="rule-item">5. <text class="rule-label">审核时间：</text>提现申请将在 24 小时 内完成审核并安排打款。</view>
          <view class="rule-item">6. <text class="rule-label">到账时间：</text>审核通过后，预计 24 小时内到账，具体以银行或微信到账通知为准。</view>
          <view class="rule-item">7. <text class="rule-label">账户要求：</text>提现账户需为 本人实名认证 的微信或银行卡。</view>
          <view class="rule-item">8. <text class="rule-label">失败处理：</text>如提现失败，金额将自动退回至可提现余额，可重新发起申请。</view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="rule-block">
        <view class="rule-header">
          <text class="rule-title">常见问题</text>
        </view>
        <view class="rule-content">
          <view class="qa-item">
            <view class="qa-q">· 为什么提现金额不符？</view>
            <view class="qa-a">可提现金额仅包含已结算收入，待结算部分暂不可提。</view>
          </view>
          <view class="qa-item">
            <view class="qa-q">· 提现服务费如何计算？</view>
            <view class="qa-a">每笔提现收取 5% 作为服务费，在提现金额中自动扣除。</view>
          </view>
          <view class="qa-item">
            <view class="qa-q">· 提现未到账怎么办？</view>
            <view class="qa-a">请在提现记录中查看审核状态，如超时未到账，请联系客服处理。</view>
          </view>
          <view class="qa-item">
            <view class="qa-q">· 如何更换提现账户？</view>
            <view class="qa-a">请在“账户管理”中更新实名认证信息。</view>
          </view>
        </view>
      </view>

      <!-- 需要帮助 -->
      <view class="rule-block">
        <view class="rule-header">
          <text class="rule-icon">📞</text>
          <text class="rule-title">需要帮助？</text>
        </view>
        <view class="rule-content">
          <view class="help-text">如有疑问，请前往 <text class="link-contact" bindtap="onContactService">在线客服</text> 咨询。</view>
          <view class="help-text">服务时间：工作日 9:00-22:00</view>
        </view>
      </view>
      
      <!-- 底部留白 -->
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</view>

