<template>
  <div class="time-box flex items-center">
    <div v-if="showNum >= 1" class="flex items-center">
      <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ day }}</div>
      <p class="text text-xs mx-1 mb-0">天</p>
    </div>
    <div v-if="showNum >= 2" class="flex items-center">
      <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ hour }}</div>
      <p class="text text-xs mx-1 mb-0">时</p>
    </div>
    <div v-if="showNum >= 3" class="flex items-center">
      <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ min }}</div>
      <p class="text text-xs mx-1 mb-0">分</p>
    </div>
    <div v-if="showNum >= 4" class="flex items-center">
      <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ sec }}</div>
      <p class="text text-xs mx-1 mb-0">秒</p>
    </div>
    
  </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
    },
    bgColor:{
      type: String,
      default:'bg-app-blue-3'
    },
    showNum: {
      type: Number,
      default: 4
    }
  },
  methods: {
    getTimes() {
      const r = +this.time - Date.now()
      if (r < 0) {
        if (this.timer) clearInterval(this.timer)
        return
        // throw Error('已超出截至时间')
      }
      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
    }
  },
  watch: {
    times() {
      this.time = +this.times
      this.getTimes()
      if (this.timer) clearInterval(this.timer)
      this.timer = window.setInterval(() => {
        this.time--
        this.getTimes()
      }, 1000)
    }
  },
  mounted() {
    this.time = +this.times
    this.getTimes()
    if (this.timer) clearInterval(this.timer)
    this.timer = window.setInterval(() => {
      this.time--
      this.getTimes()
    }, 1000)
  }
})
</script>

