<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toHour } from 'src/filters';

import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref([]);
const routeFilter = {
    include: [
        {
            relation: 'workers',
            scope: {
                fields: ['id', 'firstName'],
            },
        },
    ],
};
const columns = computed(() => [
    {
        align: 'left',
        isId: true,
        name: 'id',
        label: 'Id',
        chip: {
            condition: () => true,
        },
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'workerFk',
        label: t('route.Worker'),
        create: true,
        cardVisible: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'agencyName',
        label: t('route.Agency'),
        cardVisible: true,
        create: true,
        columnClass: 'expand',
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'vehiclePlateNumber',
        label: t('route.Vehicle'),
        cardVisible: true,
        create: true,
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'started',
        label: t('route.hourStarted'),
        cardVisible: true,
        columnFilter: false,
        format: (row) => toHour(row.started),
    },
    {
        align: 'left',
        name: 'finished',
        label: t('route.hourFinished'),
        cardVisible: true,
        columnFilter: false,
        format: (row) => toHour(row.started),
    },
    {
        align: 'left',
        name: 'description',
        label: t('route.Description'),
        cardVisible: true,
        isTitle: true,
        create: true,
        field: 'description',
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'isOk',
        label: t('route.Served'),
        component: 'checkbox',
        columnFilter: false,
        columnClass: 'shrink',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row?.id, RouteSummary),
                isPrimary: true,
            },
        ],
    },
]);
</script>
<template>
    <RouteSearchbar />
    <RightMenu>
        <template #right-panel>
            <RouteFilter data-key="RouteList" />
        </template>
    </RightMenu>
    <VnTable
        data-key="RouteList"
        url="Routes/filter"
        :columns="columns"
        :right-search="false"
        :filter="routeFilter"
        redirect="route"
        :create="{
            urlCreate: 'Routes',
            title: t('route.createRoute'),
            onDataSaved: ({ id }) => tableRef.redirect(id),
            formInitialData: {},
        }"
        table-height="85vh"
    >
        <template #column-workerFk="{ row }">
            <span class="link" @click.stop>
                {{ row?.workerUserName }}
                <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
            </span>
        </template>
    </VnTable>
</template>
