<!--pages/withdraw-records/withdraw-records.wxml-->
<view class="page">
  <!-- 固定导航栏容器 -->
  <view class="nav-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">提现记录</view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view 
    scroll-y 
    class="content-scroll" 
    style="padding-top: {{totalNavHeight}}px;" 
    enhanced 
    show-scrollbar="{{false}}"
    bindscrolltolower="onReachBottom"
  >
    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view 
        wx:for="{{statusList}}" 
        wx:key="value"
        class="filter-item {{currentStatus === item.value ? 'active' : ''}}"
        data-status="{{item.value}}"
        bindtap="onStatusChange"
      >
        {{item.label}}
      </view>
    </view>

    <!-- 提现记录列表 -->
    <view class="records-list" wx:if="{{!isEmpty}}">
      <view 
        wx:for="{{list}}" 
        wx:key="id"
        class="record-card"
      >
        <!-- 头部：单号和状态 -->
        <view class="record-header">
          <view class="order-no">单号: {{item.orderNo}}</view>
          <view class="status {{getStatusClass(item.status)}}">
            {{getStatusText(item.status)}}
          </view>
        </view>

        <!-- 金额信息 -->
        <view class="amount-section">
          <view class="amount-row">
            <text class="label">提现金额</text>
            <text class="value primary">¥{{formatMoney(item.amount)}}</text>
          </view>
          <view class="amount-row">
            <text class="label">手续费</text>
            <text class="value">¥{{formatMoney(item.fee)}}</text>
          </view>
          <view class="amount-row highlight">
            <text class="label">实际到账</text>
            <text class="value">¥{{formatMoney(item.actualAmount)}}</text>
          </view>
        </view>

        <!-- 时间信息 -->
        <view class="time-section">
          <view class="time-row">
            <text class="label">申请时间</text>
            <text class="value">{{formatTime(item.createdAt)}}</text>
          </view>
          <view class="time-row" wx:if="{{item.processedAt}}">
            <text class="label">处理时间</text>
            <text class="value">{{formatTime(item.processedAt)}}</text>
          </view>
        </view>

        <!-- 拒绝原因 -->
        <view class="reject-reason" wx:if="{{item.status === 'rejected' && item.rejectReason}}">
          <view class="reason-label">拒绝原因</view>
          <view class="reason-text">{{item.rejectReason}}</view>
        </view>

        <!-- 到账说明 -->
        <view class="arrival-tip" wx:if="{{item.status === 'approved'}}">
          <text class="tip-icon">💡</text>
          <text class="tip-text">预计1-3个工作日到账</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{isEmpty && !loading}}">
      <image src="/images/empty-records.png" class="empty-icon" mode="aspectFit"></image>
      <view class="empty-text">暂无提现记录</view>
      <view class="empty-tip">完成推广任务后即可申请提现</view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-more" wx:if="{{loading && list.length > 0}}">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 没有更多 -->
    <view class="no-more" wx:if="{{!hasMore && list.length > 0}}">
      <text class="no-more-text">没有更多了</text>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>
</view>
