<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import { toDateTimeFormat } from 'src/filters/date';

import VnTable from 'src/components/VnTable/VnTable.vue';
import { dashIfEmpty } from 'src/filters';

const { t } = useI18n();
const route = useRoute();

const filter = {
    include: [
        { relation: 'mandateType', scope: { fields: ['id', 'code'] } },
        { relation: 'company', scope: { fields: ['id', 'code'] } },
    ],
    where: { clientFk: route.params.id },
    order: ['created DESC'],
    limit: 20,
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('globals.id'),
        field: 'id',
        isId: true,
    },
    {
        align: 'left',
        cardVisible: true,
        format: ({ company }) => company.code,
        label: t('globals.company'),
        name: 'company',
    },
    {
        align: 'left',
        cardVisible: true,
        format: ({ mandateType }) => mandateType.code,
        label: t('globals.type'),
        name: 'type',
    },
    {
        align: 'left',
        cardVisible: true,
        label: t('Register date'),
        name: 'created',
        format: ({ created }) => toDateTimeFormat(created),
    },
    {
        align: 'right',
        cardVisible: true,
        name: 'finished',
        label: t('End date'),
        format: ({ finished }) => dashIfEmpty(toDateTimeFormat(finished)),
    },
]);
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <VnTable
            :filter="filter"
            auto-load
            url="Mandates"
            :columns="columns"
            class="full-width q-mt-md"
            :right-search="false"
            :row-click="false"
        />
    </QPage>
</template>

<i18n>
es:
    Register date: Fecha alta
    End date: Fecha baja
</i18n>
