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

const { query } = useRoute();


const componentMaps = {
  'sendOrderPay_collection': () => import('/@/views/postSupplierOrder/sendOrderPay/index.vue'),
  'sendOrderRecord_collection': () => import('/@/views/postSupplierOrder/sendOrderRecord/index.vue'),
  "sendOrderInvoice_collection": () => import('/@/views/postSupplierOrder/sendOrderInvoice/index.vue'),
  "sendOrderPayRelive_collection": () => import('/@/views/postSupplierOrder/sendOrderPayRelive/index.vue'),
  "sendOrderInvoiceRelive_collection": () => import('/@/views/postSupplierOrder/sendOrderInvoiceRelive/index.vue')
}

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

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>
