<template>
 <div  class="position-re">
   <el-breadcrumb separator="/" class="my-breadcrumb">
     <el-breadcrumb-item>知识库</el-breadcrumb-item>
     <el-breadcrumb-item>流程模板</el-breadcrumb-item>
   </el-breadcrumb>
   <div class="back">
<!--     <span v-if="operationType !== 'detail'" class="fa fa-save cur-po" @click="editOrAddReport">保存</span>-->
     <span class="fa fa-reply cur-po " @click="$emit('changeOperation','',{})">返回</span>
   </div>
   <flow-chart :operation-type="operationType" @changeFormD="changeFormD" page-type="process" @editOrAddGooFlow="editOrAddGooFlow" :current-op-obj="myForm" />
 </div>
</template>

<script>
import FlowChart from "@/components/FlowChart.vue";
import {onBeforeMount, ref} from "vue";
import {addProcessMbDData, editProcessMbDData, getProcessMbDData} from "@/service/zsk/process-mb";
import {handleMes} from "@/unit/element-ui/tip";

export default {
  name: "ProcessMbDetail",
  props:{
    currentOpObj:{

    },
    operationType:{}
  },
  components: {FlowChart},
  setup(props,{emit}) {
    const myForm = ref({

    })
    onBeforeMount(() => {
      if (props.currentOpObj){
        myForm.value = {
          ...props.currentOpObj,
          ...myForm.value,
          CATALOG_NAME:props.currentOpObj.TITLE
        }
      }
    })

    function changeFormD(forms2){

      myForm.value= {
        ...myForm.value,
        ...forms2.value,
        CATALOG_NAME:forms2.TITLE
      }
    }
    function editOrAddGooFlow(allNodes,allLine,form) {
      console.log('拿到的form',form)

      let url = props.operationType !== 'add'?editProcessMbDData:addProcessMbDData
      console.log(allLine,'allLine')
      let nodeObj = {

      }
      let lineObj = {

      }
      allNodes.forEach(i => {
        nodeObj[i.id] = {
          top:i.position().y,
          left:i.position().x,
          nood_id:i.id,
          name:i.label,
          width:100,
          height:40,
          type:'rect',
          yw_type:i.data.type
        }
      })
      allLine.forEach(i => {
        lineObj[i.id] = {
          from:i.source.cell,
          to:i.target.cell,
        }
      })
      let params = {
        nodes:nodeObj,

        is_template:'1',
        title:form.CATALOG_NAME ||props.currentOpObj.TITLE,
        lines:lineObj,
        initNum:props.currentOpObj?.INITNUM ||1
      }
      if (props.operationType !== 'add'){
        params.id = props.currentOpObj.ID
      }
      url(params).then(res => {
        handleMes(res,() => {
          emit('changeOperation','')
        })
      })
    }
    return {
      editOrAddGooFlow,
      changeFormD,
      myForm
    }
  }
}
</script>

<style scoped lang="scss">
.fa-save{
  margin-right: 20px;
}
</style>
