<script setup>
import { NModal, NDataTable } from 'naive-ui'
import {ref, watch} from "vue";

const open = defineModel('open')
const props = defineProps({
    patientId: {
        type: Number,
    }
})

const loading = ref(true)
const patient = ref({})

const loadPatientData = async () => {
    if (!props.patientId) return

    loading.value = true
    try {
        axios.get(`/api/si/patients/${props.patientId}`).then(res => {
            patient.value = res.data
        })
    } catch (error) {
        // message.error('Ошибка при загрузке данных пациента')
        console.error(error)
    } finally {
        loading.value = false
    }
}

const columns = [
    {
        title: 'Выдача',
        key: 'issue_at'
    },
    {
        title: 'Возврат',
        key: 'return_at'
    },
    {
        title: 'Организация',
        key: 'org_id'
    },
    {
        title: 'ФИО',
        key: 'employee_name'
    },
    {
        title: 'Должность',
        key: 'employee_post'
    },
]

// Наблюдаем за изменением patientId
watch(() => props.patientId, (newId) => {
    if (newId) {
        loadPatientData()
    }
}, { immediate: true })
</script>

<template>
    <NModal v-model:show="open" preset="card" class="max-w-4xl" closable @close="open = false">
        <template #header>
            {{ patient.info?.medcardnum }} {{ patient.info?.family }} {{ patient.info?.name }} {{ patient.info?.ot }}
        </template>
        <NDataTable :columns="columns" :data="patient?.journal" />
    </NModal>
</template>

<style scoped>

</style>
