<template>
  <div class="pb-4 bg-white">
    <NodeHead v-if="config.showLabel" :nodeName="config.label" class="ml-4" />
    <SimpleForm
      v-if="config.formType == FormTypeEnum.CUSTOM_FORM"
      ref="formRef"
      :formProps="modalData.formProps"
      :formModel="modalData.formModel"
    />
    <DesktopForm
      v-else-if="config.formType == FormTypeEnum.SYSTEM_FORM"
      ref="formRef"
      :systemComponent="config.systemComponent"
      :formModel="modalData.formModel"
    />
    <div class="mx-auto w-60">
      <a-button @click="handleReset" class="!h-8 w-25 mr-5">重置</a-button>
      <a-button type="primary" @click="handleSubmit" class="!h-8 w-25">确认</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { inject, onMounted, reactive, ref, watch, nextTick } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { FormTypeEnum } from '/@/enums/formtypeEnum';
  import { addComplexFormExecute, getFormTemplate } from '/@/api/form/design';
  import { buildOption } from '/@/utils/helper/designHelper';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { DesktopForm } from '/@/components/SystemForm/index';
  import { getRequestData } from '/@/utils/event/pagetool';

  const { t } = useI18n();
  const props = defineProps({
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    compkey: String,
  });
  const emit = defineEmits(['refreshComp']);
  const formRef = ref();
  const { notification } = useMessage();
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const modalData = reactive({
    pkValue: '',
    formModel: {},
    formProps: {},
  });
  watch(
    () => modalData.formModel,
    (v) => {
      if (props.compkey) widgetFormModel.value[props.compkey] = v;

      emit('refreshComp');
    },
    {
      deep: true,
    },
  );
  watch(
    () => props.config,
    () => {
      initProps();
    },
    { deep: true },
  );
  onMounted(() => {
    initProps();
  });
  async function initProps() {
    if (props.config.formId && props.config.formType == FormTypeEnum.CUSTOM_FORM) {
      try {
        const templateResult = await getFormTemplate(props.config.formId);
        const formJson = JSON.parse(templateResult.formJson);
        let formProps = buildOption(formJson.formJson, false);
        modalData.formProps = formProps;
        let tempModal = {};
        props.config.setFormDatas?.forEach((o) => {
          let bindField = o.name ? JSON.parse(o.name)?.bindField : '';
          if (bindField && o.isReset === '1')
            tempModal[bindField] = getRequestData(o, widgetFormModel.value, false, 'from');
        });
        nextTick(() => {
          if (formRef.value) formRef.value.setFieldsValue(tempModal);
        });
      } catch (error) {
        //console.log('error: ', error);
      }
    } else {
      //console.log('你未选择表单');
    }
  }
  async function handleSubmit() {
    try {
      if (props.config.formType == FormTypeEnum.SYSTEM_FORM) {
        // 系统表单直接走页面的formModel
        await formRef.value?.submit();
      } else {
        const values = await formRef.value?.validate();

        await addComplexFormExecute(props.config.formId, values);
        notification.success({
          message: t('提示'),
          description: t('新增成功！'),
        }); //提示消息
      }
    } catch (error) {
      //  console.log('error: ', error);
    }
  }
  function handleReset() {
    formRef.value.resetFields();
  }
</script>
