<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';

const { t } = useI18n();
const router = useRouter();
function navigate(id) {
    router.push({ path: `/agency/${id}` });
}
const exprBuilder = (param, value) => {
    if (!value) return;
    if (param !== 'search') return;
    if (!isNaN(value)) return { id: value };

    return { name: { like: `%${value}%` } };
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: 'Id',
        chip: {
            condition: () => true,
        },
        isId: true,
    },
    {
        align: 'left',
        label: t('globals.name'),
        name: 'name',
        isTitle: true,
    },
    {
        align: 'left',
        label: t('isOwn'),
        name: 'isOwn',
        component: 'checkbox',
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('isAnyVolumeAllowed'),
        name: 'isAnyVolumeAllowed',
        component: 'checkbox',
        cardVisible: true,
        disable: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Client ticket list'),
                icon: 'preview',
                action: (row) => navigate(row.id),
            },
        ],
    },
]);
</script>
<template>
    <VnSearchbar
        :info="t('You can search by name')"
        :label="t('Search agency')"
        data-key="AgencyList"
        :expr-builder="exprBuilder"
    />
    <VnTable
        ref="tableRef"
        data-key="AgencyList"
        url="Agencies"
        order="name"
        :columns="columns"
        :right-search="false"
        :use-model="true"
    />
</template>
<i18n>
    es: 
        isOwn: Tiene propietario
        isAnyVolumeAllowed: Permite cualquier volumen
        Search agency: Buscar agencia
        You can search by name: Puedes buscar por nombre
    en:
        isOwn: Has owner
        isAnyVolumeAllowed: Allows any volume
</i18n>
