<script setup>
import VnTable from 'src/components/VnTable/VnTable.vue';
import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import { toDate, toCurrency } from 'src/filters/index';
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useI18n } from 'vue-i18n';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';

const tableRef = ref();
const { t } = useI18n();
const route = useRoute();
const { notify } = useNotify();
const dataKey = 'VehicleInvoiceIn';
const { openConfirmationModal } = useVnConfirm();

const columns = computed(() => [
    {
        align: 'left',
        name: 'issued',
        label: t('invoiceIn.list.issued'),
        columnFilter: {
            component: 'date',
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'supplierFk',
        label: t('invoiceIn.list.supplier'),
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Suppliers',
                fields: ['id', 'name'],
            },
        },
        format: ({ supplierName }) => supplierName,
        columnClass: 'expand',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'supplierRef',
        label: t('invoiceIn.supplierRef'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'amount',
        label: t('invoiceIn.list.amount'),
        format: ({ amount }) => toCurrency(amount),
        columnFilter: false,
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('vehicle.ticket.unassignInvoice'),
                icon: 'delete',
                action: (row) =>
                    openConfirmationModal(
                        t('vehicle.ticket.unassignInvoice'),
                        t('vehicle.ticket.unassignInvoiceConfirmation'),
                        () => unassignInvoice(row.id),
                    ),
                isPrimary: true,
            },
        ],
    },
]);

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

<template>
    <VnTable
        ref="tableRef"
        :data-key="dataKey"
        :url="`vehicles/${route.params.id}/getInvoices`"
        :columns="columns"
        search-url="vehicleInvoiceIns"
        :order="['issued DESC', 'supplierRef ASC']"
        :create="{
            urlCreate: 'VehicleInvoiceIns',
            title: t('vehicle.ticket.assignInvoice'),
            formInitialData: {
                vehicleFk: parseInt(route.params.id, 10),
            },
            onDataSaved: ({ id }) => tableRef.reload(),
        }"
        auto-load
    >
        <template #column-supplierFk="{ row }">
            <span class="link" @click.stop>
                {{ row.supplierName }}
                <SupplierDescriptorProxy :id="row.supplierId" />
            </span>
        </template>
        <template #column-supplierRef="{ row }">
            <span class="link" @click.stop>
                {{ row.supplierRef }}
                <InvoiceInDescriptorProxy :id="row.invoiceInFk" />
            </span>
        </template>
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="invoiceIns"
                :label="t('invoiceIn.supplierRef')"
                :fields="['id', 'supplierRef', 'supplierFk']"
                :filter-options="['id', 'supplierRef']"
                v-model="data.invoiceInFk"
                option-label="supplierRef"
                :required="true"
            >
            </VnSelect>
            <VnInputNumber
                :label="t('invoiceIn.list.amount')"
                v-model="data.amount"
                required
            />
        </template>
    </VnTable>
</template>
