<Dialog
  visible="{{visible}}"
  maskClosable="{{true}}"
  zIndex="{{20000}}"
  containerClass="coupon-dialog-container {{useDarkTheme ? 'coupon-dialog-container-dark' : ''}}"
  containerStyle="width: 560rpx; background: transparent; overflow: visible; border-radius: 0;"
  bind:close="closeCouponDrawer"
>
  <view class="coupon-card">
    <view class="coupon-tab">卡券</view>

    <view class="coupon-contain">
      <view class="coupon-contain-top">
        <view class="coupon-main-title">{{title}}</view>
        <view wx:if="{{desc}}" class="coupon-sub-title">{{desc}}</view>

        <view wx:if="{{imageUrl}}" class="coupon-image-wrap">
          <image class="coupon-image" src="{{imageUrl}}" mode="aspectFill" />
        </view>
      </view>

      <view wx:if="{{showText}}" class="coupon-contain-middle">
        <view class="coupon-pickup-condition">满足以下条件即可领取</view>
        <view wx:if="{{isHasLimit}}" class="coupon-pickup-condition-desc">
          <view class="coupon-pickup-condition-desc-text">观看本场直播</view>
          <view class="can-pickup-coupon">
            <text wx:if="{{canPickUp}}">已满足</text>
            <text wx:else>未满足</text>
          </view>
        </view>

        <view wx:if="{{IsViewerLevelLimit}}" class="coupon-pickup-condition-desc">
          <view class="coupon-pickup-condition-desc-text">达到可领取卡券的观众等级</view>
          <view class="can-pickup-coupon">
            <text wx:if="{{isLevelEligible}}">已满足</text>
            <text wx:else>未满足</text>
          </view>
        </view>
      </view>

      <view wx:if="{{!isPopup && (isNeedCountDown || isNeedCutOff)}}" class="coupon-countdown-wrap">
        <view wx:if="{{isNeedCountDown && countdownArr.length}}" class="coupon-countdown">
          <view class="countdown-box">{{countdownArr[0]}}</view>
          <view class="countdown-sep">:</view>
          <view class="countdown-box">{{countdownArr[1]}}</view>
          <view class="countdown-sep">:</view>
          <view class="countdown-box">{{countdownArr[2]}}</view>
          <text class="countdown-text">后截止</text>
        </view>
        <view wx:if="{{isNeedCutOff}}" class="coupon-cutoff">
          <text>截止至</text> {{cutOffText}}
        </view>
      </view>

      <view class="coupon-contain-bottom">
        <view wx:if="{{isPopup && (isNeedCountDown || isNeedCutOff)}}" class="coupon-countdown-wrap">
          <view wx:if="{{isNeedCountDown && countdownArr.length}}" class="coupon-countdown">
            <view class="countdown-box">{{countdownArr[0]}}</view>
            <view class="countdown-sep">:</view>
            <view class="countdown-box">{{countdownArr[1]}}</view>
            <view class="countdown-sep">:</view>
            <view class="countdown-box">{{countdownArr[2]}}</view>
            <text class="countdown-text">后截止</text>
          </view>
          <view wx:if="{{isNeedCutOff}}" class="coupon-cutoff">
            <text>截止至</text> {{cutOffText}}
          </view>
        </view>

        <view wx:if="{{countText || timeText}}" class="coupon-meta">
          <text wx:if="{{countText}}">{{countText}} </text>
          <text wx:if="{{timeText}}">{{timeText}}</text>
        </view>

        <!-- 按钮 -->
        <custom-button
          class="coupon-btn-host"
          custom-class="coupon-btn"
          type="primary"
          size="44"
          disabled="{{btnDisabled}}"
          bind:click="onPickup"
        >
          {{btnText}}
        </custom-button>
        <view class="coupon-tip">{{tipText}}</view>
      </view>
    </view>

    <view class="coupon-close" bindtap="closeCouponDrawer">
      <image src="../../assets/icon_close_btn.svg" class="coupon-close-icon" />
    </view>
  </view>
</Dialog>
