<script setup>
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { toCurrency } from 'src/filters';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';

const tableRef = ref();
const { t } = useI18n();

const route = useRoute();
const { openConfirmationModal } = useVnConfirm();
const { notify } = useNotify();
const dataKey = 'InvoiceInVehicleList';
const filter = {
    include: [{ relation: 'vehicle', scope: { fields: ['id', 'numberPlate'] } }],
};
const columns = computed(() => [
    {
        align: 'left',
        name: 'vehicleFk',
        label: t('globals.vehicle'),
        component: 'select',
        attrs: {
            url: 'vehicles',
            fields: ['id', 'numberPlate'],
            optionLabel: 'numberPlate',
            optionFilterValue: 'numberPlate',
            find: {
                value: 'vehicleFk',
                label: 'vehiclePlateNumber',
            },
        },
        create: true,
        format: (row) => row.vehicle?.numberPlate,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'amount',
        label: t('invoiceIn.list.amount'),
        component: 'number',
        create: true,
        format: (row) => toCurrency(row.amount),
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('invoiceIn.unlinkVehicle'),
                icon: 'delete',
                action: (row) =>
                    openConfirmationModal(
                        t('invoiceIn.unlinkVehicle'),
                        t('invoiceIn.unlinkVehicleConfirmation'),
                        () => unassignVehicle(row.id),
                    ),
                isPrimary: true,
            },
        ],
    },
]);

async function unassignVehicle(id) {
    try {
        await axios.delete(`VehicleInvoiceIns/${id}`);
        notify(t('invoiceIn.unlinkedVehicle'), 'positive');
        tableRef.value.reload();
    } catch (e) {
        throw e;
    }
}
</script>

<template>
    <VnTable
        ref="tableRef"
        :data-key="dataKey"
        url="VehicleInvoiceIns"
        :user-filter="filter"
        :filter="{ where: { invoiceInFk: route.params.id } }"
        :columns="columns"
        :column-search="false"
        :right-search="false"
        :create="{
            urlCreate: 'VehicleInvoiceIns',
            title: t('invoiceIn.linkVehicleToInvoiceIn'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: { invoiceInFk: route.params.id },
        }"
        auto-load
    >
        <template #column-vehicleFk="{ row }">
            <span class="link" @click.stop>
                {{ row.vehicle?.numberPlate }}
                <VehicleDescriptorProxy :id="row?.vehicleFk" />
            </span>
        </template>
    </VnTable>
</template>
