<!--
 * @Author: sjl
 * @Date: 2023-04-10 11:01:43
 * @Descripttion: 
-->
<template>
  <div class="app-one-container">
    <div id="container">微应用</div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, watch } from 'vue';
  import { loadMicroApp } from 'qiankun';
  // import { registerMicroApps, runAfterFirstMounted, start } from 'qiankun/es';
  import { useRouter } from 'vue-router';
  var that = null;
  export default defineComponent({
    setup() {
      const router = useRouter();
      // 监听当前路由
      watch(
        () => router.currentRoute.value,
        (newValue: any) => {
          console.log('newValue', newValue, this);
          if (newValue.path == '/one/pageone' && that) {
            // that.initQiankun();
          }
        },
        { immediate: true }
      );
      const app = [
        {
          name: 'emesui-finance',
          entry: '/emesui-finance/',
          container: '#one-container',
          activeRule: '/fina',
          props: {
            parentRouter: (e) => {
              console(e);
            },
          },
        },
        {
          name: 'ms-one',
          entry: '/ms-one/',
          container: '#one-container',
          activeRule: '/one',
        },
      ];

      return {
        app,
      };
    },
    mounted() {
      that = this;
      this.initQiankun();
    },
    methods: {
      initQiankun() {
        // 加载微应用
        loadMicroApp({
          name: 'pageone',
          entry: `//${window.location.host}/ms-one/pageone`,
          container: '#container',
          props: {
            slogan: 'Hello Qiankun',
          },
        });
      },

      initQiankun2() {
        registerMicroApps(this.app, { sjl: 'sjl' });
        runAfterFirstMounted((e) => {
          console.log('main:', e);
        });
        start({ prefetch: true });
      },
    },
  });
</script>
