
<template>


    <BasicModal 
    :height="600"   
     v-bind="$attrs" @register="registerModal" :title="getTitle"
      @ok="handleSubmit" @cancel="handleClose"  >
      <ModalForm ref="formRef" v-model:value="state.formModel" :fromPage="FromPageType.MENU" />
      <template #footer v-if=" !state.isView">
      <template v-for="(item, index) in sortBy(formButtons, 'index')" :key="item.key">
      <template v-if="item.isShow">
          <CustomButtonModal v-if="item.type == CustomButtonModalType.Modal" :info="item" />
          <a-button
            :type="item.style"
            v-else
            :style="{ marginLeft: index > 0 ? '10px' : 0 }"
            @click="customClick(item)"
          >
            {{ t(item.name) }}
          </a-button>
        </template>
      </template>
    </template>
    </BasicModal>
  
</template>
<script lang="ts" setup>
  import { ref, computed, reactive, provide, Ref  } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
    
      import { CustomButtonModalType } from '/@/enums/userEnum';
      import CustomButtonModal from '/@/components/Form/src/components/CustomButtonModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { formProps ,formButtons } from './config';
  import ModalForm from './Form.vue';
  import { FromPageType } from '/@/enums/workflowEnum';
  
   import { sortBy } from 'lodash-es';  
       import { executeCurFormEvent } from '/@/utils/event/data'; 

  const emit = defineEmits(['success', 'register']);

  const { notification } = useMessage();
  const formRef = ref();
  const isCopy = ref<boolean>(false)
  const state = reactive({
    formModel: {},
    isUpdate: true,
    isView: false,
    rowId: '',
  });
  provide<Ref<boolean>>('isCopy', isCopy);

  const { t } = useI18n();
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      await handleInner(data); 
  });

  const getTitle = computed(() => (state.isView ? '查看' : state.isUpdate ? '编辑' : isCopy.value ? '复制数据' : '新增'));

  
  async function handleInner(data){
    state.isUpdate = !!data?.isUpdate;
    state.isView = !!data?.isView;
    isCopy.value = !!data?.isCopy;
    
    setModalProps({
      destroyOnClose: true,
      maskClosable: false,
      showCancelBtn: false,
      showOkBtn: false,
      canFullscreen: true,
      width: 1200, 
      footer: state.isView ? null : undefined,defaultFullscreen:true,
    });
    
    if (state.isUpdate || state.isView || isCopy.value) {
      state.rowId = data.id;
      if (state.isView) {
        await formRef.value.setDisabledForm();
      }
      
      await formRef.value.setFormDataFromId(state.rowId);
    } else {
      formRef.value.resetFields();
     
    }
    
  }
  async function saveModal() {
    let saveSuccess = false;
    try {
      const values = await formRef.value?.validate();
      //添加隐藏组件
      if (formProps.hiddenComponent?.length) {
        formProps.hiddenComponent.forEach((component) => {
          values[component.bindField] = component.value;
        });
      }
      if (values !== false) {
        try {
          if (!state.isUpdate || isCopy.value) {
            saveSuccess = await formRef.value.add(values);
          } else {
            saveSuccess = await formRef.value.update({ values, rowId: state.rowId });
          }
          return saveSuccess;
        } catch (error) {}
      }
    } catch (error) {
      return saveSuccess;
    }
  }

  async function handleSubmit() {
    try {
      const saveSuccess = await saveModal();
      
      setModalProps({ confirmLoading: true });
      
      if (saveSuccess) {
        if (!state.isUpdate || isCopy.value) {
          //false 新增
          notification.success({
            message: 'Tip',
            description: isCopy.value ? '复制成功' : t('新增成功！'),
          }); //提示消息
        } else {
          notification.success({
            message: 'Tip',
            description: t('修改成功！'),
          }); //提示消息
        }
        
        closeModal();
        
        formRef.value.resetFields();
        emit('success');
      }
    } finally {
      
      setModalProps({ confirmLoading: false });
      
    }
  }
  function customClick(item) {
    if (item.key == 'confirm') {
      handleSubmit();
    } else if (item.key == 'cancel' && props.formType !== 'normal') {
      handleClose();
      closeModal(); 
    } else if (item.key == 'reset') {
      formRef.value.resetFields();
    } else {
      executeCurFormEvent(item.event, state.formModel, true);
    }
  }  
  function handleClose() {
    formRef.value.resetFields();
  }
  
</script>

  