<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,
        columnFilter: false,
    },
    {
        align: 'left',
        label: t('globals.name'),
        name: 'name',
        isTitle: true,
        columnFilter: false,
        columnClass: 'expand',
    },
    {
        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"
    />
    <div class="list-container">
        <div class="list">
            <VnTable
                data-key="AgencyList"
                url="Agencies"
                order="name"
                :columns="columns"
                :right-search="false"
                :use-model="true"
                redirect="agency"
                default-mode="card"
            />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
}
.list-container {
    display: flex;
    justify-content: center;
}
</style>
<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>
