<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'src/components/FetchData.vue';
import FormModelPopup from 'src/components/FormModelPopup.vue';

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnRow from 'components/ui/VnRow.vue';

import VnSelect from 'src/components/common/VnSelect.vue';

const { t } = useI18n();
const route = useRoute();
const paginate = ref();
const dialog = ref();
const routeId = computed(() => route.params.id);
const quasar = useQuasar();

const initialData = computed(() => {
    return {
        agencyFk: routeId.value,
        workCenterFk: null,
    };
});

async function deleteWorCenter(id) {
    try {
        await axios.delete(`AgencyWorkCenters/${id}`).then(async () => {
            quasar.notify({
                message: t('agency.notification.removeItem'),
                type: 'positive',
            });
        });
    } catch (error) {
        quasar.notify({
            message: t('agency.notification.removeItemError'),
            type: 'error',
        });
    }
    paginate.value.fetch();
}
</script>
<template>
    <FetchData
        url="workCenters"
        sort-by="name"
        @on-fetch="(data) => (warehouses = data)"
        auto-load
    />
    <div class="centerCard">
        <VnPaginate
            ref="paginate"
            data-key="AgencyWorkCenters"
            url="AgencyWorkCenters"
            :filter="{ where: { agencyFk: routeId } }"
            order="id"
            auto-load
        >
            <template #body="{ rows }">
                <QCard
                    flat
                    bordered
                    :key="row.id"
                    v-for="row of rows"
                    class="card q-pa-md q-mb-sm"
                >
                    <QItem>
                        <QItemSection side-left>
                            <VnLv :value="row?.workCenter?.name" icon="delete" />
                        </QItemSection>
                        <QItemSection side>
                            <QBtn
                                @click.stop="deleteWorCenter(row.id)"
                                icon="delete"
                                color="primary"
                                round
                                flat
                            />
                        </QItemSection>
                    </QItem>
                </QCard>
            </template>
        </VnPaginate>
    </div>
    <QPageSticky :offset="[18, 18]">
        <QBtn @click.stop="dialog.show()" color="primary" fab shortcut="+" icon="add">
            <QDialog ref="dialog">
                <FormModelPopup
                    :title="t('Add work center')"
                    url-create="AgencyWorkCenters"
                    model="AgencyWorkCenter"
                    :form-initial-data="initialData"
                    @on-data-saved="paginate.fetch()"
                >
                    <template #form-inputs="{ data }">
                        <VnRow>
                            <VnSelect
                                v-model="data.workCenterFk"
                                option-value="id"
                                option-label="name"
                                :label="t('workCenter')"
                                :options="warehouses"
                                use-input
                                input-debounce="0"
                                :is-clearable="false"
                            />
                        </VnRow>
                    </template>
                </FormModelPopup>
            </QDialog>
        </QBtn>
        <QTooltip>
            {{ t('globals.new') }}
        </QTooltip>
    </QPageSticky>
</template>
<style lang="scss" scoped>
.centerCard {
    padding: 5%;
    width: 100%;
    max-width: 50%;
    margin: 0 auto;
}
</style>
<i18n>
    es:
        workCenter removed successfully: Centro de trabajo eliminado correctamente
        This workCenter is already assigned to this agency: Este workCenter ya está asignado a esta agencia
        Add work center: Añadir centro de trabajo
        workCenter: Centro de trabajo
</i18n>
