<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import AccountSummary from './Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('id'),
        isId: true,
        field: 'id',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'username',
        label: t('nickname'),
        isTitle: true,
        component: 'input',
        columnField: {
            component: null,
        },
        columnFilter: {
            inWhere: true,
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('name'),
        component: 'input',
        columnField: {
            component: null,
        },
        columnFilter: {
            inWhere: true,
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('View Summary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, AccountSummary),
            },
        ],
    },
]);
const exprBuilder = (param, value) => {
    switch (param) {
        case 'search':
            return /^\d+$/.test(value)
                ? { id: value }
                : {
                      or: [
                          { name: { like: `%${value}%` } },
                          { nickname: { like: `%${value}%` } },
                      ],
                  };
        case 'name':
        case 'nickname':
            return { [param]: { like: `%${value}%` } };
        case 'roleFk':
            return { [param]: value };
    }
};
</script>

<template>
    <VnSearchbar
        :label="t('account.search')"
        data-key="AccountUsers"
        :expr-builder="exprBuilder"
        :info="t('account.searchInfo')"
    />

    <VnTable
        ref="tableRef"
        data-key="AccountUsers"
        url="VnUsers/preview"
        order="id DESC"
        :columns="columns"
        default-mode="table"
        auto-load
        redirect="account"
        :use-model="true"
    />
</template>
