<template>
  <div>
    <BasicModal @register="registerModal" v-bind="$attrs" title="预览">
      <SimpleForm
        class="pt-4"
        ref="formRef"
        :key="show"
        :formProps="state.formProps"
        :formModel="state.formModel"
      />
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, provide } from 'vue';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { buildOption } from '/@/utils/helper/designHelper';

  const state = reactive({
    formProps: {},
    formModel: {},
  });
  provide<boolean>('isCustomForm', true);
  const show = ref(1);
  const formRef = ref();

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    state.formProps = buildOption(JSON.parse(data.formJson).formJson, false);
    show.value += 1;

    await formRef.value.setDefaultValue();
    formRef.value.resetFields();

    setModalProps({
      confirmLoading: false,
      draggable: false,
      title: data.title,
      destroyOnClose: true,
      showOkBtn: false,
      showCancelBtn: false,
      width: 800,
      footer: null,
    });
  });
</script>
