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

import { toCurrency, toDateHourMinSec } from 'src/filters';

import FetchData from 'components/FetchData.vue';

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

const rows = ref([]);

const filter = {
    where: {
        creditClassificationFk: `${route.params.creditId}`,
    },
    limit: 20,
};

const tableColumnComponents = {
    created: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    grade: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    credit: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
};

const columns = computed(() => [
    {
        align: 'left',
        field: 'created',
        format: (value) => toDateHourMinSec(value),
        label: t('Created'),
        name: 'created',
    },
    {
        align: 'left',
        field: 'grade',
        label: t('Grade'),
        name: 'grade',
    },
    {
        align: 'left',
        field: 'credit',
        format: (value) => toCurrency(value),
        label: t('Credit'),
        name: 'credit',
    },
]);
</script>

<template>
    <FetchData
        :filter="filter"
        @on-fetch="(data) => (rows = data)"
        auto-load
        url="CreditInsurances"
    />

    <QPage class="column items-center q-pa-md" v-if="rows.length">
        <QTable
            :columns="columns"
            :pagination="{ rowsPerPage: 12 }"
            :rows="rows"
            class="full-width q-mt-md"
            row-key="id"
        >
            <template #body-cell="props">
                <QTd :props="props">
                    <QTr :props="props" class="cursor-pointer">
                        <component
                            :is="tableColumnComponents[props.col.name].component"
                            class="col-content"
                            v-bind="tableColumnComponents[props.col.name].props(props)"
                            @click="tableColumnComponents[props.col.name].event(props)"
                        >
                            {{ props.value }}
                        </component>
                    </QTr>
                </QTd>
            </template>
        </QTable>
    </QPage>

    <h5 class="flex justify-center color-vn-label" v-else>
        {{ t('globals.noResults') }}
    </h5>
</template>

<i18n>
es:
    Created: Fecha creación
    Grade: Grade
    Credit: Crédito
</i18n>
