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

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

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

onMounted(() => {
  toolbarContain.value = document.getElementById('toolbarBottom');
  microApp.renderApp({
    name: 'copilot-app',
    url: origin,
    container: '#copilot-container',
    data: {
      emitter,
      toolbarContain,
      $router: router
    },
    iframe: true,
    baseroute: '/ai-copilot',
    defaultPtah: route.path
  });
});
onBeforeUnmount(() => {
  microApp.unmountApp('copilot-app');
});
</script>
