<script setup>
import {NModal, NForm, NFormItem, NInput, NButton} from 'naive-ui'
import {useReportStore} from "../../../Stores/report.js";
import {ref, watch} from "vue";
const show = defineModel('show')
const props = defineProps({
    patientId: {
        type: String,
        default: null
    }
})
const reportStore = useReportStore()
const droppedPatient = ref(null)

const rules = {
    comment: {
        required: true,
        trigger: ['blur'],
        message: 'Введите описание причины'
    }
}
watch(() => props.patientId, (newPatientId) => {
    if (newPatientId) {
        droppedPatient.value = reportStore.findPatientById(newPatientId)
    }
})
</script>

<template>
    <NModal v-model:show="show"
            title="Постановка на контроль"
            :mask-closable="false"
            :closable="false"
            class="max-w-lg"
            preset="card"
    >
        <NForm :model="droppedPatient" :rules="rules">
            <NFormItem label="Опишите причину" path="comment">
                <NInput type="textarea" :rows="6" :resizable="false" v-model:value="droppedPatient.comment" />
            </NFormItem>
        </NForm>
        <template #action>
            <div class="flex justify-end">
                <NButton type="primary" secondary @click="show = false">
                    Сохранить
                </NButton>
            </div>
        </template>
    </NModal>
</template>

<style scoped>

</style>
