<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { QIcon } from 'quasar';
import { dashIfEmpty, toCurrency, toDate, toHour } from 'src/filters';
import { openBuscaman } from 'src/utils/buscaman';
import CardSummary from 'components/ui/CardSummary.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import RouteDescriptorMenu from './RouteDescriptorMenu.vue';

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();

const entityId = computed(() => $props.id || route.params.id);
const isDialog = Boolean($props.id);
const hideRightDrawer = () => {
    if (!isDialog) {
        stateStore.rightDrawer = false;
    }
};
onMounted(hideRightDrawer);
onUnmounted(hideRightDrawer);
const getTotalPackages = (tickets) => {
    return (tickets || []).reduce((sum, ticket) => sum + ticket.packages, 0);
};

const ticketColumns = ref([
    {
        name: 'order',
        label: t('route.summary.order'),
        field: (row) => dashIfEmpty(row?.priority),
        sortable: false,
        align: 'center',
    },
    {
        name: 'street',
        label: t('route.summary.street'),
        field: (row) => row?.street,
        sortable: false,
        align: 'left',
    },
    {
        name: 'city',
        label: t('route.summary.city'),
        field: (row) => row?.city,
        sortable: false,
        align: 'left',
    },
    {
        name: 'pc',
        label: t('route.summary.pc'),
        field: (row) => row?.postalCode,
        sortable: false,
        align: 'center',
    },
    {
        name: 'client',
        label: t('route.summary.client'),
        field: (row) => row?.nickname,
        sortable: false,
        align: 'left',
    },
    {
        name: 'state',
        label: t('route.summary.state'),
        field: (row) => row?.ticketStateName,
        sortable: false,
        align: 'left',
    },
    {
        name: 'delivered',
        label: t('route.delivered'),
        field: (row) => dashIfEmpty(toDate(row?.delivered)),
        sortable: false,
        align: 'center',
    },
    {
        name: 'forecast',
        label: t('route.forecast'),
        field: (row) => dashIfEmpty(toDate(row?.forecast)),
        sortable: false,
        align: 'center',
    },
    {
        name: 'packages',
        label: t('route.summary.packages'),
        field: (row) => row?.packages,
        sortable: false,
        align: 'center',
    },
    {
        name: 'volume',
        label: t('route.summary.m3'),
        field: (row) => row?.volume,
        sortable: false,
        align: 'center',
    },
    {
        name: 'packaging',
        label: t('route.summary.packaging'),
        field: (row) => row?.ipt,
        sortable: false,
        align: 'center',
    },
    {
        name: 'ticket',
        label: t('route.summary.ticket'),
        field: (row) => row?.id,
        sortable: false,
        align: 'center',
    },
    {
        name: 'observations',
        label: '',
        field: (row) => row?.ticketObservation,
        sortable: false,
        align: 'left',
    },
]);
</script>

<template>
    <div class="q-pa-md full-width">
        <CardSummary
            ref="summary"
            :url="`Routes/${entityId}/summary`"
            :entity-id="entityId"
            data-key="RouteSummary"
        >
            <template #header="{ entity }">
                <span>{{ `${entity?.route.id} - ${entity?.route?.description}` }}</span>
            </template>
            <template #menu="{ entity }">
                <RouteDescriptorMenu :route="entity.route" />
            </template>
            <template #body="{ entity }">
                <QCard class="vn-max">
                    <VnTitle
                        :url="`#/${route.meta.moduleName.toLowerCase()}/${entityId}/basic-data`"
                        :text="t('globals.pageTitles.basicData')"
                    />
                    <div class="vn-card-group">
                        <div class="vn-card-content">
                            <VnLv
                                :label="t('route.summary.date')"
                                :value="toDate(entity?.route.dated)"
                            />
                            <VnLv
                                :label="t('route.summary.agency')"
                                :value="entity?.route?.agencyMode?.name"
                            />
                            <VnLv
                                :label="t('route.summary.vehicle')"
                                :value="entity.route?.vehicle?.numberPlate"
                            />
                            <VnLv :label="t('route.summary.driver')">
                                <template #value>
                                    <span class="link">
                                        {{
                                            dashIfEmpty(entity?.route?.worker?.user?.name)
                                        }}
                                        <WorkerDescriptorProxy
                                            :id="entity.route?.workerFk"
                                        />
                                    </span>
                                </template>
                            </VnLv>
                            <VnLv
                                :label="t('route.summary.cost')"
                                :value="toCurrency(entity.route?.cost)"
                            />
                            <VnLv
                                :label="t('route.summary.volume')"
                                :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
                                    entity?.route?.vehicle?.m3,
                                )} m³`"
                            />
                            <VnLv
                                :label="t('route.summary.packages')"
                                :value="getTotalPackages(entity.tickets)"
                            />
                            <QCheckbox
                                :label="
                                    entity.route.isOk
                                        ? t('route.summary.closed')
                                        : t('route.summary.open')
                                "
                                v-model="entity.route.isOk"
                                :disable="true"
                            />
                        </div>
                        <div class="vn-card-content">
                            <VnLv
                                :label="t('route.summary.started')"
                                :value="toHour(entity?.route.started)"
                            />
                            <VnLv
                                :label="t('route.summary.finished')"
                                :value="toHour(entity?.route.finished)"
                            />
                            <VnLv
                                :label="t('route.summary.kmStart')"
                                :value="dashIfEmpty(entity?.route?.kmStart)"
                            />
                            <VnLv
                                :label="t('route.summary.kmEnd')"
                                :value="dashIfEmpty(entity?.route?.kmEnd)"
                            />
                            <VnLv
                                :label="t('globals.description')"
                                :value="dashIfEmpty(entity?.route?.description)"
                            />
                        </div>
                    </div>
                </QCard>
                <QCard class="vn-max">
                    <VnTitle
                        :url="`#/route/${entityId}/tickets`"
                        :text="t('route.summary.tickets')"
                    />
                    <QTable
                        :columns="ticketColumns"
                        :rows="entity?.tickets"
                        row-key="id"
                        flat
                    >
                        <template #body-cell-city="{ value, row }">
                            <QTd auto-width>
                                <span
                                    class="link"
                                    @click="openBuscaman(entity?.route?.vehicleFk, [row])"
                                >
                                    {{ value }}
                                </span>
                            </QTd>
                        </template>
                        <template #body-cell-client="{ row }">
                            <QTd>
                                <span class="link">
                                    {{ row.clientFk }}
                                    <CustomerDescriptorProxy :id="row?.clientFk" />
                                </span>
                            </QTd>
                        </template>
                        <template #body-cell-ticket="{ value, row }">
                            <QTd auto-width class="text-center">
                                <span class="link">
                                    {{ value }}
                                    <TicketDescriptorProxy :id="row?.id" />
                                </span>
                            </QTd>
                        </template>
                        <template #body-cell-observations="{ value }">
                            <QTd auto-width>
                                <QIcon
                                    v-if="value"
                                    name="vn:notes"
                                    color="primary"
                                    class="cursor-pointer"
                                >
                                    <QTooltip>{{ value }}</QTooltip>
                                </QIcon>
                            </QTd>
                        </template>
                    </QTable>
                </QCard>
            </template>
        </CardSummary>
    </div>
</template>
