<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Contact page (Host)</h1>
    <div class="grid grid-cols-1 gap-4">
      <Suspense>
        <template #default>
          <RemoteContactRouter label="propsFromHost"  @increment="handleLog" />
        </template>
        <template #fallback>
          <div>Loading remote component...</div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  __federation_method_getRemote as getRemote,
  __federation_method_setRemote as setRemote,
  __federation_method_unwrapDefault as unwrapModule,
  type IRemoteConfig
} from "virtual:__federation__";

// 公共的 remote 配置
const commonRemoteConfig: Partial<IRemoteConfig> = {
  format: "esm", // 取决于你的 remoteEntry.js 构建方式
  from: "vite"
};

const loadRemoteContactRouter = async () => {
  // 运行时注册 remote
  setRemote("remote", {
    ...commonRemoteConfig,
    url: "http://localhost:3003/remote/_nuxt/remoteEntry.js"
  });

  // 获取远程模块
  const remoteModule = await getRemote("remote", "./RemoteContactRouter");

  // 解包 default 导出。
  // 如果远程模块是命名导出，例如 `export const RemoteContactRouter = ...`
  // 那么你应该使用 `return remoteModule.RemoteContactRouter;`
  return await unwrapModule(remoteModule);
};

// 3. 使用 defineAsyncComponent 来加载组件
  const RemoteContactRouter = defineAsyncComponent(loadRemoteContactRouter);

  const handleLog = (count: number) => {
    console.log("count: ", count);
  };
</script>

<style scoped></style>
