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

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';

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

const initialData = ref({});

const setClient = (data) => {
    initialData.value.credit = data.credit;
};

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

<template>
    <FetchData
        :filter="filter"
        @on-fetch="setClient"
        auto-load
        :url="`Clients/${route.params.id}/getCard`"
    />

    <FormModel
        :form-initial-data="initialData"
        :observe-form-changes="false"
        :url-update="`/Clients/${route.params.id}`"
        @on-data-saved="toCustomerCredits()"
    >
        <template #moreActions>
            <QBtn
                :label="t('globals.cancel')"
                @click="toCustomerCredits"
                color="primary"
                flat
                icon="close"
            />
        </template>

        <template #form="{ data }">
            <QInput
                :label="t('Credit')"
                clearable
                type="number"
                v-model.number="data.credit"
            />
        </template>
    </FormModel>
</template>

<i18n>
es:
    Credit: Crédito
</i18n>
