<script setup>
import {NCard, NSkeleton, NSpace, NFlex, NFormItem, NForm, NInputNumber, NStatistic} from "naive-ui";
import {useReportStore} from "../../../Stores/report.js";
import {useAuthStore} from "../../../Stores/auth.js";

const reportStore = useReportStore()
const authStore = useAuthStore()
</script>

<template>
    <div class="grid grid-cols-[1fr_auto] gap-x-3">
        <NCard v-if="reportStore.reportInfo?.report?.isActiveSendButton">
            <NForm>
                <template v-if="reportStore.isLoadReportInfo">
                    <NFlex>
                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
                    </NFlex>
                </template>
                <NFlex v-else justify="space-between" align="center">
                    <NSpace>
                        <template v-for="metrikaItem in reportStore.reportInfo?.metrikaItems">
                            <NFormItem :label="metrikaItem.name" :show-feedback="false">
                                <NInputNumber v-model:value="reportStore.reportForm[`metrika_item_${metrikaItem.metrika_item_id}`]"
                                              :default-value="metrikaItem.default_value" />
                            </NFormItem>
                        </template>
                    </NSpace>
                </NFlex>
            </NForm>
        </NCard>
        <NSpace :wrap="false">
            <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
                   style="--n-padding-top: 0; --n-padding-left: 0; --n-padding-bottom: 0; --n-padding-right: 0;"
            >
                <div class="w-full h-full flex flex items-center justify-center">
                    <NStatistic label="Умерло" :value="reportStore.reportInfo?.department?.deadCount" />
                </div>
            </NCard>
            <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
                   style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
                <div class="w-full h-full flex flex items-center justify-center">
                    <NStatistic :value="reportStore.reportInfo?.department?.surgicalCount[1]">
                        <template #label>
                            <div class="flex flex-col">
                                <span>Операций</span>
                                <span>Э / П</span>
                            </div>
                        </template>
                        <template #suffix>
                            / {{ reportStore.reportInfo?.department?.surgicalCount[0] }}
                        </template>
                    </NStatistic>
                </div>
            </NCard>
        </NSpace>
    </div>
</template>

<style scoped>
:deep(.n-statistic__label),
:deep(.n-statistic-value__content) {
    @apply text-center;
}
:deep(.n-statistic-value) {
    @apply flex justify-center items-center;
}
</style>
