<template>
    <div style="width: 100%;height: 100%;">
        <flip-countdown
            :key="countKey"
            :stop="isStop"
            :deadline="option.endTime"
            :show-days="option.showDays"
            :show-hours="option.showHours"
            :show-minutes="option.showMinutes"
            :show-seconds="option.showSeconds"
            :labels="option.labels"
            :label-size="option.labelSize+'rem'"
            :countdown-size="option.countdownSize+'rem'"
            :style="'transform: scale(' + element.style.height/100 + ');'"
        ></flip-countdown>
    </div>
</template>

<script>
import OnEvent from '../common/OnEvent'
import FlipCountdown from 'vue2-flip-countdown'

export default {
    components: { FlipCountdown },
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            option: this.propValue,
            isStop: false,
            timer: '',
            countKey: 0,
        }
    },
    watch: {
        propValue: {
            handler(newObject, oldObject) {
                if (this.option !== newObject) {
                    this.option = newObject
                    this.countKey += 1
                }
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        this.isShow += 1
        let that = this
        this.timer = setInterval(() => {
            if (that.option.startTime !== '') {
                if (Date.parse(new Date(that.option.startTime)) >= new Date()) {
                    if (!that.isStop) {
                        that.isStop = true
                        that.countKey += 1
                    }
                } else if (that.isStop) {
                    that.isStop = false
                    that.countKey += 1
                }
            }
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style lang="scss" scoped>
.v-countdown {
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}
::v-deep .el-carousel__container {
    height: 100%;
}
</style>
