<script setup>
import AppLayout from "../../Layouts/AppLayout.vue"
import TableCards from './DataTable/Index.vue'
import { NInput, NFlex, NDivider, NDatePicker, NSpace, NRadioGroup, NRadioButton, NH1 } from 'naive-ui'
import {useMedicalHistory} from "../../Composables/useMedicalHistory.js";
import {useDebounceFn} from "@vueuse/core";
import {useMedicalHistoryFilter} from "../../Composables/useMedicalHistoryFilter.js";
import {computed, ref} from "vue";

const props = defineProps({
    cards: {
        type: Array,
        default: []
    },
    filters: {
        type: Array,
        default: []
    }
})

const {
    isLoading, applyFilters, filtersRef, handleSearch, dateRange,
    handleDateRangeChange, handleViewTypeChange
} = useMedicalHistoryFilter(props.filters)

const viewType = ref('archive')
</script>

<template>
    <AppLayout>
        <template #header>
            <NSpace vertical>
                <NH1 class="!my-0 mb-5">
                    Архив
                </NH1>
                <NRadioGroup v-model:value="viewType" @update:value="val => handleViewTypeChange(val)">
                    <NRadioButton value="archive">Архив</NRadioButton>
                    <NRadioButton value="mis">МИС</NRadioButton>
                    <NRadioButton value="softinfo">СофтИнфо</NRadioButton>
                </NRadioGroup>
                <NFlex class="pb-4" align="center" :wrap="false">
                    <NInput placeholder="Поиск по ФИО, № карты" @update:value="val => handleSearch(val)"/>
                    <NDivider vertical />
                    <NDatePicker v-model:value="dateRange" @update:value="handleDateRangeChange" type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" />
                </NFlex>
            </NSpace>
        </template>
        <TableCards :filters="filters" :data="cards.data" :meta="cards.meta" min-height="calc(100vh - 277px)" max-height="calc(100vh - 320px)" />
    </AppLayout>
</template>

<style scoped>

</style>
