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

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

const { navigate } = useMedicalHistory('/')

const search = (value) => {
    navigate(value)
}

const debounceSearch = useDebounceFn((searchValue) => {
    search(searchValue)
}, 500)
</script>

<template>
    <AppLayout>
        <template #header>
            <NFlex class="py-4" align="center" :wrap="false">
                <NInput placeholder="Поиск по ФИО, № карты" @update:value="val => debounceSearch(val)"/>
                <NDivider vertical />
                <NDatePicker type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" />
            </NFlex>
        </template>
        <TableCards :data="cards.data" :meta="cards.meta" min-height="calc(100vh - 179px)" max-height="calc(100vh - 196px)" />
    </AppLayout>
</template>

<style scoped>

</style>
