<template>
  <div v-loading="loading" class="initiate_process">
    <div v-if="!loading" style="min-width:30%">
      <!--渲染表单-->
      <!--      todo 关闭以前的表单渲染 , 此处需要根据参数来定制当前需要展示的页面信息 -->
      <!--      <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"-->
      <!--                   v-model:value="formData" mode="E"/>-->
    </div>
    <div v-if="!loading" id="approveTree"
         style="display: flex;justify-content: center;flex-direction: column;min-width:60%">
      <span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
      <process-tree ref="processTree" mode="view" id-name="approveTree"/>
    </div>
  </div>
</template>

<script setup>
import {getInitiateInfo} from "@/api/workflow/process-definition.js";
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
import FormRender from '@/views/workflow/form/FormRender.vue'
import {useProcessStore} from '@/stores/processStore.js'

const processStore = useProcessStore()
import {defineProps, defineExpose} from 'vue'
import {ElMessage} from "element-plus";

const props = defineProps({
  code: {
    type: String,
    required: true
  }
})

const scale = ref({})
const initiateForm = ref()
const processTree = ref()
const formData = ref({})
const loading = ref({})
const processDefinition = ref({
  processDefinitionKey: "",
  deploymentName: "",
  logo: {},
  formItems: [],
  process: {},
  remark: ""
})

const loadProcessDefinitionInfo = (processDefinitionKey) => {
  loading.value = true
  getInitiateInfo(processDefinitionKey).then(res => {
    processDefinition.value = res.data;
    //构建表单及校验规则
    processStore.setDesign(res.data)
    loading.value = false;
    nextTick(() => {
      processTree.value.init()
    })
  }).catch(err => {
    ElMessage.error(err);
  });
}
const validate = () => {
  let formValidate
  initiateForm.value().validate(formCall => {
    formValidate = formCall;
  })
  let proValidate = processTree.value().validate()
  if (!formValidate) {
    return false;
  }
  return (Array.isArray(proValidate) && proValidate.length === 0);
}


loadProcessDefinitionInfo(props.code)

defineExpose({
  formData,
  validate
})
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1545px) {
  .initiate_process {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

.initiate_process {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

.process-form {
  :deep .el-form-item__label {
    padding: 0 0;
  }

  :deep .el-divider--horizontal {
    margin: 0;
  }
}

:deep .el-divider__text {
  font-size: 16px;
}

:deep .node-footer {
  z-index: 0 !important;
}

</style>
