<template>
  <div>
    <div>{{ time }}</div>
    <el-button @click="startCalc">{{timer ? "Pause" : 'start'}}</el-button>
    <el-checkbox v-model="afterStart" @change="handleChange"></el-checkbox>{{afterStartTime}}秒后继续
  </div>
</template>

<script>
function getCurrTime(time) {
  let min=0,sec=0
  if (time >= 3600) {
    return '59:59'
  } else {
    min = Math.floor(time%3600/60)
    sec = Math.floor(time%3600%60)
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
  }
}
export default {
  data() {
    return {
      timer: null,
      time: "00:00",
      afterStart: false,
      afterStartTime: 5,
      afterStartTimer: null
    }
  },
  methods: {
    startCalc() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
        if (this.afterStart) {
          this.afterStartTimer = setInterval(() => {
            if (this.afterStartTime > 0) {
              this.afterStartTime--
            } else {
              this.clearAfterStartTimer()
              this.startCalc()
            }
          }, 1000)
        }
      } else {
        if(this.afterStartTimer) {
          this.afterStart = false
          this.clearAfterStartTimer()
        }
        const currTime = new Date()
        this.time = "00:00"
        this.timer = setInterval(() => {
          const newTime = new Date()
          this.time = getCurrTime(Math.floor((newTime - currTime) / 1000))
        }, 1000)
      }
    },
    handleChange() { this.afterStartTimer && this.clearAfterStartTimer() },
    clearAfterStartTimer() {
      clearInterval(this.afterStartTimer)
      this.afterStartTimer = null
      this.afterStartTime = 5
    }
  }
}
</script>

<style></style>