<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';
import VnLv from 'components/ui/VnLv.vue';

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

const filter = {
    include: {
        relation: 'type',
        scope: {
            fields: 'name',
        },
    },
};

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

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

async function remove(row) {
    try {
        await axios.delete(`Wagons/${row.id}`).then(async () => {
            quasar.notify({
                message: t('wagon.list.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="WagonList"
                url="/Wagons"
                order="id DESC"
                :filter="filter"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList
                        v-for="row of rows"
                        :key="row.id"
                        :title="(row.label || '').toString()"
                        :id="row.id"
                        @click="navigate(row.id)"
                    >
                        <template #list-items>
                            <VnLv
                                :label="t('wagon.list.plate')"
                                :title-label="t('wagon.list.plate')"
                                :value="row.plate"
                            />
                            <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
                            <VnLv
                                :label="t('wagon.list.type')"
                                :value="row?.type?.name"
                            />
                        </template>
                        <template #actions>
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
                                class="bg-vn-dark"
                                outline
                            />
                            <QBtn
                                :label="t('wagon.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" color="primary" />
        </QPageSticky>
    </QPage>
</template>
