<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';

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="card-list">
            <VnPaginate
                data-key="WagonList"
                url="/Wagons"
                order="id DESC"
                :filter="filter"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
                        <QItem
                            class="q-pa-none items-start cursor-pointer q-hoverable"
                            v-ripple
                            clickable
                        >
                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                <div class="text-h6">{{ row.label }}</div>
                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
                                <QList>
                                    <QItem class="q-pa-none">
                                        <QItemSection>
                                            <QItemLabel caption>
                                                {{ t('wagon.list.plate') }}
                                            </QItemLabel>
                                            <QItemLabel>{{ row.plate }}</QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                    <QItem class="q-pa-none">
                                        <QItemSection>
                                            <QItemLabel caption>
                                                {{ t('wagon.list.volume') }}
                                            </QItemLabel>
                                            <QItemLabel>{{ row.volume }}</QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                    <QItem class="q-pa-none">
                                        <QItemSection>
                                            <QItemLabel caption>
                                                {{ t('wagon.list.type') }}
                                            </QItemLabel>
                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </QList>
                            </QItemSection>
                            <QSeparator vertical />
                            <QCardActions vertical class="justify-between">
                                <QBtn
                                    flat
                                    round
                                    color="primary"
                                    icon="arrow_circle_right"
                                    @click="navigate(row.id)"
                                >
                                    <QTooltip>
                                        {{ t('components.smartCard.openCard') }}
                                    </QTooltip>
                                </QBtn>
                                <QBtn
                                    flat
                                    round
                                    color="primary"
                                    icon="delete"
                                    @click="remove(row)"
                                >
                                    <QTooltip>
                                        {{ t('wagon.list.remove') }}
                                    </QTooltip>
                                </QBtn>
                            </QCardActions>
                        </QItem>
                    </QCard>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky position="bottom-right" :offset="[18, 18]">
            <QBtn @click="create" fab icon="add" color="primary" />
        </QPageSticky>
    </QPage>
</template>

<style lang="scss" scoped>
.card-list {
    width: 100%;
    max-width: 60em;
}
</style>
