<template>
  <div class="item-container">
    <div :class="['coupon-item', !isCannot && 'cannot-coupon']">
      <div class="coupon-name"><img class="coupon-icon" :src="couponItem.iconUrl" alt="" /></div>
      <div class="coupon-content">
        <div class="price-info">
          <p class="price"><span class="symbol">¥</span>{{ couponItem.faceValue }}</p>
          <span class="tip">{{ couponItem.limitDesc }}</span>
        </div>
        <div class="text">
          <p class="title">{{ couponItem.name }}</p>
          <p class="time">
            {{ couponItem.couponValidTime || '-' }}
          </p>
          <p class="details-info-btn" @click="handleDetailsInfo">
            详细信息 <img class="change-info" :src="detailsInfoImg" alt="info" />
          </p>
        </div>
      </div>
      <div class="coupon-right" :style="{ top: couponItem.notEffective === 2 ? '22px' : '33px' }">
        <div class="btn-container">
          <cr-button class="coupon-btn" type="primary" @click="handleToUse(couponItem)">{{
            couponItem.notEffective === 1 ? '先逛逛' : '立即使用'
          }}</cr-button>
        </div>
        <div v-if="couponItem.notEffective === 2" class="overdueText">即将过期</div>
      </div>
      <div class="coupon-type">
        <img v-if="couponItem.notEffective === 1" class="img" :src="getCouponTypeImg" alt="info" />
      </div>
    </div>
    <template v-if="showDetailsInfo">
      <div class="bg" />
      <div class="details-info">
        {{ couponItem.description }}
      </div>
    </template>
  </div>
</template>
<script>
import overdue from '@/assets/images/coupon/overdue.png';
import up from '@/assets/images/coupon/up.png';
import down from '@/assets/images/coupon/down.png';
import use from '@/assets/images/coupon/use.png';
import notEffective from '@/assets/images/coupon/notEffective.png';
import { parseTime } from '@/service/utils.service';

export default {
  components: {},
  filters: {
    dateFormat(val) {
      return parseTime(val.split(' ')[0], '{y}.{m}.{d}');
    }
  },
  props: {
    couponItem: {
      type: Object,
      default: () => {
        return {
          id: null,
          pickupId: null,
          name: '',
          startDate: '',
          endDate: '',
          faceValue: null,
          limitAmount: null,
          limitDesc: '',
          couponCategory: null,
          status: null,
          notEffective: null
        };
      }
    },
    isCannot: {
      type: Boolean,
      default: true
    },
    isUse: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      overdue,
      up,
      down,
      use,
      notEffective,
      showDetailsInfo: false
    };
  },
  computed: {
    detailsInfoImg() {
      return this.showDetailsInfo ? this.up : down;
    },
    getCouponTypeImg() {
      // return this.isUse ? this.use : this.overdue;
      return this.notEffective;
    }
  },
  mounted() {},
  methods: {
    handleToUse(couponItem) {
      if (couponItem) {
        const { notEffective, navUrl } = couponItem;
        if (notEffective === 1) {
          this.$router.push({ name: 'Home' });
          return;
        }
        if (navUrl) {
          window.location.href = navUrl;
          return;
        }
        return;
      }
      this.$router.push({ name: 'Home' });
    },
    handleDetailsInfo() {
      this.showDetailsInfo = !this.showDetailsInfo;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
