<view class="page">
  <!-- 选项卡 -->
  <view class="coupon-tabs">
    <view class="ct-item {{tab === 'available' ? 'active' : ''}}" bindtap="switchTab" data-tab="available">可领取</view>
    <view class="ct-item {{tab === 'my' ? 'active' : ''}}" bindtap="switchTab" data-tab="my">我的优惠券</view>
  </view>

  <!-- 可领取优惠券 -->
  <view class="coupon-list" wx:if="{{tab === 'available'}}">
    <view class="coupon-card" wx:for="{{availableCoupons}}" wx:key="id">
      <view class="coupon-left">
        <view class="coupon-amount">
          <text class="ca-symbol">¥</text>
          <text class="ca-value">{{couponTypeValue(item)}}</text>
        </view>
        <view class="coupon-min">满{{item.min_amount || 0}}可用</view>
      </view>
      <view class="coupon-right">
        <view class="coupon-name">{{item.name}}</view>
        <view class="coupon-time">{{item.start_time || ''}} - {{item.end_time || ''}}</view>
        <button class="btn-primary btn-small" wx:if="{{!item.received}}" bindtap="onReceive" data-id="{{item.id}}" data-index="{{index}}">立即领取</button>
        <text class="tag tag-success" wx:else>已领取</text>
      </view>
    </view>
  </view>

  <!-- 我的优惠券 -->
  <view class="coupon-list" wx:if="{{tab === 'my'}}">
    <view class="coupon-tab-bar" style="display:flex;gap:0;margin-bottom:16rpx">
      <text class="c-tab {{myTab === 'unused' ? 'active' : ''}}" bindtap="switchMyTab" data-tab="unused">未使用</text>
      <text class="c-tab {{myTab === 'used' ? 'active' : ''}}" bindtap="switchMyTab" data-tab="used">已使用</text>
      <text class="c-tab {{myTab === 'expired' ? 'active' : ''}}" bindtap="switchMyTab" data-tab="expired">已过期</text>
    </view>

    <view class="coupon-card my" wx:for="{{myCoupons}}" wx:key="id">
      <view class="coupon-left">
        <view class="coupon-amount">
          <text class="ca-symbol">¥</text>
          <text class="ca-value">{{couponValue(item)}}</text>
        </view>
        <view class="coupon-min">满{{item.min_amount || 0}}可用</view>
      </view>
      <view class="coupon-right">
        <view class="coupon-name">{{item.name}}</view>
        <view class="coupon-time">有效期至 {{item.expired_time}}</view>
      </view>
    </view>
  </view>

  <empty-state
    wx:elif="{{!loading && ((tab === 'available' && availableCoupons.length === 0) || (tab === 'my' && myCoupons.length === 0))}}"
    icon="📄"
    text="{{tab === 'available' ? '暂无优惠券' : '暂无优惠券记录'}}"
  />
</view>
