<template>
  <section class="countdown-bar" v-if="'startTime' in lotteryInfo">
    <div class="countdown-bar__status">
      <template v-if="LOTTERY_STATE[parseInt(status, 10)].sign !== 'end'">
        <div class="countdown-bar__status__text">{{ LOTTERY_STATE_SIGN[LOTTERY_STATE[status].sign] }}倒计时：</div>
        <van-count-down millisecond :time="time">
          <template v-slot="timeData">
            <span class="time-item" v-if="timeData.days">
              {{ timeData.days | limitNum }}
              <span class="time-item__day">天</span>
            </span>
            <span class="time-item">
              {{ timeData.hours | formatNum }}
              <span>时</span>
            </span>
            <span class="time-item">
              {{ timeData.minutes | formatNum }}
              <span>分</span>
            </span>
            <span class="time-item">
              {{ timeData.seconds | formatNum }}
              <span>秒</span>
            </span>
          </template>
        </van-count-down>
      </template>
      <template v-if="LOTTERY_STATE[parseInt(status, 10)].sign === 'end'">抽奖已结束</template>
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { LOTTERY_STATE, LOTTERY_STATE_SIGN } from '@/utils/const'

export default {
  name: 'CountdownBar',
  data() {
    return {
      LOTTERY_STATE,
      LOTTERY_STATE_SIGN
    }
  },
  computed: {
    ...mapGetters(['lotteryInfo']),
    status() {
      return this.lotteryInfo.status
    },
    time() {
      const { lotteryInfo, status } = this
      const now = new Date().getTime()
      let timeDiff
      if (status === 0) {
        timeDiff = lotteryInfo.startTime * 1000 - now
      } else if (status === 1) {
        timeDiff = lotteryInfo.endTime * 1000 - now
      }
      return timeDiff
    }
  },
  filters: {
    formatNum(val) {
      let value = val
      if (val < 10) {
        value = `0${val}`
      }
      return value
    },
    limitNum(val) {
      let value = val
      if (val > 99) {
        value = `99+`
      }
      return value
    }
  }
}
</script>

<style lang="less" scoped>
.countdown-bar {
  width: 100%;
  background: url('~@/assets/images/lottery/lottery_instant_contdown_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  &__status {
    transform: translateY(-4px);
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff2b00;
    font-weight: 600;
    /deep/ .van-count-down {
      color: #ff2b00;
      .time-item {
        font-weight: 600;
      }
    }
    &__text {
      font-weight: 600;
    }
  }
}
</style>
