<script setup>
import {reactive, watch} from "vue";
import {NButton, NDatePicker, NForm, NFormItem, NModal, NSelect} from "naive-ui";
import {useReportStore} from "../../../Stores/report.js";

const props = defineProps({
    patient: {
        type: Object,
        default: null,
    }
})

const show = defineModel('show', {type: Boolean, default: false})
const reportStore = useReportStore()

const form = reactive({
    outcome_type: 'discharged',
    outcome_at: null,
})

watch(() => props.patient, () => {
    form.outcome_type = 'discharged'
    form.outcome_at = null
})

const submit = async () => {
    if (!props.patient?.department_patient_id) {
        return
    }

    await reportStore.setManualPatientOutcome(props.patient.department_patient_id, {
        outcome_type: form.outcome_type,
        outcome_at: form.outcome_at ? new Date(form.outcome_at).toISOString() : null,
    })

    show.value = false
    window.$message.success('Исход сохранен')
}
</script>

<template>
    <NModal v-model:show="show" preset="card" title="Зафиксировать исход" class="max-w-md">
        <NForm label-placement="top">
            <NFormItem label="Тип исхода">
                <NSelect
                    v-model:value="form.outcome_type"
                    :options="[
                        { label: 'Выписан', value: 'discharged' },
                        { label: 'Переведен', value: 'transferred' },
                        { label: 'Умер', value: 'deceased' },
                    ]"
                />
            </NFormItem>
            <NFormItem label="Дата и время">
                <NDatePicker v-model:value="form.outcome_at" type="datetime" class="w-full" clearable />
            </NFormItem>
        </NForm>

        <template #footer>
            <div class="flex justify-end">
                <NButton type="primary" @click="submit">Сохранить</NButton>
            </div>
        </template>
    </NModal>
</template>
