<script setup>
import { onMounted, reactive, 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';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';

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

const initialData = reactive({
    amount: null,
    description: null,
    greugeTypeFk: null,
    shipped: '2001-01-01T11:00:00.000Z',
});

const greugeTypes = ref([]);

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

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

<template>
    <fetch-data @on-fetch="(data) => (greugeTypes = data)" auto-load url="greugeTypes" />

    <FormModel
        :form-initial-data="initialData"
        :observe-form-changes="false"
        @on-data-saved="toCustomerGreuges()"
        model="client"
        url-create="Greuges"
    >
        <template #form="{ data }">
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput :label="t('Amount')" type="number" v-model="data.amount" />
                </div>
                <div class="col">
                    <VnInputDate :label="t('Date')" v-model="data.shipped" />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput :label="t('Comment')" v-model="data.description" />
                </div>
                <div class="col">
                    <VnSelectFilter
                        :label="t('Type')"
                        :options="greugeTypes"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.greugeTypeFk"
                    />
                </div>
            </VnRow>
        </template>
    </FormModel>
</template>

<style lang="scss" scoped>
.add-icon {
    cursor: pointer;
    background-color: $primary;
    border-radius: 50px;
}
</style>

<i18n>
es:
    Amount: Importe
    Date: Fecha
    Comment: Comentario
    Type: Tipo
</i18n>
