<template>
  <div class="gfcard" :class="{ 'gfcard-disabled': isDisabled }" @click="bindGiftClick">
    <div class="gfcard-header">
      <div class="gfcard-header-top gfcard-flex">
        <text class="gfcard-header-title">{{
          cardItem.createModeDesc || cardItem.cardName || ""
        }}</text>
        <template v-if="showRecord">
          <text
            v-if="cardItem.giftStatus != 0"
            class="gfcard-header-record"
            @click.stop="bindRecordClick"
            >消费记录</text
          >
          <text v-else>确认收货后即可激活</text>
        </template>
      </div>
      <div class="gfcard-header-bottom gfcard-flex">
        <text class="gfcard-header-amount">
          面值：{{ (+cardItem.denomination || 0).toFixed(2) }}元
        </text>
        <text class="gfcard-header-time">
          <template v-if="$config('qinghai') && cardItem.validTimeStart && cardItem.validTimeEnd">
            {{ cardItem.validTimeStart | format }} - {{ cardItem.validTimeEnd | format }}
          </template>
          <template v-if="$config('yxm') && cardItem.validDateStart && cardItem.validDateEnd">
            {{ cardItem.validDateStart }} - {{ cardItem.validDateEnd }}
          </template>
        </text>
      </div>
    </div>
    <div class="gfcard-bottom">
      <div class="gfcard-bottom-money">
        <text class="gfcard-bottom-balance">余额</text>
        <text class="gfcard-bottom-num">
          ¥<text class="gfcard-bottom-bold">{{ formatPrice[0] }}</text>
          <text class="gfcard-bottom-zero">.{{ formatPrice[1] }}</text>
        </text>
      </div>
      <p class="gfcard-bottom-describe">{{ cardItem.cardDesc || "" }}</p>
      <!-- 1-未到期2-使用中3-已失效4-已使用 -->
      <div v-if="cardItem.status !== 2" :class="['gfcard-bg', `bg-${cardItem.status}`]" />
      <radio
        v-if="showCheckbox"
        class="gfcard-checkbox"
        color="#EC1500"
        style="transform: scale(0.7)"
        :checked="selectChecked"
      />
    </div>
  </div>
</template>

<script>
const BINDRECORD_CLICK = "bind-record-click";
const BINDGIFT_CLICK = "bind-gift-click";
import { parseTime } from "@/utils";
export default {
  filters: {
    format(time) {
      return parseTime(time, "{y}.{m}.{d}");
    }
  },
  props: {
    cardItem: {
      type: Object,
      default: () => {}
    },
    checked: undefined,
    // 是否显示禁止使用
    beOverdue: {
      type: Boolean,
      default: false
    },
    // 是否显示消费记录文案
    showRecord: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectChecked: false
    };
  },
  computed: {
    isDisabled() {
      return this.beOverdue && this.cardItem.status !== 1;
    },
    formatPrice() {
      const balance = this.cardItem.balance;
      let price = !isNaN(balance) ? +balance : 0;
      return price.toFixed(2).split(".");
    },
    showCheckbox() {
      return typeof this.checked === "boolean";
    }
  },
  watch: {
    checked: {
      handler(val) {
        this.selectChecked = val;
      },
      immediate: true
    }
  },
  methods: {
    bindGiftClick() {
      this.$emit(BINDGIFT_CLICK, this.cardItem);
    },
    bindRecordClick() {
      this.$emit(BINDRECORD_CLICK, this.cardItem);
    }
  }
};
</script>
<style lang="scss">
.gfcard {
  font-size: $uni-font-size-sm;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  position: relative;
  margin-bottom: 16rpx;
  &-checkbox {
    position: absolute;
    right: 20rpx;
  }
  &-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-header {
    color: $white;
    height: 112rpx;
    padding: 16rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url(https://img.lkbang.net/xcx/gift-header.png) no-repeat;
    background-size: 101%;
    border-radius: 16rpx 16rpx 0 0;
    box-sizing: border-box;
    &-title {
      font-size: $uni-font-size-base;
    }
    &-record {
      padding-left: 32rpx;
      background: url(https://img.lkbang.net/xcx/gift-header-record.png) no-repeat left center;
      background-size: 24rpx 28rpx;
    }
    &-time {
      opacity: 0.7;
    }
  }
  &-bottom {
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url(https://img.lkbang.net/xcx/gift-bottom.png) no-repeat;
    background-size: 102%;
    border: 1px solid #ebebeb;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 0 0 16rpx 16rpx;
    position: relative;
    overflow: hidden;
    &-money {
      font-size: $uni-font-size-base;
      color: $font-color-red;
    }
    &-num {
      font-weight: bold;
      font-size: $font-lg;
      margin-left: 10rpx;
    }
    &-bold {
      font-size: 60rpx;
    }
    &-zero {
      font-size: 40rpx;
    }
    &-describe {
      font-size: $font-sm;
      color: $uni-text-color-grey;
      margin-top: 10rpx;
    }
  }
}
.gfcard-bg {
  position: absolute;
  width: 67px;
  height: 77px;
  right: 0;
  top: -20px;
  background-repeat: no-repeat;
  background-size: 100%;
  &.bg-1 {
    background-image: url(https://img.lkbang.net/xcx/gift-use-v2.png);
  }
  &.bg-3 {
    background-image: url(https://img.lkbang.net/xcx/gift-overdue-v2.png);
  }
  &.bg-4 {
    background-image: url(https://img.lkbang.net/xcx/gift-used-v2.png);
  }
}
.gfcard-disabled {
  .gfcard-header {
    background-image: url(https://img.lkbang.net/xcx/gift-header-dis.png);
  }
  .gfcard-bottom {
    background-image: url(https://img.lkbang.net/xcx/gift-bottom-dis.png);
    position: relative;
    overflow: hidden;
    &-money {
      color: $text-color-n3;
    }
  }
}
</style>
