<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 = {
  'supSendOrderPay_collection': () => import('/@/views/supplierOrder/sendOrderPay/index.vue'),
  'supSendOrderRecord_collection': () => import('/@/views/supplierOrder/sendOrderRecord/index.vue'),
  "supSendOrderInvoice_collection": () => import('/@/views/supplierOrder/sendOrderInvoice/index.vue'),
  "supSendOrderPayRelive_collection": () => import('/@/views/supplierOrder/sendOrderPayRelive/index.vue'),
  "supSendOrderInvoiceRelive_collection": () => import('/@/views/supplierOrder/sendOrderInvoiceRelive/index.vue'),
}

const tabs = computed(() => {
  const { collections } = usePermissionStoreHook();
  return (collections['supplierOrder'] || []).map(item => ({ ...item, comp: 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.comp" 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>
