<template>
  <section v-if="'startTime' in lotteryInfo" class="countdown-bar">
    <div class="countdown-bar__status">
      <template v-if="parseInt(status, 10) !== LOTTERY_STATUS.end">
        <div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[parseInt(status, 10)].actionLabel }}倒计时：</div>
        <van-count-down millisecond :time="time">
          <template #default="timeData">
            <span v-if="timeData.days" class="time-item">
              {{ 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="parseInt(status, 10) === LOTTERY_STATUS.end">抽奖已结束</template>
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS, LOTTERY_STATUS_TXT } from '@/utils/constant'

export default {
  name: 'CountdownBar',
  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
    }
  },
  data() {
    return {
      LOTTERY_STATUS,
      LOTTERY_STATUS_TXT
    }
  },
  computed: {
    ...mapGetters({ lotteryInfo: 'lottery/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
    }
  }
}
</script>

<style lang="less" scoped>
.countdown-bar {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  &__status {
    padding: 0 24px;
    height: 29px;
    line-height: 29px;
    border-radius: 50px;
    background-color: rgba(3, 2, 2, 0.4);
    border: 2px solid rgba(255, 144, 110, 0.4);
    font-size: 13px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 400;
    /deep/ .van-count-down {
      color: #fff;
      height: 28px;
      line-height: 28px;
      .time-item {
        font-size: 13px;
        font-weight: 400;
      }
    }
  }
  &__text {
    font-size: 13px;
    font-weight: 400;
  }
}
</style>
