<template>
  <div class="guns-layout">
    <a-spin :delay="100" :spinning="loading">
      <!-- 应用设计表单 -->
      <MoreFormViewer
        v-if="formData && !componentCode"
        v-model:form="formData"
        :isEdit="isEdit"
        :formDesignConfigList="formDesignConfigList"
        ref="moreFormViewerRef"
      />
      <!-- 自定义开发表单 -->
      <component ref="moreFormViewerRef" :is="allCustomForm[componentCode]" v-if="componentCode" />
    </a-spin>
  </div>
</template>

<script setup name="WorkFlowForm">
import { ref, onMounted, watch, nextTick } from 'vue';
import { FlowStartApi } from '../api/FlowStartApi';
import allCustomForm from '@/views/custom/index.js';
import { FlowTaskApi } from '../../list/api/FlowTaskApi';
import MoreFormViewer from '../../../../../form/preview/more-form-viewer.vue';

const props = defineProps({
  // 流程定义id
  definitionId: {
    type: String,
    default: ''
  },
  // 是否是草稿
  draft: {
    type: Boolean,
    default: false
  },
  // 草稿id
  draftId: {
    type: String,
    default: ''
  },
  // 任务id
  taskId: {
    type: String,
    default: ''
  },
  instanceId: {
    type: String,
    default: ''
  }
});

// 加载状态
const loading = ref(false);

// 表单数据
const formData = ref(null);

// 表单配置列表
const formDesignConfigList = ref([]);

// ref
const moreFormViewerRef = ref();

// 自定义表单code
const componentCode = ref('');
// 是否是编辑
const isEdit = ref(false);

onMounted(() => {
  getFlowFormConfig();
});

// 获取流程表单配置
const getFlowFormConfig = () => {
  if (props.definitionId) {
    loading.value = true;
    FlowStartApi.getFlowDefinitionFormConfig({ definitionId: props.definitionId, taskId: props.taskId, mobileFlag: false })
      .then(async res => {
        const { formType } = res.data;
        if (formType == 1) {
          // 应用表单
          formDesignConfigList.value = res.data.formDesignConfigList;
          // 设置表单的值
          formData.value = {};
          formDesignConfigList.value.forEach(item => {
            formData.value[item.formDefinitionId] = {};
          });
          componentCode.value = '';
        } else if (formType == 2) {
          // 自定义开发表单
          componentCode.value = res.data.componentCode;
        }

        // 获取草稿数据
        if (props.draft && props.draftId) {
          const res1 = await FlowStartApi.flowEngineDraftDetail({ draftId: props.draftId });
          if (componentCode.value) {
            formData.value = res1.data.instanceVariable.customVueFormData;
          } else {
            formData.value = res1.data.instanceVariable.formData;
          }
          isEdit.value = true;
        }

        // 审批数据
        if (props.instanceId) {
          const res1 = await FlowTaskApi.getTaskFormData({ instanceId: props.instanceId });
          if (res1) {
            if (componentCode.value) {
              formData.value = res1.customVueFormData;
            } else {
              formData.value = res1.formDetail;
            }
          }
          isEdit.value = true;
        }

        // 给自定义开发表单设置权限及数据
        if (formType == 2) {
          nextTick(() => {
            let data = {
              formJson: formData.value,
              fieldPermissionList: res.data.fieldPermissionList
            };
            moreFormViewerRef.value.formReload(data);
          });
        }
      })
      .finally(() => (loading.value = false));
  }
};

// 验证是否必填
const validateForm = (required = true) => {
  return new Promise(resolve => {
    if (moreFormViewerRef.value) {
      if (required) {
        moreFormViewerRef.value.validate().then(res => {
          if (res) {
            resolve({
              formData: componentCode.value ? moreFormViewerRef.value.formData : formData.value,
              type: componentCode.value ? 'custom' : 'app'
            });
          } else {
            resolve(false);
          }
        });
      } else {
        resolve({
          formData: componentCode.value ? moreFormViewerRef.value.formData : formData.value,
          type: componentCode.value ? 'custom' : 'app'
        });
      }
    } else {
      resolve({
        formData: null,
        type: '',
      });
    }
  });
};

watch(
  () => props.definitionId,
  val => {
    if (val) {
      getFlowFormConfig();
    }
  },
  { deep: true }
);

defineExpose({
  validateForm
});
</script>

<style></style>
