<!-- coupons.wxml - 优惠券页 -->
<view class="container">
  <!-- Tab 切换 -->
  <view class="tabs card">
    <view
      class="tab-item {{activeTab === 'exchange' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="exchange"
    >兑换商城</view>
    <view
      class="tab-item {{activeTab === 'my' ? 'active' : ''}}"
      bindtap="switchTab"
      data-tab="my"
    >我的优惠券</view>
  </view>

  <!-- 兑换商城 -->
  <view wx:if="{{activeTab === 'exchange'}}">
    <view
      class="coupon-card card"
      wx:for="{{catalog}}"
      wx:key="id"
    >
      <view class="flex-row">
        <view class="coupon-amount">
          <text class="amount-value">{{item.denominationYuan}}</text>
          <text class="amount-unit">元</text>
        </view>
        <view class="flex-1 ml-24">
          <view class="text-bold text-large">{{item.name}}</view>
          <view class="text-hint mt-8">
            有效期 {{item.validDays}} 天
          </view>
        </view>
        <button
          class="btn btn-primary btn-sm"
          bindtap="redeemCoupon"
          data-id="{{item.id}}"
          data-points="{{item.pointsRequired}}"
        >
          {{item.pointsRequired}} 积点兑换
        </button>
      </view>
    </view>
  </view>

  <!-- 我的优惠券 -->
  <view wx:if="{{activeTab === 'my'}}">
    <!-- 状态筛选 -->
    <view class="filter-tabs mt-16 mb-16">
      <view class="filter-tab {{myFilter === '' ? 'active' : ''}}" bindtap="filterMyCoupons" data-status="">全部</view>
      <view class="filter-tab {{myFilter === 'available' ? 'active' : ''}}" bindtap="filterMyCoupons" data-status="available">可使用</view>
      <view class="filter-tab {{myFilter === 'used' ? 'active' : ''}}" bindtap="filterMyCoupons" data-status="used">已使用</view>
      <view class="filter-tab {{myFilter === 'expired' ? 'active' : ''}}" bindtap="filterMyCoupons" data-status="expired">已过期</view>
    </view>

    <view
      class="coupon-card card {{item.status !== 'available' ? 'used-coupon' : ''}}"
      wx:for="{{myCoupons}}"
      wx:key="id"
    >
      <view class="flex-row">
        <view class="coupon-amount">
          <text class="amount-value">{{item.denominationYuan}}</text>
          <text class="amount-unit">元</text>
        </view>
        <view class="flex-1 ml-24">
          <view class="text-bold text-large">{{item.name}}</view>
          <view class="text-hint mt-8">有效期至 {{item.expiresAt}}</view>
          <view class="mt-8">
            <text class="coupon-status" style="color: {{item.statusColor}};">
              {{item.statusText}}
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="empty" wx:if="{{myCoupons.length === 0 && !loading}}">
      <view class="empty-icon">🎫</view>
      <view>暂无优惠券</view>
      <view class="text-hint mt-8">去兑换商城看看吧！</view>
    </view>
  </view>
</view>
