<template>
  <div class="gift-container" :style="{ background: `url(${userGift} )` }">
    <div class="balance" @click="handleToGift">
      <span class="text title">礼品卡余额</span>
      <span class="text">
        {{ formatPrice(giftInfo.cardAmount)[0] }}.<i class="unit"
          >{{ formatPrice(giftInfo.cardAmount)[1] }}元</i
        >
      </span>
    </div>
    <i class="lin" />
    <div class="coupon" @click="handleToCoupon">
      <span class="text title">优惠券</span>
      <span class="text">{{ giftInfo.couponCount }}<i class="unit">张</i> </span>
    </div>
  </div>
</template>
<script>
import userGift from '@/assets/images/user/user-gift.png';
export default {
  components: {},
  props: {
    giftInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      userGift
    };
  },
  methods: {
    formatPrice(balance) {
      let price = !isNaN(balance) ? +balance : 0;
      return price.toFixed(2).split('.');
    },
    handleToPayBack() {
      this.$router.push({ name: 'bill' });
    },
    handleToCoupon() {
      this.$router.push({ name: 'coupon' });
    },
    handleToGift() {
      this.$router.push({ name: 'giftCardList' });
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped />
