<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue';

const quasar = useQuasar();
const arrayData = useArrayData('ZoneDeliveryList');
const store = arrayData.store;
const router = useRouter();
const { t } = useI18n();

function navigate(id) {
    router.push({ path: `/zone/type/${id}/edit` });
}

function create() {
    router.push({ path: `/zone/type/create` });
}

async function remove(row) {
    try {
        const id = row.id;
        await axios
            .delete(`ZoneDeliverys/deleteZoneDelivery`, { params: { id } })
            .then(async () => {
                quasar.notify({
                    message: t('zone.delivery.removeItem'),
                    type: 'positive',
                });
                store.data.splice(store.data.indexOf(row), 1);
            });
    } catch (error) {
        //
    }
}
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnPaginate
                data-key="ZoneDeliveryList"
                url="/Zones/getEvents"
                order="id DESC"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList
                        v-for="row of rows"
                        :key="row.id"
                        :title="(row.name || '').toString()"
                        :id="row.id"
                        @click="navigate(row.id)"
                    >
                        <template #actions>
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
                                outline
                            />
                            <QBtn
                                :label="t('list.remove')"
                                @click.stop="remove(row)"
                                color="primary"
                                style="margin-top: 15px"
                            />
                        </template>
                    </CardList>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky position="bottom-right" :offset="[18, 18]">
            <QBtn @click="create" fab icon="add" shortcut="+" color="primary" />
        </QPageSticky>
    </QPage>
</template>
