<script setup>
import {ref} from "vue";
import dayjs from "dayjs";

const {time} = defineProps({
    time: {
        type: String,
        default: dayjs(new Date()).add(20, 'minutes'),
    }
});

const diff = ref(dayjs(time).diff(dayjs(new Date()), 'second'));
const hours = ref(null);
const minutes = ref(null);
const seconds = ref(null);

const timer = setInterval(() => {
    diff.value = dayjs(time).diff(dayjs(new Date()), 'second');
    hours.value = Math.floor(diff.value / 3600);
    minutes.value = Math.floor((diff.value % 3600) / 60);
    seconds.value = diff.value % 60;
}, 1000);
</script>

<template>
    <view class="!flex items-center gap-[20rpx]">
        <slot></slot>
        <view class="!flex gap-[16rpx] items-center">
            <view class="time-block" v-if="hours && hours>0">{{ hours < 10 ? `0${hours}` : hours }}</view>
            <view v-if="hours">:</view>
            <view class="time-block" v-if="minutes && minutes>0">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
            <view v-if="minutes">:</view>
            <view class="time-block" v-if="seconds && seconds>0">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.time-block {
    background-color: #E8F3FF;
    border-radius: 4rpx;
    padding: 4rpx;
    color: rgb(22, 93, 255);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
}
</style>
