<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { toCurrency } from 'src/filters';
import { toDateTimeFormat } from 'src/filters/date';
import VnTable from 'components/VnTable/VnTable.vue';
import FetchData from 'components/FetchData.vue';
const entityId = computed(() => route.params.id);
const { t } = useI18n();
const route = useRoute();
const totalAmount = ref();
const tableRef = ref();
const filter = computed(() => {
    return {
        include: [
            {
                relation: 'greugeType',
                scope: {
                    fields: ['id', 'name'],
                },
            },
            {
                relation: 'user',
                scope: {
                    fields: ['id', 'name'],
                },
            },
        ],
        where: {
            clientFk: entityId,
        },
    };
});

const columns = computed(() => [
    {
        align: 'left',
        label: t('Date'),
        name: 'shipped',
        format: ({ shipped }) => toDateTimeFormat(shipped),
        create: true,
        columnCreate: {
            component: 'date',
            autofocus: true,
        },
    },
    {
        align: 'left',
        label: t('Created by'),
        component: 'userLink',
        attrs: ({ row }) => {
            return {
                defaultName: true,
                workerId: row.user?.id,
                name: row.user?.name,
            };
        },
    },
    {
        align: 'left',
        name: 'description',
        label: t('Comment'),
        create: true,
    },
    {
        align: 'left',
        name: 'greugeTypeFk',
        format: ({ greugeType }) => greugeType?.name,
        label: t('Type'),
        create: true,
        columnCreate: {
            component: 'select',
            url: 'greugeTypes',
            sortBy: 'name ASC ',
            limit: 0,
        },
    },
    {
        align: 'left',
        name: 'amount',
        label: t('Amount'),
        format: ({ amount }) => toCurrency(amount),
        create: true,
    },
]);
</script>

<template>
    <FetchData
        :url="`Greuges/${entityId}/sumAmount`"
        auto-load
        @on-fetch="({ sumAmount }) => (totalAmount = sumAmount)"
    ></FetchData>
    <VnTable
        ref="tableRef"
        data-key="Greuges"
        url="Greuges"
        search-url="greuges"
        :filter="filter"
        :order="['shipped DESC', 'amount']"
        :columns="columns"
        :right-search="false"
        :is-editable="false"
        :use-model="true"
        :column-search="false"
        :disable-option="{ card: true }"
        :create="{
            urlCreate: `Greuges`,
            title: t('New greuge'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: { shipped: new Date(), clientFk: route.params.id },
        }"
        auto-load
    >
        <template #top-left>
            <QCard class="q-px-md q-py-sm">
                {{ t('Total') }}: {{ toCurrency(totalAmount) }}
            </QCard>
        </template>
    </VnTable>
</template>

<style lang="scss">
.consignees-card {
    border: 2px solid var(--vn-accent-color);
    border-radius: 10px;
    padding: 10px;
}

.label-color {
    color: var(--vn-label-color);
}
</style>

<i18n>
es:
    Total: Total
    Date: Fecha
    Created by: Creado por
    Comment: Comentario
    Type: Tipo
    Amount: Importe
    New greuge: Nuevo greuge
</i18n>
