<script lang="ts" setup>
import { getCurrentInstance, ref } from 'vue';
import { useRoute } from 'vue-router';

import { LowCodeService } from '@/service';
import { useUserStore } from '@/store';
import { ContextMode, createProvider } from '@vtj/pro';
import { jsonp, request } from '@vtj/utils';

const userStore = useUserStore();
const service = new LowCodeService();
request.useRequest((req) => {
  req.headers.set('Authorization', `Bearer ${userStore.token}`);
  return req;
});
const { provider, onReady } = createProvider({
  mode: ContextMode.Runtime,
  service,
  project: {
    // @ts-ignore
    id: 4
  },
  adapter: {
    request,
    jsonp
  },
  dependencies: {
    Vue: () => import('vue'),
    VueRouter: () => import('vue-router'),
    ElementPlus: () => import('element-plus')
  }
});
const route = useRoute();
const renderer = ref();
const instance = getCurrentInstance();

onReady(async () => {
  instance?.appContext.app.use(provider);
  renderer.value = await provider.getRenderComponent(
    route.params.id.toString()
  );
});
</script>
<template>
  <component v-if="renderer" :is="renderer" v-bind="$attrs" />
</template>
