<template>
  <div class="kole-countdown">
    <span v-if="d > 0" class="kole-countdown-seg"><span class="kole-countdown-num">{{ pad(d) }}</span><span class="kole-countdown-label">天</span></span>
    <span class="kole-countdown-seg"><span class="kole-countdown-num">{{ pad(h) }}</span><span class="kole-countdown-label">时</span></span>
    <span class="kole-countdown-sep">:</span>
    <span class="kole-countdown-seg"><span class="kole-countdown-num">{{ pad(m) }}</span><span class="kole-countdown-label">分</span></span>
    <span class="kole-countdown-sep">:</span>
    <span class="kole-countdown-seg"><span class="kole-countdown-num">{{ pad(s) }}</span><span class="kole-countdown-label">秒</span></span>
  </div>
</template>

<script>
export default {
  name: 'KoleCountdown',
  props: { target: { type: Number, default: () => Date.now() + 3600000 } },
  data() {
    return { now: Date.now(), timer: null };
  },
  computed: {
    diff() { return Math.max(0, this.target - this.now); },
    d() { return Math.floor(this.diff / 86400000); },
    h() { return Math.floor((this.diff % 86400000) / 3600000); },
    m() { return Math.floor((this.diff % 3600000) / 60000); },
    s() { return Math.floor((this.diff % 60000) / 1000); }
  },
  mounted() {
    this.timer = setInterval(() => { this.now = Date.now(); }, 1000);
  },
  beforeDestroy() { clearInterval(this.timer); },
  methods: { pad(n) { return String(n).padStart(2, '0'); } }
};
</script>

<style src="./Countdown.css"></style>
