<template>
  <view
    ><slot
      :time="time"
      :remain="timeData.remain"
      :day="timeData.day"
      :hour="timeData.hour"
      :minute="timeData.minute"
      :second="timeData.second"
  /></view>
</template>

<script>
export default {
  props: {
    // 倒计时时长（单位：毫秒）
    time: {
      type: Number,
      default: 0,
    },

    // 是否自动
    autoStart: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      timer: null,
      timeData: {
        remain: 0,
        day: 0,
        hour: 0,
        minute: 0,
        second: 0,
      },
    }
  },
  watch: {
    time() {
      this.reset()
    },
  },
  methods: {
    // 设置timeData
    updateTimeData() {
      let t = this.timeData.remain
      this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24)
      this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24)
      this.timeData.minute = Math.floor((t / 1000 / 60) % 60)
      this.timeData.second = Math.floor((t / 1000) % 60)
    },

    // 开启倒计时
    startTimer() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      if (this.timeData.remain < 1000) {
        return
      }
      this.timer = setInterval(() => {
        this.timeData.remain -= 1000
        this.updateTimeData()
        if (this.timeData.remain < 1000) {
          this.pause()
          this.$emit('finish')
        }
      }, 1000)
    },

    // 重置倒计时
    reset() {
      this.timeData.remain = this.time
      this.updateTimeData()
      if (this.autoStart) {
        this.start()
      }
    },

    // 暂停倒计时
    pause() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    // 开始倒计时
    start() {
      if (this.timer) {
        return
      }
      this.startTimer()
    },
  },
  mounted() {
    this.reset()
  },
  beforeUnmount() {
    this.pause()
  },
}
</script>
