<template>
  <div class="gift-container">
    <div class="gift-button">
      <div class="gift-button-left" @click="handleToPage('/pages/giftCardList/index')">
        <view class="gift-button-title">礼品卡余额</view>
        <view class="gift-button-price">
          <text class="price-lg">{{ formatPrice(giftInfo.cardAmount)[0] }}.</text>
          <text class="price-sm">{{ formatPrice(giftInfo.cardAmount)[1] }}元</text>
        </view>
      </div>
      <div class="gift-button-right" @click="handleToPage('/pages/coupon/index')">
        <view class="gift-button-title">优惠劵</view>
        <view class="gift-button-price">
          <text class="price-lg">{{ giftInfo.couponCount || 0 }} </text>
          <text class="price-sm">张</text>
        </view>
      </div>
    </div>
  </div>
</template>
<script>
const NAV_TO = "nav-to";
export default {
  props: {
    giftInfo: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleToPage(url) {
      this.$emit(NAV_TO, url);
    },
    formatPrice(balance) {
      let price = !isNaN(balance) ? +balance : 0;
      return price.toFixed(2).split(".");
    }
  }
};
</script>
<style lang="scss" scoped>
.gift-container {
  /* margin-top: 24rpx; */
  transform: translateY(24rpx);
}
.gift-button {
  position: relative;
  color: $white;
  height: 108rpx;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.26;
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      #ffffff 18%,
      #ffffff 46%,
      #ffffff 72%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  &-left {
    position: relative;
    &::after {
      content: "";
      width: 1px;
      height: 36rpx;
      position: absolute;
      top: 30%;
      right: 0;
      background-color: $white;
      opacity: 0.2;
    }
  }
  &-left,
  &-right {
    flex: 1;
    position: relative;
    z-index: 1;
  }
  &-price {
    font-weight: bold;
    .price-lg {
      font-size: $uni-font-size-lg;
    }
    .price-sm {
      font-size: $uni-font-size-sm;
    }
  }
}
</style>
