<template>
  <view class="px-20rpx  coupon" :class="{disable:disable}">
    <view class="mt-20rpx" v-for="item in list" :key="item.id" @tap.stop="onClick(item)">
      <view class="coupon-item flex items-center text-hex-BA4607">
        <view class="w-200rpx text-white text-center flex-none">
          <block v-if="item.type==1">
            <price-format :color="!disable?'':'#A6A6A6'" :first-size="60" :second-size="50" :subscript-size="34"
              :price="item.amount" :weight="500" />
          </block>
          <block v-else>
            <view class="text-60rpx after">{{item.amount}}</view>
          </block>
        </view>
        <view class="ml-20rpx flex-1 w-0">
          <view class="text-36rpx">{{item.name}}</view>
          <view class=" line-1 font-medium text-28rpx mt-20rpx">{{item.threshold>0?`满${item.threshold}可用`:'无门槛'}}</view>
          <view class="text-24rpx text-h666 mt-20rpx">有效期至:{{item.use_end_at}}</view>
        </view>
        <view v-if="checkout" class="flex-none">
          <view class="px-20rpx" @tap.prevent.stop="onClick(item)">
            <image v-if="item.id == val" src="/static/images/coupon/select-red.png" class="w-40rpx h-40rpx"></image>
            <image v-else src="/static/images/coupon/unselect.png" class="w-40rpx h-40rpx"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      },
      value: {
        type: [Number, String]
      },
      checkout: {
        type: Boolean,
        default: true
      },
      disable: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      val: {
        get() {
          return this.value
        },
        set(e) {
          return this.$emit('input', e)
        }
      }
    },
    methods: {
      onClick(e) {
        if (e.id == this.val) this.val = ''
        else this.val = e.id
        return this.$emit('change', this.val)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .coupon-item {
    position: relative;
    height: 200rpx;
    background-image: url('/static/images/coupon/coupon.png');
    background-size: 100% 100%;
  }

  .disable {
    .coupon-item {
      background-image: url('/static/images/coupon/coupon_no.png');
      @apply text-hex-A6A6A6
    }
  }

  .after {
    &::after {
      content: '折';
      font-size: 60%;
    }
  }
</style>
