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

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

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

const initialData = reactive({
    started: '2001-01-01T11:00:00.000Z',
});

onMounted(() => {
    initialData.clientFk = `${route.params.id}`;
});

const toCustomerRecoveries = () => {
    router.push({
        name: 'CustomerRecoveries',
        params: {
            id: route.params.id,
        },
    });
};
</script>

<template>
    <FormModel
        :form-initial-data="initialData"
        :observe-form-changes="false"
        @on-data-saved="toCustomerRecoveries()"
        model="client"
        url-create="Recoveries"
    >
        <template #moreActions>
            <QBtn
                :label="t('globals.cancel')"
                @click="toCustomerRecoveries"
                color="primary"
                flat
                icon="close"
            />
        </template>

        <template #form="{ data }">
            <VnRow>
                <VnInputDate :label="t('Since')" v-model="data.started" />
                <VnInputDate :label="t('To')" v-model="data.finished" />
            </VnRow>

            <VnRow>
                <VnInput
                    :label="t('Amount')"
                    clearable
                    type="number"
                    v-model="data.amount"
                />
                <VnInput
                    :label="t('Period')"
                    clearable
                    type="number"
                    v-model="data.period"
                />
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Since: Desde
    To: Hasta
    Amount: Importe
    Period: Periodo
</i18n>
