<template>
  <cr-count-down :time="time" :auto-start="true" @finish="finishEndChange">
    <template #default="timeData">
      <template v-if="timeData.d != 0">
        <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.d) }}</span>
        <span class="colon">:</span>
      </template>
      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.h) }}</span>
      <span class="colon">:</span>
      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.m) }}</span>
      <span class="colon">:</span>
      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.s) }}</span>
    </template>
  </cr-count-down>
</template>
<script>
export default {
  props: {
    endTime: {
      type: Number,
      default: 0
    },
    blockNoBg: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    time() {
      return this.endTime - new Date().getTime();
    },
    noBg() {
      return this.blockNoBg ? { background: 'transparent' } : '';
    }
  },
  methods: {
    finishEndChange() {
      this.$emit('finish-time');
    },
    fillZero(t) {
      t = t.toString();
      if (t.length == 1) {
        return `0${t}`;
      }
      return t;
    }
  }
};
</script>
<style lang="less" scoped>
.cr-count-down {
  display: flex;
  align-items: center;
  justify-content: center;
}
.colon {
  display: inline-block;
  line-height: 18px;
  margin: 0 @padding-unit;
  color: @red-dark;
}
.block {
  display: inline-block;
  width: 18px;
  // height: 22px;
  color: @white;
  .text-11();
  text-align: center;
  background-color: @red-dark;
  border-radius: @padding-unit;
  line-height: 18px;
}
.block-no-bg {
  display: inline-block;
  .text-16();
  color: @red-dark;
  text-align: center;
}
</style>
