<template>
    <span>
      <slot :days="days" :hours="hours" :minutes="minutes" :seconds="seconds">{{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds</slot>
    </span>
  </template>
  
  <script>
  export default {
    name: 'RunningFor',
    props: {
      date: {
        required: true
      }
    },
    data () {
      return {
        interval: null,
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        intervals: {
          second: 1000,
          minute: 1000 * 60,
          hour: 1000 * 60 * 60,
          day: 1000 * 60 * 60 * 24
        }
      }
    },
    mounted () {
      this.interval = setInterval(() => {
        this.updateDiffs()
      }, 1000)
  
      this.updateDiffs()
    },
    destroyed () {
      clearInterval(this.interval)
    },
    methods: {
      updateDiffs () {
        // lets figure out our diffs
        let diff = Math.abs(Date.now() - this.date.getTime())
        this.days = Math.floor(diff / this.intervals.day)
        diff -= this.days * this.intervals.day
        this.hours = Math.floor(diff / this.intervals.hour)
        diff -= this.hours * this.intervals.hour
        this.minutes = Math.floor(diff / this.intervals.minute)
        diff -= this.minutes * this.intervals.minute
        this.seconds = Math.floor(diff / this.intervals.second)
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>