<template>
  <div id="home-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import emitter from '@/utils/eventBus';
import microApp from '@micro-zoe/micro-app';

const router = useRouter();
const toolbarContain = ref<any>(null);
const origin = (import.meta as any).env.VITE_CHILD_HOMEWEB_HOST;

onMounted(() => {
  toolbarContain.value = document.getElementById('toolbarBottom');
  microApp.renderApp({
    name: 'micoro-app-homeweb-app',
    url: origin,
    container: '#home-container',
    data: {
      emitter,
      toolbarContain,
      $router: router
    },
    iframe: true,
    baseroute: '/'
  });
});
onBeforeMount(() => {
  microApp.unmountApp('micoro-app-homeweb-app');
});
</script>

<style lang="scss" scoped>
.intro-page {
  width: 100%;
}

.intro-page-mobile {
  :deep(.intro-banner) {
    background: url(@/assets/imgs/home/mobile-banner.png);
    background-repeat: no-repeat, no-repeat;
    background-size: contain;
    background-position: center center;
  }
}
</style>
