<script setup>
import HeaderWidget from "../HeaderWidget.vue"
import {computed} from "vue";
const props = defineProps({
    dutyCurrent: Number,
    nurseCurrent: Number,
    beds: Number,
})

const getColorClassByAbsolute = (current) => {
    const freeBeds = props.beds - current

    if (freeBeds >= 5) return 'counter-success'      // Свободно 5+ коек
    if (freeBeds >= 2) return 'counter-warning'      // Свободно 2-4 койки
    // if (freeBeds >= 0) return 'counter-warning-high' // Свободно 0-1 койка
    return 'counter-danger'                          // Переполнение
}

const dutyClass = computed(() => {
    const dutyValue = typeof props.dutyCurrent === 'number' ? props.dutyCurrent : 0
    return getColorClassByAbsolute(dutyValue)
})

const nurseClass = computed(() => {
    const nurseValue = typeof props.nurseCurrent === 'number' ? props.nurseCurrent : 0
    return getColorClassByAbsolute(nurseValue)
})
</script>

<template>
    <HeaderWidget label="Состоит"
                  is-double-counter
                  :counter="dutyCurrent"
                  :counter-suffix="nurseCurrent"
                  :counter-class="dutyClass"
                  :counter-suffix-class="nurseClass"
    />
</template>

<style scoped>
:deep(.counter-success) {
    color: var(--n-color-target) !important;
}

:deep(.counter-warning) {
    color: var(--n-feedback-text-color-warning) !important;
}

:deep(.counter-danger) {
    color: var(--n-asterisk-color) !important;
}
</style>
