<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import { toDateFormat } from 'src/filters/date.js';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import { dateRange } from 'src/filters';
const { t } = useI18n();

const dates = dateRange(Date.vnNew());
const from = ref(dates[0]);
const to = ref(dates[1]);

const filter = computed(() => {
    const obj = {};
    const formatFrom = setHours(from.value, 'from');
    const formatTo = setHours(to.value, 'to');
    let stamp;

    if (!formatFrom && formatTo) stamp = { lte: formatTo };
    else if (formatFrom && !formatTo) stamp = { gte: formatFrom };
    else if (formatFrom && formatTo) stamp = { between: [formatFrom, formatTo] };

    return Object.assign(obj, { where: { 'v.stamp': stamp } });
});

function exprBuilder(param, value) {
    switch (param) {
        case 'clientFk':
            return { [`c.id`]: value };
        case 'salesPersonFk':
            return { [`c.${param}`]: value };
    }
}

function setHours(date, type) {
    if (!date) return null;

    const d = new Date(date);
    if (type == 'from') d.setHours(0, 0, 0, 0);
    else d.setHours(23, 59, 59, 59);
    return d;
}

const columns = computed(() => [
    {
        label: t('salesClientsTable.date'),
        name: 'dated',
        field: 'dated',
        align: 'left',
        columnFilter: false,
        format: (row) => toDateFormat(row.dated, 'es-ES', { year: '2-digit' }),
    },
    {
        label: t('salesClientsTable.hour'),
        name: 'hour',
        field: 'hour',
        align: 'left',
        columnFilter: false,
    },
    {
        label: t('salesClientsTable.salesPerson'),
        name: 'salesPersonFk',
        field: 'salesPerson',
        align: 'left',
        columnField: {
            component: null,
        },
        optionFilter: 'firstName',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Workers/activeWithInheritedRole',
                fields: ['id', 'name'],
                sortBy: 'nickname ASC',
                where: { role: 'salesPerson' },
                useLike: false,
            },
        },
        columnClass: 'no-padding',
    },
    {
        label: t('salesClientsTable.client'),
        field: 'clientName',
        name: 'clientFk',
        align: 'left',
        columnField: {
            component: null,
        },
        orderBy: 'c.name',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Clients',
                fields: ['id', 'name'],
                sortBy: 'name ASC',
            },
        },
        columnClass: 'no-padding',
    },
]);
</script>

<template>
    <VnTable
        ref="table"
        data-key="SalesMonitorClients"
        url="SalesMonitors/clientsFilter"
        search-url="SalesMonitorClients"
        :order="['dated DESC', 'hour DESC']"
        :expr-builder="exprBuilder"
        :filter="filter"
        :offset="50"
        auto-load
        :columns="columns"
        :right-search="false"
        default-mode="table"
        :disable-option="{ card: true }"
        dense
        class="q-px-none"
    >
        <template #top-left>
            <VnRow>
                <VnInputDate v-model="from" :label="$t('globals.from')" dense />
                <VnInputDate v-model="to" :label="$t('globals.to')" dense />
            </VnRow>
        </template>
        <template #column-salesPersonFk="{ row }">
            <span class="link" :title="row.salesPerson" v-text="row.salesPerson" />
            <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
        </template>
        <template #column-clientFk="{ row }">
            <span class="link" :title="row.clientName" v-text="row.clientName" />
            <CustomerDescriptorProxy :id="row.clientFk" />
        </template>
    </VnTable>
</template>
<style lang="scss" scoped>
.full-width .vn-row {
    margin-bottom: 0;
    flex-direction: row;
    > * {
        max-width: 125px;
    }
}
</style>
