<script setup>
import { NModal, NSelect, NSpace, NFlex, NButton, NForm, NFormItem, NInput, NDatePicker, NDivider, NSpin, NTag } from 'naive-ui'
import ArchiveHistoryMoveModal from '../ArchiveHistoryMoveModal/Index.vue'
import {computed, ref, watch} from "vue";
import {useMedicalHistoryFilter} from "../../../Composables/useMedicalHistoryFilter.js";
import {useNotification} from "../../../Composables/useNotification.js";
import {useDebounceFn} from "@vueuse/core";

const open = defineModel('open')

const {errorApi} = useNotification()
const loading = ref(false)
const archiveInfo = ref({
    id: null,
    num: null,
    post_in: null,
})
const loadingFilterPatients = ref(false)

const emits = defineEmits(['historyUpdated', 'closeWithoutSave'])

const onResetData = () => {
    archiveInfo.value = {
        id: null,
        num: null,
        post_in: null,
    }
}

const onCloseWithoutSave = () => {
    emits('closeWithoutSave')
    open.value = false
}

const filteredPatients = ref([])

const debounceSearchCard = useDebounceFn(async (query) => {
    loadingFilterPatients.value = true
    await axios.post('/api/mis/patients/search', {
        query
    }).then(res => {
        filteredPatients.value = res.data
    }).finally(() => {
        loadingFilterPatients.value = false
    })
}, 1000)

const handleSearchCard = (query) => {
    debounceSearchCard(query)
}

const onSubmit = async () => {
    loading.value = true
    try {
        await axios.post(`/api/archive/create`, archiveInfo.value).then(res => {
            open.value = false
        })

    } catch (error) {
        errorApi(error)
        console.error(error)
    } finally {
        loading.value = false
    }
}
</script>

<template>
    <NModal v-model:show="open" preset="card" class="max-w-xl relative overflow-clip" closable @close="onCloseWithoutSave">
        <template #header>
            Добавить карту в архив
        </template>
        <NFlex class="w-full" :wrap="false">
            <NForm class="w-full">
                <NFormItem label="Пациент">
                    <NSelect placeholder="№ карты фамилия имя отчество или фамилия имя отчество" size="large" :remote filterable :loading="loadingFilterPatients" :options="filteredPatients" v-model:value="archiveInfo.id" @search="handleSearchCard" />
                </NFormItem>
                <NFormItem size="large" label="№ в архиве">
                    <NInput v-model:value="archiveInfo.num" />
                </NFormItem>
                <NFormItem size="large" label="Дата поступления карты в архив">
                    <NDatePicker class="w-full" v-model:value="archiveInfo.post_in" format="dd.MM.yyyy" />
                </NFormItem>
            </NForm>
        </NFlex>
        <template #action>
            <NFlex justify="end" align="center">
                <NSpace align="center" :size="0">
                    <NButton secondary type="primary" @click="onSubmit">
                        Добавить карту
                    </NButton>
                </NSpace>
            </NFlex>
        </template>

        <div v-show="loading" class="absolute inset-0 z-10 backdrop-blur flex items-center justify-center">
            <NSpin :show="true" />
        </div>
    </NModal>
</template>

<style scoped>

</style>
