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

const reportStore = useReportStore()
</script>

<template>
    <NCard>
        <NForm>
            <NFlex>
                <template v-if="reportStore.isLoadReportInfo">
                    <NSkeleton class="w-[246px]! h-[60px]!" />
                    <NSkeleton class="w-[246px]! h-[60px]!" />
                    <NSkeleton class="w-[246px]! h-[60px]!" />
                </template>
                <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>
            </NFlex>
        </NForm>
    </NCard>
</template>

<style scoped>

</style>
