<template>
  <div class="count-down-wrapper">
    <span></span>
  </div>
</template>

<script>
export default {
  props: {
    leftTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      remainTime: this.props.leftTime,
      countDown: "",
      timeoutId: null
    };
  },
  mounted() {
    this.countDown = this.formatTime();

    this.timeoutId = setInterval(() => {
      this.remainTime--;
      this.countDown = this.formatTime();
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timeoutId);
  },
  computed: {
    timeList: function() {}
  },
  methods: {
    formatTime() {
      if (this.remainTime < 0) {
        return ["00", "00", "00"];
      }
      let remainTime = this.remainTime;

      const hourInSecond = 60 * 60;
      const numberOfHours = Math.floor(this.remainTime / hourInSecond);

      remainTime = remainTime - numberOfHours * hourInSecond;

      const numberOfMinutes = Math.floor(remainTime / 60);

      const numberOfSeconds = remainTime - numberOfMinutes * 60;

      return [numberOfHour, numberOfMinute, numberOfSeconds].map(time => {
        return time < 10 ? `0${time}` : `${time}`;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.count-down-wrapper {
  display: flex;
}
</style>