<template>
  <div class="time-box flex justify-center items-center">
    <div class="time-items font-semibold" :style="fontStyle">{{ day }}</div>
    <p class="text text-xs">天</p>
    <div class="time-items font-semibold" :style="fontStyle">{{ hour }}</div>
    <p class="text text-xs">时</p>
    <div class="time-items font-semibold" :style="fontStyle">{{ min }}</div>
    <p class="text text-xs">分</p>
    <div class="time-items font-semibold" :style="fontStyle">{{ sec }}</div>
    <p class="text text-xs">秒</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      day: '00',
      hour: '00',
      min: '00',
      sec: '00',
      time: 0,
      timer: 0
    }
  },
  props: {
    times: {
      type: [String, Date, Number]
    },
    fontStyle: {
      type: Object
    }
  },
  methods: {
    getTimes() {
      const r = +this.time - Date.now()
      const day = +parseInt(r / (1000 * 60 * 60 * 24) + '')
      this.day = day >= 10 ? day + '' : '0' + day
      const hour = +parseInt(r / (1000 * 60 * 60) % 24 + '')
      this.hour = hour >= 10 ? hour + '' : '0' + hour
      const min = +parseInt(r / (1000 * 60) % 60 + '')
      this.min = min >= 10 ? min + '' : '0' + min
      const sec = +parseInt((r - (day * 24 * 60 * 60 * 1000) - hour * (1000 * 60 * 60) - min * (1000 * 60)) / 1000 + '')
      this.sec = sec >= 10 ? sec + '' : '0' + sec
    }
  },
  mounted() {
    this.time = +this.times
    if (this.timer) clearInterval(this.timer)
    this.timer = window.setInterval(() => {
      this.time--
      this.getTimes()
    }, 1000)
  }
})
</script>

<style scoped>
  .time-items {
    padding: 4px;
    background: #191C73;
  }
  .time-box {
    
  }
</style>