<script setup>
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import OrderSearchbar from './Card/OrderSearchbar.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import OrderFilter from './Card/OrderFilter.vue';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
import { toDateTimeFormat } from 'src/filters/date';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const agencyList = ref([]);
const addressesList = ref([]);
const route = useRoute();
const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('module.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
    },
    {
        align: 'left',
        name: 'clientFk',
        label: t('module.customer'),
        isTitle: true,
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'Clients',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row) => row?.clientName,
    },
    {
        align: 'left',
        name: 'salesPersonFk',
        label: t('module.salesPerson'),
        columnFilter: {
            component: 'select',
            inWhere: true,
            attrs: {
                url: 'Workers/activeWithInheritedRole',
                fields: ['id', 'name'],
                where: { role: 'salesPerson' },
                useLike: false,
                optionValue: 'id',
                optionLabel: 'name',
                optionFilter: 'firstName',
            },
        },
        format: (row) => row?.name,
    },
    {
        align: 'left',
        name: 'isConfirmed',
        label: t('module.isConfirmed'),
    },
    {
        align: 'left',
        name: 'created',
        label: t('module.created'),
        component: 'date',
        cardVisible: true,
        format: (row) => toDateTimeFormat(row?.landed),
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'landed',
        label: t('module.landed'),
        component: 'date',
        format: (row) => toDate(row?.landed),
        columnField: {
            component: null,
        },
        style: 'color="positive"',
    },
    {
        align: 'left',
        name: 'hour',
        label: t('module.hour'),
        format: ({ hourTheoretical, hourEffective }) =>
            dashIfEmpty(hourTheoretical || hourEffective),
    },
    {
        align: 'left',
        name: 'agencyModeFk',
        label: t('module.agency'),
        format: (row) => row?.agencyName,
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'agencyModes',
                fields: ['id', 'name'],
                find: {
                    value: 'agencyModeFk',
                    label: 'agencyName',
                },
            },
        },
        cardVisible: true,
        columnClass: 'expand',
    },
    {
        align: 'left',
        name: 'total',
        label: t('module.total'),
        format: ({ total }) => toCurrency(total),
        cardVisible: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('InvoiceOutSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, OrderSummary),
                isPrimary: true,
            },
        ],
    },
]);

async function fetchClientAddress(id, formData) {
    const { data } = await axios.get(`Clients/${id}`, {
        params: { filter: { include: { relation: 'addresses' } } },
    });
    addressesList.value = data.addresses;
    formData.addressId = data.defaultAddressFk;
    fetchAgencies(formData);
}

async function fetchAgencies({ landed, addressId }) {
    if (!landed || !addressId) return (agencyList.value = []);

    const { data } = await axios.get('Agencies/landsThatDay', {
        params: { addressFk: addressId, landed },
    });
    agencyList.value = data;
}

const getDateColor = (date) => {
    const today = Date.vnNew();
    today.setHours(0, 0, 0, 0);
    const timeTicket = new Date(date);
    timeTicket.setHours(0, 0, 0, 0);
    const comparation = today - timeTicket;
    if (comparation == 0) return 'bg-warning';
    if (comparation < 0) return 'bg-success';
};

onMounted(() => {
    if (!route.query.createForm) return;
    const clientId = route.query.createForm;
    const id = JSON.parse(clientId);
    fetchClientAddress(id.clientFk, id);
});
</script>
<template>
    <OrderSearchbar />
    <RightMenu>
        <template #right-panel>
            <OrderFilter data-key="OrderList" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="OrderList"
        url="Orders/filter"
        :order="['landed DESC', 'clientFk ASC', 'id DESC']"
        :create="{
            urlCreate: 'Orders/new',
            title: t('module.cerateOrder'),
            onDataSaved: (url) => {
                tableRef.redirect(url);
            },
            formInitialData: {
                active: true,
                addressId: null,
                clientFk: null,
            },
        }"
        :user-params="{ showEmpty: false }"
        :right-search="false"
        :columns="columns"
        redirect="order"
    >
        <template #column-clientFk="{ row }">
            <span class="link" @click.stop>
                {{ row?.clientName }}
                <CustomerDescriptorProxy :id="row?.clientFk" />
            </span>
        </template>
        <template #column-salesPersonFk="{ row }">
            <span class="link" @click.stop>
                {{ row?.name }}
                <WorkerDescriptorProxy :id="row?.salesPersonFk" />
            </span>
        </template>
        <template #column-landed="{ row }">
            <span v-if="getDateColor(row.landed)">
                <QChip :class="getDateColor(row.landed)" dense square>
                    {{ toDate(row?.landed) }}
                </QChip>
            </span>
        </template>
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="Clients"
                :include="{ relation: 'addresses' }"
                v-model="data.clientFk"
                :label="t('module.customer')"
                @update:model-value="(id) => fetchClientAddress(id, data)"
            />
            <VnSelect
                v-model="data.addressId"
                :options="addressesList"
                :label="t('module.address')"
                option-value="id"
                option-label="nickname"
                @update:model-value="() => fetchAgencies(data)"
            >
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel>
                                {{ scope.opt?.nickname }}: {{ scope.opt?.street }},
                                {{ scope.opt?.city }}</QItemLabel
                            >
                        </QItemSection>
                    </QItem>
                </template>
            </VnSelect>
            <VnInputDate
                v-model="data.landed"
                :label="t('module.landed')"
                @update:model-value="() => fetchAgencies(data)"
            />
            <VnSelect
                v-model="data.agencyModeId"
                :label="t('module.agency')"
                :options="agencyList"
                option-value="agencyModeFk"
                option-label="agencyMode"
            />
        </template>
    </VnTable>
</template>
