<template>
  <view class='coupon-content'>
    <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
    <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
    <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
      <text>{{ item.price }}</text>
      <text>满{{ item.threshold }}元可用</text>
    </view>

    <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
      <text>{{ item?.title }}</text>
      <text>有效期至{{ item.useTime }}</text>
      <image class='checkbox' :src='assetsUrl("ic_checkbox_active.png")' />
    </view>
  </view>

</template>

<script lang='ts' setup>

import { assetsUrl } from '@/utils/assets';

defineProps({
  item: Object
});
</script>

<style lang='scss' scoped>
.coupon-content {
  display: flex;
  flex-direction: row;
  height: 200rpx;
  position: relative;
  margin: 10rpx 0 10rpx 0;

  image {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .left-content {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    padding-left: 50rpx;

    text:nth-of-type(1) {
      font-size: 55rpx;
      font-weight: bold;
    }

    text:nth-of-type(1):after {
      content: '元';
      font-size: 24rpx;
    }

    text:nth-of-type(2) {
      font-size: 26rpx;
      font-weight: 400;
    }
  }

  .left-content-disabled {
    @extend .left-content;
    color: #C2C2C2;
  }

  .right-content {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    justify-content: center;
    margin-left: 100rpx;

    text:nth-of-type(1) {
      font-size: 30rpx;
    }

    text:nth-of-type(2) {
      font-size: 26rpx;
      margin-top: 20rpx;
      color: #333333;
    }

    .checkbox {
      display: flex;
      width: 42rpx;
      height: 42rpx;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      position: absolute;
      right: 36rpx;
    }
  }

  .right-content-disabled {
    @extend .right-content;
    color: #C2C2C2;

    text:nth-of-type(2) {
      color: #C2C2C2;
    }
  }
}

</style>
