<navigation-bar title="红包记录" back="{{true}}" color="black" background="#FFF" />

<view class="page-wrap">
  <view class="summary-section">
    <view class="summary-card total-card">
      <text class="card-label">总领取金额</text>
      <text class="card-amount total-amount">¥{{summary.totalAmount}}</text>
    </view>
    <view class="summary-row">
      <view class="summary-card sub-card">
        <text class="card-label">待领取金额</text>
        <text class="card-amount pending">¥{{summary.pendingAmount}}</text>
      </view>
      <view class="summary-card sub-card">
        <text class="card-label">已领取金额</text>
        <text class="card-amount received">¥{{summary.receivedAmount}}</text>
      </view>
      <view class="summary-card sub-card">
        <text class="card-label">已过期金额</text>
        <text class="card-amount expired">¥{{summary.expiredAmount}}</text>
      </view>
    </view>
  </view>

  <view class="tabs-wrap">
    <van-tabs active="{{activeTab}}" bind:change="onTabChange" animated>
      <van-tab wx:for="{{tabs}}" wx:key="value" title="{{item.label}}" />
    </van-tabs>
  </view>

  <view wx:if="{{list.length}}" class="red-history">
    <scroll-view
      class="list-scroll"
      scroll-y
      bindscrolltolower="onReachBottom"
      lower-threshold="200"
    >
      <view class="record" wx:for="{{list}}" wx:key="id">
        <image class="red-icon" src="./assets/red.svg" mode="aspectFill"/>
        <view class="content">
          <text class="name">{{item.description}}</text>
          <text class="time">{{item.date}}</text>
        </view>
        <view class="right">
          <text class="amount">￥{{item.amountText}}</text>
          <view wx:if="{{item.canReceive}}" class="receive-btn" data-id="{{item.id}}" data-outRewardsId="{{item.outRewardsId}}" bind:tap="handleReceive">{{item.isRetry ? '重试' : '领取'}}</view>
          <text wx:else class="state-text">{{item.stateText}}</text>
        </view>
      </view>

      <view wx:if="{{!hasMore}}" class="no-more">没有更多数据了</view>
      <view wx:if="{{loading}}" class="loading-tip">加载中...</view>
    </scroll-view>
  </view>

  <view wx:else class="no-data">暂无记录</view>
</view>
