<script setup lang="ts">
import { computed, defineAsyncComponent, onMounted, ref, Suspense } from 'vue';
import { usePermissionStoreHook } from "/@/store/modules/permission";
import { useRoute } from 'vue-router';


const { query } = useRoute();

const componentMaps = {
  "invoiceRelation_collection": () => import('/@/views/purchaseNew/invoiceRelation/index.vue'),
  "unInvoiceRelation_collection": () => import('/@/views/purchaseNew/unInvoiceRelation/index.vue'),
}

const tabs = computed(() => {
  const { collections } = usePermissionStoreHook();
  return (collections['purchase'] || []).map(item => ({ ...item, component: defineAsyncComponent(componentMaps[item.menu_route]) }));
})

const active = ref(query.tab || tabs.value[0].menu_route);
</script>

<template>
  <el-tabs v-model="active" class="bg-[#f4f7fc]">
    <el-tab-pane v-for="tab in tabs" :label="tab.menu_name" :name="tab.menu_route" :key="tab.menu_route">
      <Suspense v-if="tab.menu_route === active">
        <template #default>
          <component :is="tab.component" v-if="tab.menu_route === active" />
        </template>

        <template #fallback>
          <div class="h-[300px] w-full" v-loading="true" />
        </template>
      </Suspense>
    </el-tab-pane>
  </el-tabs>
</template>
