<template>
    <div class="main-section antialiased relative font-nunito text-sm font-normal "
        :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]">
        <component v-bind:is="mainLayout"></component>
        <div v-if="!$route.meta.hideButtonGroup"  class="absolute inline-flex align-middle fixed-bottom button-group">

            <main-tab-bar></main-tab-bar>
           <!--  <button type="button" @click="godashbord"
                class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
            <button type="button" @click="golist" class="btn btn-dark rounded-none">Middle</button>
            <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import MainTabBar from './components/taber/mainTaberItem.vue';
import appLayout from '@/layouts/app-layout.vue';
import authLayout from '@/layouts/auth-layout.vue';

import { useAppStore } from '@/stores/index';
import { useMeta } from '@/composables/use-meta';
import router from '@/router';

const store = useAppStore();

const godashbord = () => {
    router.push(({ path: '/apps/applist' }))
}

const golist = () => {
    router.push(({ path: '/' }))
}
// meta
useMeta({ title: 'Sales Admin' });

const mainLayout = computed(() => {
    return store.mainLayout === 'auth' ? authLayout : appLayout;
});
</script>
<style>
.button-group {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    z-index: 1000;
    /* 确保按钮组在其他内容之上 */
    background-color: #000;
    /* 可选：为按钮组添加背景色 */
    width: 100%;
    /* 确保按钮组横跨整个视口的宽度 */
}

.btn {
    margin: 0.5rem;
    /* 为按钮添加一些外边距 */
}
</style>
