<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { computed, ref } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSection from 'src/components/common/VnSection.vue';

const quasar = useQuasar();
const arrayData = useArrayData('WagonList');
const store = arrayData.store;
const router = useRouter();
const { t } = useI18n();
const tableRef = ref();
const dataKey = 'WagonList';
const filter = {
    include: {
        relation: 'type',
        scope: {
            fields: 'name',
        },
    },
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'label',
        label: t('Label'),
        isTitle: true,
    },
    {
        align: 'left',
        name: 'plate',
        label: t('wagon.list.plate'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'volume',
        label: t('wagon.list.volume'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('globals.type'),
        cardVisible: true,
        format: (row) => row?.type?.name,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.openCard'),
                icon: 'arrow_forward',
                isPrimary: true,
                action: (row) => navigate(row.id),
            },
            {
                title: t('wagon.list.remove'),
                icon: 'delete',
                isPrimary: true,
                action: (row) => remove(row),
            },
        ],
    },
]);

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

async function remove(row) {
    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);
        window.location.reload();
    });
}
</script>
<template>
    <QPage class="column items-center q-pa-md">
        <VnSection
            :data-key="dataKey"
            :columns="columns"
            prefix="card"
            :array-data-props="{
                url: 'Wagons',
                exprBuilder,
                order: 'id DESC',
            }"
        >
            <template #body>
                <VnTable
                    ref="tableRef"
                    :data-key="dataKey"
                    :create="{
                        urlCreate: 'Wagons',
                        title: t('Create new wagon'),
                        onDataSaved: () => tableRef.reload(),
                        formInitialData: {},
                    }"
                    :filter="filter"
                    :columns="columns"
                    :column-search="false"
                    :default-mode="'card'"
                    :disable-option="{ table: true }"
                    :right-search="false"
                >
                    <template #more-create-dialog="{ data }">
                        <VnInput
                            filled
                            v-model="data.label"
                            :label="t('wagon.create.label')"
                            type="number"
                            min="0"
                            :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
                        />
                        <VnInput
                            filled
                            v-model="data.plate"
                            :label="t('wagon.list.plate')"
                            :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
                        />
                        <VnInput
                            filled
                            v-model="data.volume"
                            :label="t('wagon.list.volume')"
                            type="number"
                            min="0"
                            :rules="[
                                (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
                            ]"
                        />
                        <VnSelect
                            url="WagonTypes"
                            filled
                            v-model="data.typeFk"
                            use-input
                            fill-input
                            hide-selected
                            input-debounce="0"
                            option-label="name"
                            option-value="id"
                            emit-value
                            map-options
                            :label="t('globals.type')"
                            :options="filteredWagonTypes"
                            :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
                            @filter="filterType"
                        >
                            <template v-if="data.typeFk" #append>
                                <QIcon
                                    name="cancel"
                                    @click.stop.prevent="data.typeFk = null"
                                    class="cursor-pointer"
                                />
                            </template>
                            <template #no-option>
                                <QItem>
                                    <QItemSection class="text-grey">
                                        {{ t('wagon.warnings.noData') }}
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </template>
                </VnTable>
            </template>
        </VnSection>
    </QPage>
</template>

<i18n>
es:
    Create new wagon: Crear nuevo vagón
</i18n>
