<template>
  <view class='coupon-content' @click.stop='()=>{emits("confirm")}'>
    <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?.reduce }}</text>
      <text>满{{ item?.threshold }}元可用</text>
    </view>

    <view class='right-content accent-text-color' :class='{"right-content-disabled": item?.status==1}'>
      <text>{{ item?.name }}</text>
      <text>有效期至{{ dayjs(item?.startTime).format('YYYY-MM-DD') }}</text>
      <image v-if='item?.status==0' class='checkbox'
             :src='assetsUrl(item.checked?"ic_checkbox_active.png":"ic_checkbox_normal.png")'
      />
    </view>
  </view>

</template>

<script lang='ts' setup>
import { PropType } from 'vue';

import { assetsUrl } from '@/utils/assets';
import { CouponBean } from '@/api/user/types';
import dayjs from 'dayjs';

defineProps({
  item: Object as PropType<CouponBean>
});

const emits = defineEmits(['confirm']);
</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: 60rpx;

    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>
