<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';

const { t } = useI18n();
const dataKey = 'CustomerNotifications';
const selected = ref([]);
const columns = computed(() => [
    {
        align: 'left',
        label: t('Identifier'),
        name: 'id',
        columnClass: 'shrink',
    },
    {
        align: 'left',
        label: t('Social name'),
        name: 'socialName',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Clients',
                fields: ['id', 'socialName'],
                optionLabel: 'socialName',
            },
        },
        columnClass: 'expand',
        isTitle: true,
    },
    {
        align: 'left',
        label: t('City'),
        name: 'city',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Towns',
            },
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('Phone'),
        name: 'phone',
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('Email'),
        name: 'email',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'fi',
        label: t('Fi'),
        visible: false,
    },
    {
        align: 'left',
        name: 'postcode',
        label: t('Postcode'),
        visible: false,
    },
    {
        align: 'left',
        name: 'departmentFk',
        label: t('customer.summary.team'),
        component: 'select',
        attrs: {
            url: 'Departments',
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.departmentName),
    },
]);
</script>

<template>
    <VnSubToolbar class="justify-end">
        <template #st-actions>
            <CustomerNotificationsCampaignConsumption
                :selected-rows="selected.length > 0"
                :clients="selected"
                :promise="refreshData"
            />
        </template>
    </VnSubToolbar>
    <VnTable
        :data-key="dataKey"
        url="Clients/filter"
        :table="{
            'row-key': 'id',
            selection: 'multiple',
        }"
        :multi-check="{
            expand: true,
        }"
        v-model:selected="selected"
        :right-search="true"
        :columns="columns"
        :use-model="true"
        auto-load
    >
        <template #column-id="{ row }">
            <span class="link">
                {{ row.id }}
                <CustomerDescriptorProxy :id="row.id" />
            </span>
        </template>
    </VnTable>
</template>

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

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