<template>
    <main
        class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
        <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
        </div>
        <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
                <Type1 v-if="filters.config.type == 'type-1'" />
                <Type2 v-else-if="filters.config.type == 'type-2'" />
                <Type3 v-else-if="filters.config.type == 'type-3'" />
                <Type4 v-else-if="filters.config.type == 'type-4'" />
                <Type5 v-else-if="filters.config.type == 'type-5'" />
                <Type6 v-else-if="filters.config.type == 'type-6'" />
                <Type7 v-else-if="filters.config.type == 'type-7'" />
                <Type8 v-else-if="filters.config.type == 'type-8'" />
                <Type9 v-else-if="filters.config.type == 'type-9'" />
                <Type10 v-else-if="filters.config.type == 'type-10'" />
                <Type11 v-else-if="filters.config.type == 'type-11'" />
                <Type12 v-else-if="filters.config.type == 'type-12'" />
                <Type13 v-else-if="filters.config.type == 'type-13'" />
                <Type14 v-else-if="filters.config.type == 'type-14'" />
                <Type15 v-else-if="filters.config.type == 'type-15'" />
                <Type17 v-else-if="filters.config.type == 'type-17'" />
            </Filters>

            <slot></slot>
        </div>
    </main>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Filters from '../Form/Filters.vue'
import Type1 from '../Form/FiltersType/Type1.vue';
import Type2 from '../Form/FiltersType/Type2.vue';
import Type3 from '../Form/FiltersType/Type3.vue';
import Type4 from '../Form/FiltersType/Type4.vue';
import Type5 from '../Form/FiltersType/Type5.vue';
import Type6 from '../Form/FiltersType/Type6.vue';
import Type7 from '../Form/FiltersType/Type7.vue';
import Type8 from '../Form/FiltersType/Type8.vue';
import Type9 from '../Form/FiltersType/Type9.vue';
import Type10 from '../Form/FiltersType/Type10.vue';
import Type11 from '../Form/FiltersType/Type11.vue';
import Type12 from '../Form/FiltersType/Type12.vue';
import Type13 from '../Form/FiltersType/Type13.vue';
import Type14 from '../Form/FiltersType/Type14.vue';
import Type15 from '../Form/FiltersType/Type15.vue';
import Type17 from '../Form/FiltersType/Type17.vue';
import { useFiltersStore } from '@/stores/filters';

// Dapatkan objek route dari vue-router
const route = useRoute()

// Dapatkan nama rute menggunakan computed property
const pageTitle = computed(() => route.name)
const filters = useFiltersStore()
</script>