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

const { t } = useI18n();
const router = useRouter();
const dataKey = 'AgencyList';
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,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Client ticket list'),
                icon: 'preview',
                action: (row) => navigate(row.id),
            },
        ],
    },
]);
</script>
<template>
    <VnSection
        :data-key
        :columns="columns"
        prefix="agency"
        :right-filter="true"
        :array-data-props="{
            url: 'Agencies',
            order: 'name',
            exprBuilder,
        }"
    >
        <template #body>
            <VnTable
                :data-key
                :columns="columns"
                is-editable="false"
                :right-search="false"
                :use-model="true"
                redirect="route/agency"
                default-mode="card"
            />
        </template>
    </VnSection>
</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
    en:
        isOwn: Has owner
        isAnyVolumeAllowed: Allows any volume
</i18n>
