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

import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';

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

const agenciesOptions = ref(null);
const newAgencyTermForm = reactive({
    agencyFk: null,
    minimumM3: null,
    packagePrice: null,
    kmPrice: null,
    m3Price: null,
    routePrice: null,
    minimumKm: null,
    supplierFk: route.params.id,
});

const onDataSaved = () => {
    router.push({ name: 'SupplierAgencyTerm' });
};
</script>

<template>
    <FetchData
        url="Suppliers/freeAgencies"
        @on-fetch="(data) => (agenciesOptions = data)"
        auto-load
    />

    <QPage>
        <FormModel
            model="supplierAgencyTerm"
            :form-initial-data="newAgencyTermForm"
            url-create="SupplierAgencyTerms"
            :observe-form-changes="true"
            @on-data-saved="onDataSaved()"
        >
            <template #form="{ data }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelectFilter
                            :label="t('supplier.agencyTerms.agencyFk')"
                            v-model="data.agencyFk"
                            :options="agenciesOptions"
                            option-label="name"
                            option-value="id"
                            hide-selected
                            rounded
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.minimumM3')"
                            v-model.number="data.minimumM3"
                            type="number"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.packagePrice')"
                            v-model.number="data.packagePrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.kmPrice')"
                            v-model.number="data.kmPrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.m3Price')"
                            v-model.number="data.m3Price"
                            type="number"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.routePrice')"
                            v-model.number="data.routePrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.minimumKm')"
                            v-model.number="data.minimumKm"
                            type="number"
                        />
                    </div>
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>
