<script setup>
import AppLayout from "../../Layouts/AppLayout.vue"
import TableCards from './DataTable/Index.vue'
import { NInput, NFlex, NDivider, NDatePicker, NSpace, NFormItem, NRadioButton, NH1, NTabs, NTabPane, NSelect } from 'naive-ui'
import {useMedicalHistoryFilter} from "../../Composables/useMedicalHistoryFilter.js";
import {ref} from "vue";

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

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

const viewType = ref('archive')

const handleBeforeLeave = (tabName) => {
    handleViewTypeChange(tabName)
    return true
}
</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">
                    <NFormItem class="w-[720px]" label="Поиск" :show-feedback="false">
                        <NInput placeholder="Поиск по ФИО, № карты" v-model:value="searchValue" @update:value="val => handleSearch(val)" size="large" />
                    </NFormItem>
                    <div class="mt-6">
                        <NDivider vertical />
                    </div>
                    <NFormItem class="w-[340px]" label="Дата выписки" :show-feedback="false">
                        <NDatePicker v-model:value="dateRange" @update:value="handleDateRangeChange" type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" size="large" />
                    </NFormItem>
                    <NFormItem class="w-[340px]" label="Статус карты" :show-feedback="false">
                        <NSelect :options="statuses" @update:value="val => handleStatusChange(val)" clearable size="large" />
                    </NFormItem>
                </NFlex>
            </NSpace>
        </template>
        <TableCards :filters="filters" :data="cards.data" :meta="cards.meta" min-height="calc(100vh - 212px)" max-height="calc(100vh - 320px)" />
    </AppLayout>
</template>

<style scoped>
:deep(.n-tabs .n-tabs-nav) {
    max-width: 420px;
}
</style>
