// remoteConfig.js

const env = 'http://10.236.201.118:3001'

export default {
	portal_comps: {
		url: `${env}/remoteEntry.js`,
		scope: "portal_comps",
	}
}

// loadComponent.js

import remoteConfig from "./feConfig/remoteConfig";

function getPortalComps(module){
	return {
		...remoteConfig.portal_comps,
		module
	}
}

function installRemote(){
        const system = getPortalComps(module)

	if (!system.url) {
		return;
	}
	
	const element = document.createElement("script");

        element.src = system.url;
        element.type = "text/javascript";
        element.async = true;

	element.onload = () => {
		console.log(`Dynamic Script Loaded: ${system.url}`);
	};

	element.onerror = () => {
		console.error(`Dynamic Script Error: ${system.url}`);
	};

	document.head.appendChild(element);
}

function loadComponent(scope, module) {
	return async () => {
	  try{
		// 初始化共享作用域（shared scope）用提供的已知此构建和所有远程的模块填充它
		await __webpack_init_sharing__('default');
		const container = window[scope]; // 或从其他地方获取容器
		// 初始化容器 它可能提供共享模块
		await container.init(__webpack_share_scopes__.default);
		const factory = await window[scope].get(module);
		const Module = factory();
		return Module;
	  }catch(e){
		return {
			template: `<div style="width:100%;height:30px;">
				服务异常，请刷新重试
			</div>`
		}
	  }
	};
}

function AsyncImport(module) {
        const system = getPortalComps(module)
	const comp = loadComponent(system.scope, system.module)
	return comp
  }

export { installRemote,  AsyncImport }

// 使用
import { AsyncImport } from '@/loadComponent.js'

components: {
    Certificate: AsyncImport('./Certificate')
}

// 受用方

new ModuleFederationPlugin({
      name: 'porta-web',
      shared: {
        'vue': { singleton: true },
        'element-ui': { singleton: true }
      }
})

// 提供方
new ModuleFederationPlugin({
	filename: "remoteEntry.js",
	name: "portal_comps",
	exposes: {
	    "./Certificate": "./src/components/Certificate.vue",
	},
	shared: {
	    'vue': { singleton: true },
	    "element-ui": { singleton: true }
	}
})