<template>
  <BasicModal
    v-bind="$attrs"
    defaultFullscreen
    cancelText="关闭"
    :showOkBtn="false"
    @register="registerModal"
    @visible-change="handleVisibleChange"
  >
    <div id="formPreview"/>
  </BasicModal>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { loadMicroApp, MicroApp } from 'qiankun';
import { getSubDefineProps } from '/@/qiankun/state';
import { GlStateEnum } from '/@/enums/microAppEnum';
import { useMicroAppStore } from '/@/store/modules/microApp';
import { apps } from '/@/qiankun/apps';
import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';

interface TableState {
  formDesignApp: MicroApp;
}

const state = reactive<TableState>({
  formDesignApp: undefined!,
});
const formPreviewProps = {
  style: { height: 'calc(100vh - 160px)' },
  options: {},
  disabled: false,
  readonly: false,
  formSubmitSuccess: () => {},
  formSubmitError: () => {},
  formResetChange: () => {}
};
const emit = defineEmits(['success', 'register']);
const microAppStore = useMicroAppStore();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
  state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
    container: '#formPreview',
    props: {
      ...getSubDefineProps(),
      // 表单设计器props
      [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formPreviewProps,
      mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW
    }
  }), { sandbox: { experimentalStyleIsolation: true }});
  debugger
  data?.json && (formPreviewProps.options = eval('(' + data.json + ')') );
  const props: Partial<ModalProps> = { confirmLoading: false };
  props.title = '预览流程表单';
  setModalProps(props);
});

function handleVisibleChange(visible: boolean) {
  !visible && state.formDesignApp.unmount();
}

</script>
