<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';

import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from 'src/components/FormModelPopup.vue';

defineProps({
    requestId: {
        type: Number,
        default: null,
        required: true,
    },
});

const emit = defineEmits(['onDataSaved']);
const { t } = useI18n();
const textAreaRef = ref(null);
const bankEntityFormData = reactive({});

const onDataSaved = (formData, requestResponse) => {
    emit('onDataSaved', formData, requestResponse);
};

onMounted(async () => {
    await nextTick();
    textAreaRef.value.focus();
});
</script>

<template>
    <FormModelPopup
        :url-create="`TicketRequests/${$props.requestId}/deny`"
        :title="t('Specify the reasons to deny this request')"
        :form-initial-data="bankEntityFormData"
        @on-data-saved="onDataSaved"
    >
        <template #form-inputs="{ data }">
            <VnRow>
                <div class="col">
                    <VnInput
                        ref="textAreaRef"
                        type="textarea"
                        v-model="data.observation"
                        fill-input
                        :required="true"
                        autogrow
                    />
                </div>
            </VnRow>
        </template>
    </FormModelPopup>
</template>

<i18n>
es:
    Specify the reasons to deny this request: Especifica las razones para descartar la petición
</i18n>
