<!-- 优惠信息 -->
<template>
  <div class="coupon-list">
    <div class="coupon-tab">
      <div :class="['tab-item', showCanUse?'active':'']" @click="showCanUse=true">{{$t('coupons.availableCoupons')}}</div>
      <div :class="['tab-item', showCanUse?'':'active']" @click="showCanUse=false">{{$t('coupons.noCouponsAvailable')}}</div>
    </div>
    <div class="coupon-box" v-if="showCanUse">
      <div
        class="c-item"
        @click="checkCoupon(cItem.couponUserId,index)"
        :class="{'check':cItem.choose  && index==currIndex}"
        v-for="(cItem, index) in coupons.canUseCoupons"
        :key="index"
      >
        <div class="coupon-type">
          <div class="coupon-price">
            <div class="price" v-if="cItem.couponType==1 || cItem.couponType==3">
              ￥
              <span class="big">{{cItem.reduceAmount}}</span>
            </div>
            <div class="price" v-if="cItem.couponType==2">
              <span class="big">{{cItem.couponDiscount}}</span>
              {{$t('fold')}}
            </div>
            <div class="limit" v-if="$t('language')!=='en'">满{{cItem.cashCondition}}元可用</div>
            <div class="limit" v-if="$t('language')!=='zh'">{{$t('available')}} {{$t('over')}} ￥ {{cItem.cashCondition}}</div>
          </div>
          <div class="coupon-time">{{$t('coupons.validUntil')}}：{{cItem.endTime}}</div>
        </div>
        <div class="coupon-info">
          <div class="range">
            <div class="range-item">
              <span class="label">{{$t('only')}}：</span>
              <span class="text">{{cItem.suitableProdType==0?$t('coupons.universal'):$t('coupons.specifiedProductsAvailable')}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="coupon-box" v-if="!showCanUse">
      <div class="c-item useless" v-for="(cItem,index) in coupons.unCanUseCoupons" :key="index">
        <div class="coupon-type">
          <div class="coupon-price">
            <div class="price" v-if="cItem.couponType==1 || cItem.couponType==3">
              ￥
              <span class="big">{{cItem.reduceAmount}}</span>
            </div>
            <div class="price" v-if="cItem.couponType==2">
              <span class="big">{{cItem.couponDiscount}}{{$t('fold')}}</span>
            </div>
            <div class="limit" v-if="$t('language')!=='en'">满{{cItem.cashCondition}}元可用</div>
            <div class="limit" v-if="$t('language')!=='zh'">{{$t('available')}} {{$t('over')}} ￥ {{cItem.cashCondition}}</div>
          </div>
          <div class="coupon-time">{{$t('coupons.validUntil')}}：{{cItem.endTime}}</div>
        </div>
        <div class="coupon-info">
          <div class="range">
            <div class="range-item">
              <span class="label">{{$t('only')}}：</span>
              <span class="text">{{cItem.suitableProdType==0?$t('coupons.universal'):$t('coupons.specifiedProductsAvailable')}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="coupon-box" v-if="showCanUse && !coupons.canUseCoupons.length">
      <div class="coupon-empty">{{$t('coupons.thereAreNoCouponsSoGoGetThem')}}</div>
    </div>
    <div class="coupon-box" v-if="!showCanUse && !coupons.unCanUseCoupons.length">
      <div class="coupon-empty">{{$t('coupons.noRelatedCoupons')}}</div>
    </div>
  </div>

  <!-- /优惠信息 -->
</template>
<script>
export default {
  data () {
    return {
      showCanUse: true,
      currIndex: ''
    }

  },
  props: {
    coupons: {
      default: () => { },
      type: Object
    },
    isShowUncan: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.showCanUse = !this.isShowUncan
    if(!this.coupons.canUseCoupons.length) {
      this.showCanUse = false
    }
  },
  methods: {
    checkCoupon (couponUserId,index) {
      this.currIndex = index
      this.coupons.canUseCoupons.forEach(coupon => {
        console.log(coupon.couponUserId)
        if (coupon.couponUserId === couponUserId) {
          coupon.choose = !coupon.choose
        } else {
          coupon.choose = false
        }
      })
      console.log(this.coupons.canUseCoupons)
      this.$emit("checkCoupon")
    }
  }
}
</script>
<style scoped src='~/assets/css/coupon-select.css'>
</style>
