<script setup>
import RightMenu from './RightMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnTableFilter from '../VnTable/VnTableFilter.vue';
import { onBeforeMount } from 'vue';
import { useArrayData } from 'src/composables/useArrayData';

const $props = defineProps({
    section: {
        type: String,
        required: true,
    },
    dataKey: {
        type: String,
        default: null,
    },
    searchBar: {
        type: Boolean,
        default: true,
    },
    prefix: {
        type: String,
        default: null,
    },
    rightFilter: {
        type: Boolean,
        default: true,
    },
    columns: {
        type: Array,
        default: null,
    },
    arrayDataProps: {
        type: Object,
        default: null,
    },
});

onBeforeMount(() => {
    if ($props.dataKey)
        useArrayData($props.dataKey, {
            searchUrl: 'table',
            ...$props.arrayDataProps,
        });
});
</script>
<template>
    <slot name="searchbar">
        <VnSearchbar
            v-if="searchBar"
            v-bind="arrayDataProps"
            :data-key="dataKey"
            :label="$t(`${prefix}.search`)"
            :info="$t(`${prefix}.searchInfo`)"
        />
    </slot>

    <RightMenu>
        <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
            <slot name="rightMenu">
                <VnTableFilter
                    v-if="rightFilter && columns"
                    :data-key="dataKey"
                    :columns="columns"
                />
            </slot>
        </template>
    </RightMenu>

    <slot name="body" v-if="section == $route.name" />
    <RouterView v-else />
</template>
