<template>
  <div class="timer">
    <p><span class="timeleft">{{ countDown.toString() }}</span></p>
    <button v-on:click="restartTimer">Restart</button>
  </div>
</template>

<script>
export default {
  name: "Timer",
  props: {
    time: Number,
    countDown: {
      type: Number,
      default: -1
    }
  },
  mounted: function() {
    setInterval(() => {
      this.timeleft()
    }, 1000);
  },
  methods: {
    timeleft: function(){
      if(this.countDown == -1) this.countDown = this.time;
      this.countDown--;
    },
    restartTimer: function() {
      this.countDown = this.time;
    }
  },
}
</script>

<style scoped>
  .timer {
    font-size: 5rem;
  }
</style>