<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn } from 'quasar';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import RightMenu from 'src/components/common/RightMenu.vue';

const { t } = useI18n();
const selected = ref([]);
const selectedCustomerId = ref(0);

const tableColumnComponents = {
    id: {
        component: QBtn,
        props: () => ({ flat: true, color: 'blue' }),
        event: (prop) => selectCustomerId(prop.row.id),
    },
    socialName: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    city: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    phone: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    email: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
};

const columns = computed(() => [
    {
        align: 'left',
        field: 'id',
        label: t('Identifier'),
        name: 'id',
    },
    {
        align: 'left',
        field: 'socialName',
        label: t('Social name'),
        name: 'socialName',
    },
    {
        align: 'left',
        field: 'city',
        label: t('City'),
        name: 'city',
    },
    {
        align: 'left',
        field: 'phone',
        label: t('Phone'),
        name: 'phone',
    },
    {
        align: 'left',
        field: 'email',
        label: t('Email'),
        name: 'email',
    },
]);

const selectCustomerId = (id) => {
    selectedCustomerId.value = id;
};
</script>

<template>
    <RightMenu>
        <template #right-panel>
            <CustomerNotificationsFilter data-key="CustomerNotifications" />
        </template>
    </RightMenu>
    <VnSubToolbar class="justify-end">
        <template #st-data>
            <CustomerNotificationsCampaignConsumption
                :selected-rows="selected.length > 0"
                :clients="selected"
                :promise="refreshData"
            />
        </template>
    </VnSubToolbar>
    <QPage class="column items-center q-pa-md">
        <VnPaginate data-key="CustomerNotifications" url="Clients" auto-load>
            <template #body="{ rows }">
                <div class="q-pa-md">
                    <QTable
                        :columns="columns"
                        :rows="rows"
                        class="full-width q-mt-md"
                        row-key="id"
                        selection="multiple"
                        v-model:selected="selected"
                    >
                        <template #body-cell="props">
                            <QTd :props="props">
                                <QTr :props="props" class="cursor-pointer">
                                    <component
                                        :is="
                                            tableColumnComponents[props.col.name]
                                                .component
                                        "
                                        class="col-content"
                                        v-bind="
                                            tableColumnComponents[props.col.name].props(
                                                props
                                            )
                                        "
                                        @click="
                                            tableColumnComponents[props.col.name].event(
                                                props
                                            )
                                        "
                                    >
                                        {{ props.value }}
                                        <CustomerDescriptorProxy
                                            :id="selectedCustomerId"
                                        />
                                    </component>
                                </QTr>
                            </QTd>
                        </template>
                    </QTable>
                </div>
            </template>
        </VnPaginate>
    </QPage>
</template>

<style lang="scss" scoped>
.col-content {
    border-radius: 4px;
    padding: 6px;
}
</style>

<i18n>
es:
    Identifier: Identificador
    Social name: Razón social
    Salesperson: Comercial
    Phone: Teléfono
    City: Población
    Email: Email
    Campaign consumption: Consumo campaña
</i18n>
