<script setup>
import {NModal, NForm, NFormItem, NInput, NFlex, NButton} from 'naive-ui'
import {useForm} from "@inertiajs/vue3";
import {useReportStore} from "../../../Stores/report.js";
import {ref} from "vue";
const open = defineModel('open')

const reportStore = useReportStore()
const formRef = ref()
const rules = {
    comment: {
        required: true,
        message: 'Заполните этот блок',
        trigger: 'blur'
    }
}

const onSubmit = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            open.value = false
        }
        else {

        }
    })
}
</script>

<template>
    <NModal v-model:show="open" title="Нежелательное событие" preset="card" class="max-w-xl">
        <NForm ref="formRef" :model="reportStore.reportForm" :rules="rules">
            <NFormItem :show-label="false" path="comment">
                <NInput type="textarea" :rows="8" v-model:value="reportStore.reportForm.comment" />
            </NFormItem>
        </NForm>

        <template #action>
            <NFlex align="center" justify="end">
                <NButton type="primary" tertiary @click="onSubmit">
                    Сохранить
                </NButton>
            </NFlex>
        </template>
    </NModal>
</template>

<style scoped>

</style>
