<view class="my-coupons-page">
  <!-- 头部导航 -->
  <view class="header">
    <view class="nav-bar">
      <button class="back-btn" bindtap="goBack">
        ← 返回
      </button>
      <view class="page-title">我的优惠券</view>
      <view class="placeholder"></view>
    </view>
  </view>

  <!-- 选项卡 -->
  <view class="tabs-container">
    <view class="tab-item {{activeTab === 'available' ? 'active' : ''}}" 
          bindtap="switchTab" data-tab="available">
      可用({{availableCoupons.length}})
    </view>
    <view class="tab-item {{activeTab === 'used' ? 'active' : ''}}" 
          bindtap="switchTab" data-tab="used">
      已用({{usedCoupons.length}})
    </view>
    <view class="tab-item {{activeTab === 'expired' ? 'active' : ''}}" 
          bindtap="switchTab" data-tab="expired">
      过期({{expiredCoupons.length}})
    </view>
  </view>

  <!-- 可用优惠券 -->
  <view wx:if="{{activeTab === 'available'}}" class="coupons-list">
    <block wx:for="{{availableCoupons}}" wx:key="id">
      <view class="coupon-card available" bindtap="viewCouponDetail" data-id="{{item.id}}">
        <view class="coupon-left">
          <view class="coupon-value">¥{{item.value}}</view>
          <view class="coupon-name">{{item.name}}</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-status">可使用</view>
          <view class="coupon-expire">
            {{item.expireDate.split('T')[0]}}到期
          </view>
        </view>
        <view class="coupon-corner"></view>
      </view>
    </block>

    <view wx:if="{{availableCoupons.length === 0}}" class="empty-coupons">
      <view class="empty-icon">🎫</view>
      <view class="empty-text">暂无可用优惠券</view>
      <view class="empty-desc">去积分商城兑换优惠券吧</view>
    </view>
  </view>

  <!-- 已使用优惠券 -->
  <view wx:if="{{activeTab === 'used'}}" class="coupons-list">
    <block wx:for="{{usedCoupons}}" wx:key="id">
      <view class="coupon-card used" bindtap="viewCouponDetail" data-id="{{item.id}}">
        <view class="coupon-left">
          <view class="coupon-value">¥{{item.value}}</view>
          <view class="coupon-name">{{item.name}}</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-status">已使用</view>
          <view class="coupon-expire">
            {{item.usedDate.split('T')[0]}}使用
          </view>
        </view>
        <view class="used-mask">
          <text class="used-text">已使用</text>
        </view>
      </view>
    </block>

    <view wx:if="{{usedCoupons.length === 0}}" class="empty-coupons">
      <view class="empty-icon">📝</view>
      <view class="empty-text">暂无已使用优惠券</view>
      <view class="empty-desc">使用过的优惠券会显示在这里</view>
    </view>
  </view>

  <!-- 已过期优惠券 -->
  <view wx:if="{{activeTab === 'expired'}}" class="coupons-list">
    <block wx:for="{{expiredCoupons}}" wx:key="id">
      <view class="coupon-card expired" bindtap="viewCouponDetail" data-id="{{item.id}}">
        <view class="coupon-left">
          <view class="coupon-value">¥{{item.value}}</view>
          <view class="coupon-name">{{item.name}}</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-status">已过期</view>
          <view class="coupon-expire">
            {{item.expireDate.split('T')[0]}}过期
          </view>
        </view>
        <view class="expired-mask">
          <text class="expired-text">已过期</text>
        </view>
      </view>
    </block>

    <view wx:if="{{expiredCoupons.length === 0}}" class="empty-coupons">
      <view class="empty-icon">⏰</view>
      <view class="empty-text">暂无过期优惠券</view>
      <view class="empty-desc">过期的优惠券会显示在这里</view>
    </view>
  </view>
</view>

