import { defineComponent, onMounted, reactive, h, toRaw, Suspense } from 'vue';
import VueRenderer, { config } from '@leanwo/lowcode-vue-renderer';
import { init } from './LowcodeConfig';
import { useRoute } from 'vue-router';

const LowcodePage = defineComponent(() => {
  const data = reactive({});
  const route = useRoute();

  onMounted(async () => {
    let lowcodeWindowNo = toRaw(route).params.value.lowcodeWindowNo;
    Object.assign(data, await init(lowcodeWindowNo));
  });

  return () => {
    const { schema, components } = data;
    if (!schema || !components) {
      // return h('div', {}, '页面渲染异常，缺少 schema 或 components，请联系管理员。');
      return h('div', {}, '页面加载中。');
    }

    return h('div', { class: 'lowcode-plugin-sample-preview' }, [
      h(Suspense, null, {
        default : () => h(VueRenderer, {
          class: 'lowcode-plugin-sample-preview-content',
          schema: toRaw(schema),
          components: toRaw(components),
        }),
      }),
    ]);
  };
});

export default LowcodePage;