<script setup>
import AppLayout from "../../Layouts/AppLayout.vue"
import TableCards from './DataTable/Index.vue'
import ArchiveHistoryCreateModal from './ArchiveHistoryCreateModal/Index.vue'
import { NInput, NFlex, NDivider, NDatePicker, NSpace, NFormItem, NRadioButton, NH1, NTabs, NButton, 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 ArchiveHistoryCreateModalShow = ref(false)
const {
    isLoading, applyFilters, filtersRef, handleSearch, dateRange, searchValue,
    statusValue, handleDateRangeChange, handleViewTypeChange, handleStatusChange
} = useMedicalHistoryFilter(props.filters)

const viewType = ref('archive')
const searchRef = ref()

const onHandleSearch = (search) => {
    handleSearch(search)
}

const handleBeforeLeave = (tabName) => {
    handleViewTypeChange(tabName)
    return true
}
</script>

<template>
    <AppLayout>
        <template #header>
            <NSpace vertical>
                <NFlex class="pb-4" align="center" :wrap="false">
                    <NFormItem class="w-[720px]" label="Поиск" :show-feedback="false">
                        <NInput placeholder="Поиск по ФИО, № карты"
                                autofocus
                                ref="searchRef"
                                clearable
                                v-model:value="searchValue"
                                @update:value="val => onHandleSearch(val)"
                                size="large"
                                :loading="isLoading"
                                :disabled="isLoading"
                        />
                    </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"
                                     :disabled="isLoading"
                        />
                    </NFormItem>
                    <NFormItem class="w-[340px]" label="Статус карты" :show-feedback="false">
                        <NSelect :options="statuses"
                                 :value="statusValue"
                                 @update:value="val => handleStatusChange(val)"
                                 clearable
                                 size="large"
                                 :loading="isLoading"
                                 :disabled="isLoading"
                        />
                    </NFormItem>
                    <div class="mt-6">
                        <NDivider vertical />
                    </div>
                    <NFormItem class="w-[340px]" :show-feedback="false">
                        <NButton type="primary"
                                 @click="ArchiveHistoryCreateModalShow = true"
                                 secondary
                                 size="large"
                                 :loading="isLoading"
                                 :disabled="isLoading"
                        >
                            Добавить карту в архив
                        </NButton>
                    </NFormItem>
                </NFlex>
            </NSpace>
        </template>
        <TableCards :filters="filters"
                    :data="cards.data"
                    :meta="cards.meta"
                    min-height="calc(100vh - 212px)"
                    max-height="calc(100vh - 320px)"
        />
        <ArchiveHistoryCreateModal v-model:open="ArchiveHistoryCreateModalShow" />
    </AppLayout>
</template>

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