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

import FetchData from 'components/FetchData.vue';
import CrudModel from 'components/CrudModel.vue';
import VnRow from 'components/ui/VnRow.vue';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const supplierAgencyTermRef = ref(null);
const agenciesOptions = ref(null);

const supplierAgencyFilter = {
    include: {
        relation: 'agency',
        scope: {
            fields: ['id', 'name'],
        },
    },
    where: { supplierFk: route.params.id },
};

const redirectToCreateView = () => {
    router.push({ name: 'SupplierAgencyTermCreate' });
};

onMounted(() => {
    if (supplierAgencyTermRef.value) supplierAgencyTermRef.value.reload();
});
</script>
<template>
    <FetchData
        url="Suppliers/freeAgencies"
        @on-fetch="(data) => (agenciesOptions = data)"
        auto-load
    />
    <CrudModel
        ref="supplierAgencyTermRef"
        data-key="SupplierAgencyTerm"
        save-url="SupplierAgencyTerms/crud"
        url="SupplierAgencyTerms"
        model="SupplierAgencyTerm"
        primary-key="agencyFk"
        :filter="supplierAgencyFilter"
        :default-remove="false"
        :data-required="{
            supplierFk: route.params.id,
        }"
    >
        <template #body="{ rows }">
            <QCard class="q-pa-md">
                <VnRow
                    v-for="(row, index) in rows"
                    :key="index"
                    class="row q-gutter-md q-mb-md"
                >
                    <div class="col">
                        <QField :label="t('supplier.agencyTerms.agencyFk')" stack-label>
                            <template #control>
                                <div tabindex="0">
                                    {{ row.agency?.name }}
                                </div>
                            </template>
                        </QField>
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.minimumM3')"
                            v-model.number="row.minimumM3"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.packagePrice')"
                            v-model.number="row.packagePrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.kmPrice')"
                            v-model.number="row.kmPrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.m3Price')"
                            v-model.number="row.m3Price"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.routePrice')"
                            v-model.number="row.routePrice"
                            type="number"
                        />
                    </div>
                    <div class="col">
                        <QInput
                            :label="t('supplier.agencyTerms.minimumKm')"
                            v-model.number="row.minimumKm"
                            type="number"
                        />
                    </div>
                    <div class="col-1 row justify-center items-center">
                        <QIcon
                            name="delete"
                            size="sm"
                            class="cursor-pointer"
                            color="primary"
                            @click="supplierAgencyTermRef.remove([row])"
                        >
                            <QTooltip>
                                {{ t('Remove row') }}
                            </QTooltip>
                        </QIcon>
                    </div>
                </VnRow>
            </QCard>
        </template>
    </CrudModel>
    <QPageSticky :offset="[20, 20]">
        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
        <QTooltip>
            {{ t('supplier.agencyTerms.addRow') }}
        </QTooltip>
    </QPageSticky>
</template>

<i18n>
    es:
        Remove row: Eliminar fila
</i18n>
