<template>
    <div class="timer">
        <p>remaining: {{mins}}:{{secs}}</p>
    </div>
</template>

<script>
import Timer from './Timer.js'

export default {
    data(){
        return {
            timer: null,
        }
    },
    methods: {
        restart(){
            console.log('restart timer')
            this.timer = new Timer(new Date(this.expires*1000));
        }
    },
    props: ['expires', 'expired'],
    computed: {
        secs: function() {
            if (this.timer){
                return this.timer.secs;
            }
        },
        mins: function(){
            if (this.timer){
                return this.timer.mins;
            }
        }
    },

    watch: {
        expires:{
            immediate: true,
            handler(val, oldVal){
                let self = this;
                this.timer = new Timer(new Date(val*1000));
            }
        }
    }

}

</script>

<style>
    p.expired {
        color: red;
    }
</style>
