<template>
    <div class="countdown">
        <div id='tiles'>
            <!--<span>{{days}}</span>-->
            <span>{{hours}}</span>
            <span>{{minutes}}</span>
            <span>{{seconds}}</span>
        </div>
        <div class="labels">
            <!--<li>Days</li>-->
            <li>Hours</li>
            <li>Mins</li>
            <li>Secs</li>
        </div>
    </div>
</template>

<script>
    export default {
        name:     'stClock',
        props:    {
            endSecond: {
                type:    Number,
                require: true,
                default: '0',
            },
        },
        data() {
            return {
                days:    '',
                hours:   '',
                minutes: '',
                seconds: '',
                timer:   null,
                endSecondC: null,
            };
        },
        computed: {
        },
        watch:    {
            endSecond: function () {
                this.endSecondC = this.endSecond;
                let _this = this;
                this.timer = setInterval(function () {
                    if(!_this.getCountdown(_this.endSecondC)) {
                        clearInterval(_this.timer);
                        _this.$emit('clockTimeOut');
                    }
                    _this.endSecondC = _this.endSecondC - 1;
                }, 1000);
            }

        },
        methods:  {
            pad(n) {
                return (n < 10 ? '0' : '') + n;
            },
            getCountdown(endSecond) {

                // find the amount of "seconds" between now and target
                if (endSecond <= 0) {
                    return false;
                }
                let seconds_left = endSecond;

                this.days = this.pad(parseInt(seconds_left / 86400));
                seconds_left = seconds_left % 86400;

                this.hours = this.pad(parseInt(seconds_left / 3600));
                seconds_left = seconds_left % 3600;

                this.minutes = this.pad(parseInt(seconds_left / 60));
                this.seconds = this.pad(parseInt(seconds_left % 60));
                return true;
            },
        },
        created() {
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },

    };
</script>
