<template>
    <div class="countDown">
        <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{ day }}</span>
        <span :style="{ color: textColor }">天</span>
        <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{ hour }}</span>
        <span :style="{ color: textColor }">时</span>
        <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{ minute }}</span>
        <span :style="{ color: textColor }">分</span>
        <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{ second }}</span>
        <span :style="{ color: textColor }">秒</span>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, reactive, toRaw, watch, watchEffect} from 'vue';

     export default defineComponent({
        props: {
            countTime: {
                default: 10000000,
            },
            bgColor: {
                default: '#000000',
            },
            color: {
                default: '#FFFFFF',
            },
            textColor: {
                default: '#7a8a94',
            },
        },
        setup(props, context) {
            const day = ref<string>('00');
            const hour = ref<string>('00');
            const minute = ref<string>('00');
            const second = ref<string>('00');
            const count = ref<number>(0)
            const interval = ref<any>(null)
            function start() {
                 interval.value = setInterval(() => {
                    count.value =count.value  - 1000;
                    if (count.value  <= 0) {
                        second.value = '00';
                        clearInterval(interval);
                        timeDown();
                        return;
                    }
                    //天数
                    day.value = parseInt(count.value / (24 * 60 * 60 * 1000))
                        .toString()
                        .padStart(2, 0);
                    //小时数
                    hour.value = parseInt((count.value - day.value  * 24 * 60 * 60 * 1000) / (60 * 60 * 1000))
                        .toString()
                        .padStart(2, 0);
                    //分钟数
                    const n = count.value  % (60 * 60 * 1000);
                    minute.value = parseInt(n / (60 * 1000))
                        .toString()
                        .padStart(2, 0);
                    //秒数
                    const n2 = n % (60 * 1000);
                    second.value = parseInt(n2 / 1000)
                        .toString()
                        .padStart(2, 0);
                }, 1000);
            }
            function timeDown() {
                context.emit('timeDown')
            }
            watchEffect(() => {

                props.countTime
            })
            watch(props.countTime, (props.countTime, prevCount) => {

            })
        }
     })
</script>

<style lang="scss">
    .countDown {
        display: inline-block;
    }
    .text {
        display: inline-block;
        width: 28px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        border-radius: 3px;
    }
</style>
