<template>
  <div v-if="visible" class="preview-box">
    <component
      :is="componentName"
      v-if="hasSystemForm"
      ref="SystemForm"
      :fromPage="FromPageType.PREVIEW"
    />
    <SimpleForm
      v-else
      class="form-box"
      ref="SystemFormRef"
      :formProps="formProps"
      :formModel="{}"
      :isWorkFlow="true"
      :isCamelCase="true"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, defineAsyncComponent } from 'vue';
  import { FromPageType } from '/@/enums/workflowEnum';
  import { FormProps } from 'ant-design-vue/lib/form';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  const props = defineProps({
    systemComponent: {
      type: Object,
      default: () => {
        return {
          functionalModule: '',
          functionName: '',
          functionFormName: '',
        };
      },
    },
    // 表单配置规则
    formProps: {
      type: Object as PropType<FormProps>,
    },
  });
  const visible = ref(false);
  const hasSystemForm = ref(true);
  const componentName = computed(() => {
    if (!props.systemComponent.functionName) {
      return defineAsyncComponent({
        loader: () => import('./Empty.vue'),
      });
    }
    return defineAsyncComponent({
      loader: () =>
        import(
          `./../../../views/${props.systemComponent.functionalModule}/${props.systemComponent.functionName}/components/Form.vue`
        ),
      onError: () => {
        hasSystemForm.value = false;
      },
    });
  });

  onMounted(() => {
    visible.value = true;
  });
</script>

<style scoped>
  .preview-box {
    padding: 10px 20px;
  }

  .form-box {
    min-height: 400px;
    padding: 20px;
  }
</style>
