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

import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketCreateTracking from './TicketCreateTracking.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';

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

const route = useRoute();
const { t } = useI18n();
const createTrackingDialogRef = ref(null);
const paginateRef = ref(null);

watch(
    () => route.params.id,
    async (val) => {
        paginateFilter.where.ticketFk = val;
        paginateRef.value.fetch();
    }
);

const paginateFilter = reactive({
    include: [
        {
            relation: 'user',
            scope: {
                fields: ['id', 'name'],
                include: {
                    relation: 'worker',
                    scope: {
                        fields: ['id'],
                    },
                },
            },
        },
        {
            relation: 'state',
            scope: {
                fields: ['name'],
            },
        },
    ],

    order: ['created DESC'],
    where: {
        ticketFk: route.params.id,
    },
});

const columns = computed(() => [
    {
        label: t('tracking.state'),
        name: 'state',
        field: 'state',
        align: 'left',
        format: (val) => val.name,
    },
    {
        label: t('tracking.worker'),
        name: 'worker',
        align: 'left',
    },
    {
        label: t('tracking.created'),
        name: 'created',
        field: 'created',
        align: 'left',
        format: (val) => toDateTimeFormat(val),
    },
]);

const openCreateModal = () => createTrackingDialogRef.value.show();
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <VnPaginate
            ref="paginateRef"
            data-key="TicketTracking"
            :filter="paginateFilter"
            url="TicketTrackings"
            auto-load            
            order="created DESC"
            :limit="0"
        >
            <template #body="{ rows }">
                <QTable
                    :rows="rows"
                    :columns="columns"
                    row-key="id"
                    :pagination="{ rowsPerPage: 0 }"
                    class="full-width q-mt-md"
                    :no-data-label="t('globals.noResults')"
                >
                    <template #body-cell-worker="{ row }">
                        <QTd @click.stop>
                            <QBtn flat color="primary">
                                {{ row.user?.name }}
                                <WorkerDescriptorProxy :id="row.user?.worker?.id" />
                            </QBtn>
                        </QTd>
                    </template>
                </QTable>
            </template>
        </VnPaginate>
        <QDialog
            ref="createTrackingDialogRef"
            transition-show="scale"
            transition-hide="scale"
        >
            <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
        </QDialog>
        <QPageSticky :offset="[20, 20]">
            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
            <QTooltip class="text-no-wrap">
                {{ t('tracking.addState') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>
