<script setup>
import {computed, onMounted, ref} from "vue";
import {NSkeleton, NText} from 'naive-ui'

const props = defineProps({
    title: {
        type: String,
        default: null
    },
    status: {
        type: String,
        default: null
    }
})

const isLoading = ref(true)
const countPatient = ref(null)
const fetchPatientCount = async () => {
    if (props.status === 'plan' || props.status === 'emergency') {
        isLoading.value = true
        await axios.post('/api/mis/patients/count', {
            status: props.status
        }).then((res) => {
            countPatient.value = res.data
        }).finally(() => {
            isLoading.value = false
        })
    } else {
        isLoading.value = false
    }
}

const computedHeader = computed(() => {
    if (countPatient.value !== null) {
        return `${props.title} (${countPatient.value})`
    } else {
        return props.title
    }
})

onMounted(async () => {
    await fetchPatientCount()
})
</script>

<template>
    <NSkeleton text style="width: 128px; height: 22px" round v-if="isLoading" />
    <NText v-else>
        {{ computedHeader }}
    </NText>
</template>

<style scoped>

</style>
