<script setup>
import { reactive, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';

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

const { t } = useI18n();
const route = useRoute();
const routeId = computed(() => route.params.id);

const initialData = reactive({
    started: Date.vnNew(),
    clientFk: routeId.value,
});
</script>

<template>
    <FormModelPopup
        v-on="$attrs"
        :form-initial-data="initialData"
        :observe-form-changes="false"
        url-create="creditClassifications/createWithInsurance"
    >
        <template #form-inputs="{ data }">
            <VnRow>
                <div class="col">
                    <VnInput
                        :label="t('Credit')"
                        clearable
                        type="number"
                        v-model.number="data.credit"
                    />
                </div>
                <div class="col">
                    <VnInput
                        :label="t('Grade')"
                        clearable
                        type="number"
                        v-model.number="data.grade"
                    />
                </div>
                <div class="col">
                    <VnInputDate :label="t('Since')" v-model="data.started" />
                </div>
            </VnRow>
        </template>
    </FormModelPopup>
</template>

<i18n>
es:
    Credit: Crédito
    Grade: Grade
    Since: Desde
</i18n>
