<template>
    <div>
        <slot :seconds="seconds" :minutes="minutes" :hours="hours" :days="days" :current_time="current_time+1" />
    </div>
</template>
<script>
export default {
    props : {
        time :  Number    
    },
    data() {
        return {
            seconds : 0,
            minutes : 0,
            hours : 0,
            days : 0,
            current_time : this.time,
            interval : null
        }
    },
    created() {
       this.processTime();
       this.initTimer();
    },
    methods : {
        processTime() {
            this.seconds = this.current_time % 60;
            this.minutes = Math.floor(this.current_time / 60) % 60;
            this.hours = Math.floor(this.current_time / 3600) % 24;
            this.days = Math.floor(this.current_time / 86400);
            this.current_time--;
        },
        initTimer() {
            this.interval = setInterval(() => {                
                this.processTime();
                if(this.current_time < 0) {
                    this.$emit("on-finish");
                    return clearInterval(this.interval);
                }
            }, 1000)
        }
    }
}
</script>