<template>
    <div class="retran-timer" v-show="isShowRetran">
        <p>{{ retranContent }}</p>
        <p>{{ description }}</p>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue'
    import { useVehicleStore } from '@/store/VehicleStore';
    import { storeToRefs } from 'pinia';
    const vehicleStore = useVehicleStore()
    const { retranTimer } = storeToRefs(vehicleStore)

    const isShowRetran = ref(false)
    const retranContent = ref('')
    const description = ref('')

    watch(retranTimer, (data) => {
        if (!data) return
        const { type, remainTime, remainCnt, description: des } = data
        if (type === 2) {
            isShowRetran.value = false
        } else {
            isShowRetran.value = remainTime >= 1
        }
        if (type === 1) {
            retranContent.value = `${remainTime}s 后再次申请任务，剩余次数：${remainCnt}`
            description.value = `—${des}`
        } else if (type === 3) {
            retranContent.value = `等待唤醒...`
            description.value = ``
        }
    }, {deep: true})
</script>

<style lang="less" scoped>
    .retran-timer {
        position: absolute;
        right: 60px;
        bottom: 10px;
        background: rgba(23, 35, 62, 0.82);
        color: #fff;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        z-index: 999;
    }
</style>