<script setup>
import { ref, computed, onBeforeMount, onMounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';

import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';

import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';

const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
const { t } = useI18n();

const arrayData = ref(null);

function exprBuilder(param, value) {
    switch (param) {
        case 'from':
        case 'to':
            return;
        default:
            return { [param]: value };
    }
}

onBeforeMount(async () => {
    const defaultParams = {
        from: Date.vnFirstDayOfMonth().toISOString(),
        to: Date.vnLastDayOfMonth().toISOString(),
    };
    arrayData.value = useArrayData('InvoiceOutNegative', {
        url: 'InvoiceOuts/negativeBases',
        limit: 0,
        userParams: defaultParams,
        exprBuilder: exprBuilder,
    });
    await arrayData.value.fetch({ append: false });

    stateStore.rightDrawer = true;
});

const componentIsRendered = ref(false);

onMounted(() =>
    nextTick(() => {
        componentIsRendered.value = true;
    })
);

const rows = computed(() => arrayData.value.store.data);

const columns = computed(() => [
    {
        label: t('invoiceOut.negativeBases.company'),
        field: 'company',
        name: 'company',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.country'),
        field: 'country',
        name: 'country',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.clientId'),
        field: 'clientId',
        name: 'clientId',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.client'),
        field: 'clientSocialName',
        name: 'client',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.amount'),
        field: 'amount',
        name: 'amount',
        align: 'left',
        format: (value) => toCurrency(value),
    },
    {
        label: t('invoiceOut.negativeBases.base'),
        field: 'taxableBase',
        name: 'base',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.ticketId'),
        field: 'ticketFk',
        name: 'ticketId',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.active'),
        field: 'isActive',
        name: 'active',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.hasToInvoice'),
        field: 'hasToInvoice',
        name: 'hasToInvoice',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.verifiedData'),
        field: 'isTaxDataChecked',
        name: 'verifiedData',
        align: 'left',
    },
    {
        label: t('invoiceOut.negativeBases.comercial'),
        field: 'workerSocialName',
        name: 'comercial',
        align: 'left',
    },
]);

const downloadCSV = async () => {
    const params = {}; // filter.value;
    const filterParams = {
        limit: 20,
        where: {
            and: [],
        },
    };
    for (const param in params) {
        if (params[param]) filterParams.where.and.push({ [param]: params[param] });
    }

    await invoiceOutGlobalStore.getNegativeBasesCsv(
        arrayData.value.store.userParams.from,
        arrayData.value.store.userParams.to,
        params
    );
};
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport
            to="#st-actions"
            v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
        >
            <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
                <QTooltip>{{ t('Download as CSV') }}</QTooltip>
            </QBtn>
        </Teleport>
    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
        </QScrollArea>
    </QDrawer>
    <VnSubToolbar />
    <QPage class="column items-center q-pa-md">
        <QTable
            :columns="columns"
            :rows="rows"
            hide-bottom
            row-key="clientId"
            :pagination="{ rowsPerPage: 0 }"
            class="full-width q-mt-md"
        >
            <template #body-cell-clientId="{ row }">
                <QTd>
                    <QBtn flat dense color="blue"> {{ row.clientId }}</QBtn>
                    <CustomerDescriptorProxy :id="row.clientId" />
                </QTd>
            </template>
            <template #body-cell-ticketId="{ row }">
                <QTd>
                    <QBtn flat dense color="blue"> {{ row.ticketFk }}</QBtn>
                    <TicketDescriptorProxy :id="row.ticketFk" />
                </QTd>
            </template>
            <template #body-cell-comercial="{ row }">
                <QTd>
                    <QBtn flat dense color="blue">{{ row.comercialName }}</QBtn>
                    <WorkerDescriptorProxy :id="row.comercialId" />
                </QTd>
            </template>
            <template #body-cell-active="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.isActive" disable />
                </QTd>
            </template>
            <template #body-cell-hasToInvoice="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.hasToInvoice" disable />
                </QTd>
            </template>
            <template #body-cell-verifiedData="{ row }">
                <QTd>
                    <QCheckbox :model-value="!!row.isTaxDataChecked" disable />
                </QTd>
            </template>
        </QTable>
    </QPage>
</template>

<style lang="scss" scoped>
.col-content {
    border-radius: 4px;
    padding: 6px;
}
</style>

<i18n>
es:
    Download as CSV: Descargar como CSV
</i18n>
