<!--
 * @Author: sjl
 * @Date: 2023-04-10 11:01:43
 * @Descripttion: 
-->
<template>
  <div class="app-one-container">
    <div id="container-wlw"></div>
    <!-- <iframe
      id="iframeapp"
      src="http://127.0.0.1:8083/qiankun"
      frameborder="0"
    ></iframe> -->
    <!-- <iframe
      id="iframeapp"
      src="http://192.168.185.73:3100"
      frameborder="0"
    ></iframe> -->
  </div>
</template>
<script lang="ts">
  import { defineComponent, watch } from 'vue';

  import { loadMicroApp } from 'qiankun';
  // import { registerMicroApps } from 'qiankun';
  // import { registerMicroApps, runAfterFirstMounted, start } from 'qiankun/es';
  import { useRouter } from 'vue-router';
  var that = null;
  import { getAppEnvConfig } from '/@/utils/env';
  const { VITE_GLOB_LIGONG_ADMIN } = getAppEnvConfig();
  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',
        },
      ];
      // document.getElementById()

      return {
        app,
      };
    },
    mounted() {
      // this.initQiankun();
      window.mic = new MicroFrontend().init();
      this.iframe();
    },
    methods: {
      iframe() {
        var path = window.location.href.split('#')[1];
        var token = JSON.parse(sessionStorage.getItem('token'));
        mic.register('wlw', 'container-wlw', `${VITE_GLOB_LIGONG_ADMIN}${path}`, () => {
          setTimeout(() => mic.sendToApp('wlw', { type: 'qiankun', token }), 2000);
          setTimeout(() => mic.sendToApp('wlw', { type: 'qiankun', token }), 4000);
          setTimeout(() => mic.sendToApp('wlw', { type: 'qiankun', token }), 6000);
          setTimeout(() => mic.sendToApp('wlw', { type: 'qiankun', token }), 8000);
        });
      },

      hide() {
        // mic.sendToApp('wlw', {
        //   type: 'js',
        //   message: `
        //     var a = document.getElementsByClassName("jeecg-layout-content")[0];
        //     console.log("a:", a);
        //     a.style.position = "fixed";
        //     a.style.zIndex = "999";
        //     a.style.top = "0px";
        //     a.style.left = "0px";`,
        // });
      },

      initQiankun() {
        // 加载微应用
        // loadMicroApp({
        //   name: 'wlw',
        //   entry: `//${window.location.host}/wlw/monitor/points`,
        //   container: '#container',
        //   activeRule: '/wlw',
        // });

        loadMicroApp({
          name: '',
          // entry: 'http://192.168.185.73:3100/wlw/monitor/points',
          // entry: `//192.168.185.73:3100/login`,
          entry: '//localhost:3001/#/building',
          container: '#container-wlw',
          activeRule: '',
        });
      },

      initQiankun2() {
        registerMicroApps([
          {
            name: 'app1',
            entry: '//192.168.185.73:3100/login',
            container: '#container-wlw',
            activeRule: '/react',
            props: {
              name: 'kuitos',
            },
          },
        ]);
      },

      // initQiankun2() {
      //   registerMicroApps(this.app, { sjl: 'sjl' });
      //   runAfterFirstMounted((e) => {
      //     console.log('main:', e);
      //   });
      //   start({ prefetch: true });
      // },
    },
  });
</script>
<style scoped>
  .app-one-container,
  #iframeapp,
  #container-wlw,
  #container-wlw iframe {
    width: 100%;
    height: 100%;
  }
</style>
