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

import { toCurrency, toDateHourMin } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';

import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

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

const tableRef = ref();

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

const columns = computed(() => [
    {
        align: 'left',
        format: ({ created }) => toDateHourMin(created),
        label: t('Since'),
        name: 'created',
    },
    {
        align: 'left',
        field: (row) => row.worker.user.nickname,
        label: t('Employee'),
        name: 'employee',
    },
    {
        align: 'right',
        field: 'rating',
        label: t('customer.summary.rating'),
        name: 'rating',
        create: true,
        columnCreate: {
            component: 'number',
            autofocus: true,
        },
    },
    {
        align: 'right',
        field: 'recommendedCredit',
        format: ({ recommendedCredit }) => toCurrency(recommendedCredit),
        label: t('customer.summary.recommendCredit'),
        name: 'recommendedCredit',
        create: true,
        columnCreate: {
            component: 'number',
            autofocus: true,
        },
    },
]);
</script>

<template>
    <VnTable
        ref="tableRef"
        data-key="ClientInformas"
        url="ClientInformas"
        :filter="filter"
        :order="['created DESC']"
        :columns="columns"
        :right-search="false"
        :is-editable="false"
        :use-model="true"
        :column-search="false"
        :disable-option="{ card: true }"
        auto-load
        :create="{
            urlCreate: `Clients/${route.params.id}/setRating`,
            title: 'Create rating',
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
    >
        <template #column-employee="{ row }">
            <span class="link">{{ row.worker.user.nickname }}</span>
            <WorkerDescriptorProxy :id="row.worker.id" />
        </template>
    </VnTable>
    <!-- <QTable
            :columns="columns"
            :pagination="{ rowsPerPage: 0 }"
            :rows="rows"
            hide-bottom
            row-key="id"
            v-model:selected="selected"
            class="card-width q-px-lg"
        >
            <template #body-cell-employee="{ row }">
                <QTd @click.stop>
                    <span class="link">{{ row.worker.user.nickname }}</span>
                    <WorkerDescriptorProxy :id="row.clientFk" />
                </QTd>
            </template>
        </QTable> -->
</template>

<i18n>
es:
    Recommended credit: Crédito recomendado
    Since: Desde
    Employee: Empleado
</i18n>
