<template>
    <div class="countdown-page">
        <div class="logo">
            <img src="http://www-beautybox.leavingstone.net/src/style/svgs/logo.svg">
        </div>
        <h1>გამოწერა დაიწყება:</h1>
        <div class="countdown">
            <countdown :time="time" tag="p" v-on:countdownprogress="onCountdownProgress" :leading-zero="true">
                <template slot-scope="props">{{ props.days * 24 + props.hours }}:{{ props.minutes }}:{{ props.seconds
                    }}
                </template>
            </countdown>
        </div>
    </div>

</template>

<script>
    import VueCountdown from '@xkeshi/vue-countdown'
    Vue.component('countdown', VueCountdown);
    export default {
        data() {
            return {
                deadline: new Date('2018-02-26T14:00:00'),
            };
        },
        computed: {
            time() {
                return this.deadline - new Date();
            }
        },
        mounted: {
            getDeadline() {
                // api get deadline
            }
        },
        methods: {
            onCountdownProgress(data) {
//                console.log(data.days);
//                console.log(data.hours);
//                console.log(data.minutes);
//                console.log(data.seconds);
            },
        },
    }
</script>

<style lang="scss" scoped>

    .countdown-page {
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        h1 {
            font-size: 24px;
            color: black;
        }

        .logo {
            margin: 0 auto;
            width: 30rem;
            height: 157px;
        }

        .countdown {
            margin: 0 auto;

            p {
                font-size: 6rem;
            }

        }
    }

</style>