<template>
    <div class="app-container">
        <div class="containers">
            <div class="canvas" ref="canvas"></div>
            <ul class="buttons">
                <li>
                    <a href="javascript:" class="active" ref="saveXML" title="保存为bpmn"
                    >保存为bpmn</a
                    >
                </li>
                <li>
                    <a href="javascript:" class="active" ref="saveSvg" title="保存为svg"
                    >保存为svg</a
                    >
                </li>
                <li>
                    <a
                    href="javascript:"
                    class="active"
                    @click="handlerUndo"
                    title="撤销操作"
                    >撤销</a
                    >
                </li>
                <li>
                    <a
                    href="javascript:"
                    class="active"
                    @click="handlerRedo"
                    title="恢复操作"
                    >恢复</a
                    >
                </li>
                <li>
                    <a
                    href="javascript:"
                    class="active"
                    @click="handlerZoom(0.1)"
                    title="放大"
                    >放大</a
                    >
                </li>
                <li>
                    <a
                    href="javascript:"
                    class="active"
                    @click="handlerZoom(-0.1)"
                    title="缩小"
                    >缩小</a
                    >
                </li>
                <li>
                    <a
                    href="javascript:"
                    class="active"
                    @click="handlerZoom(0)"
                    title="还原"
                    >还原</a
                    >
                </li>
                <li>
                    <el-button type="primary" @click="submitBpmn" v-if="!loading" title="提交流程图">提 交</el-button>
                    <el-button :loading="loading" type="primary" @click="submitBpnm" v-else>提交中...</el-button>
                </li>
            </ul>
        </div>
         <!-- 添加或修改节点参数配置对话框 -->
        <el-dialog  :title="title" :visible.sync="serviceTask" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false" :show-close="showClo">
            <el-form ref="form" :model="formData" :rules="rules" label-width="120px" >
                <el-row :gutter="20">
                    <el-col :span="24" >
                        <el-form-item label="节点名称" prop="name" >
                          <el-input v-model.trim="formData.name" placeholder="请输入节点名称"  @input="onInput" maxlength="30" show-word-limit  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="执行" prop="nodeId">
                          <treeselect v-model="formData.nodeId" :options="dataOptions" :show-count="true" placeholder="请选择执行场景"   />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="status">
                        <el-form-item :label="formData.param.describe" prop="describe" >
                        <el-input v-model.trim="formData.param.value" :placeholder="'请输入' + formData.param.describe"  @input="onInput"  show-word-limit  />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
                <el-button :loading="loading" type="primary" @click="submitForm" v-else>提交中...</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 流程图提交对话框 -->
        <el-dialog  :title="title" :visible.sync="openBpmn" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false" :show-close="showClo">
            <el-form ref="form2" :model="bpmnForm" :rules="rules2" label-width="100px" >
                <el-row :gutter="20">
                    <el-col :span="24" >
                        <el-form-item label="流程图名称" prop="name" >
                        <el-input v-model.trim="bpmnForm.name" placeholder="请输入流程图名称"  @input="onInput" maxlength="30" show-word-limit  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item label="流程图描述" prop="procdefDescribe" >
                        <el-input type="textarea" v-model.trim="bpmnForm.procdefDescribe" placeholder="请输入流程图描述"  @input="onInput" maxlength="60" show-word-limit  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                      <!-- <el-form-item label="执行时间" prop="bpmnForm.runCron" >
                        <el-popover v-model="runCronClose">
                            <cron @change="changeCron" @close="runCronClose=false" i18n="cn"/>
                            <el-input slot="reference" v-model="bpmnForm.runCron" placeholder="定时策略" @click="runCronClose=true"/>
                        </el-popover>
                      </el-form-item> -->
                      <el-form-item style="margin-top: -10px; margin-bottom:0px;">
                        <cron v-if="showCronBox" v-model="bpmnForm.runCron" ></cron>
                      </el-form-item>
                      <el-form-item label="执行时间" prop="runCron">
                        <el-input v-model="bpmnForm.runCron" auto-complete="off" placeholder="请输入执行时间" readonly>
                            <el-button slot="append" v-if="!showCronBox" icon="el-icon-arrow-up" @click="showCronBox = true" title="打开图形配置"></el-button>
                            <el-button slot="append" v-else icon="el-icon-arrow-down" @click="showCronBox = false" title="关闭图形配置"></el-button>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="运行状态" prop="runStatus">
                        <el-switch
                          v-model="bpmnForm.runStatus"
                          active-color="#13ce66"
                          inactive-color="#ccc"
                          @change="handleStatusChange">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitBpnmForm" v-if="!loading">确 定</el-button>
                <el-button :loading="loading" type="primary" @click="submitBpnmForm" v-else>提交中...</el-button>
                <el-button @click="cancelBpnm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// 引入相关的依赖
// import {cron} from 'vue-cron'
import cron from '@/components/cron'
import { xmlStr } from "@/mock/xmlStrPreview2";
import { CustomModeler } from "@/components/customBpmn";
import Treeselect from "@riophae/vue-treeselect";
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode,
getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList,
getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef, getBpmnZkReNodeProcdefListByPorcedfId} from "@/api/business/Middleware/bpmn";
import store from "../../../../store";
// import { unset } from '../../../../../public/bpmnjs';
export default {
  name: "",
  components: { Treeselect, cron },
  data() {
    return {
      describe:undefined,
      //cron
        showCronBox: false,
        // form: {
        //   cronExpression: ''
        // },
      showClo:false,
      bpmnModeler: null,
      container: null,
      canvas: null,
      scale: 1,
      userTask: false,
      serviceTask: false,
      scriptTask: false,
      sequenceFlow: "",
      formData: {
        name: "",
        nodeId:undefined,
        param:{
          name:undefined,
          describe:undefined,
          value:undefined
        },
        xlStatus:undefined,
      },
      //节点树选项
      dataOptions: [],

      data:undefined,
      openBpmn:false,
      // 节点表单校验
      rules: {
        name: [
          { required: true, message: "节点名称不能为空", trigger: "blur" }
        ],
        nodeId: [
          { required: true, message: "场景不能为空", trigger: ["blur",'change'] }
        ],
      },
      bpmnForm: {//流程图弹框提交信息
        name: undefined,
        procdefDescribe:undefined,
        runCron:'',
        runStatus:false
      },
      runCronClose:false,
      // 流程图表单校验
      rules2: {
        name: [
          { required: true, message: "流程描述名称不能为空", trigger: "blur" }
        ],
        procdefDescribe: [
          { required: true, message: "流程图描述不能为空", trigger: ["blur",'change'] }
        ],
        runCron: [
          { required: true, message: "执行时间不能为空", trigger: ["blur",'change'] }
        ],
        // runStatus: [
        //   { required: true, message: "运行状态不能为空", trigger: ["blur",'change'] }
        // ],

      },
      loading:false,
      bpmnData:[], //待提交数据，
      bpmnDataNumber:0,
      bpmnTitle:undefined,//待提交流程图名称
      bpmnNodeId:undefined,// 弹框打开时节点Id
      xml:undefined,
      serviceTaskStatus:false,
      checkedKeys:[],//流程图返回节点
      bpmnDataFH:[],//流程图返回一级信息

      status:false,
      msg:[],
      tree:[],//下拉数据集
      waitSubmitList:{
        wrap:undefined,
      },//待提交所有节点组成参数
      nowDate:new Date().getTime(),
      value:undefined,//节点value有值时缓存节点参数
      nodeFail:true, //节点信息提交被rule条件阻断时，用作确定按钮阻断input出现
      execTime:'',
      cronPopover:false,
      nodeKey:undefined,
      nodeStorage:undefined, //由于判断节点下拉显示
      title:undefined
    };
  },
  created(){
    this.getNodeTree()
  },
  mounted() {
    //修改数据获取
    if(this.$route.query.name){
      //流程图信息查询
      this.title = "修改"
      getBpmnZkReProcdefList({name:this.$route.query.name,current: 1,size: 20}).then(res=>{
        this.bpmnDataFH = res.data.records[0]
        console.log(this.bpmnDataFH)
        this.init()
      })
      //流程图关联节点信息查询
      getBpmnZkReNodeProcdefListByPorcedfId({procdefId:this.$route.query.id}).then(res=>{
        this.bpmnData = res.data
        let arr = []
        let data = res.data
        for(let i = 0;i<data.length;i++){
          arr[i] = {
            param:{
              value:undefined,
              name:undefined
            },
            name:undefined,
            xlStatus:false,
            nodeId:undefined,
            procedefKey:undefined
          }
          arr[i].param = JSON.parse(data[i].params)[0]
          arr[i].nodeId = data[i].id
          arr[i].name = data[i].runName
          arr[i].procedefKey = data[i].procedefKey
          arr[i].params = JSON.parse(data[i].params)[0]
          if(data[i].runParam){
            if(JSON.parse(data[i].runParam) !='{}'){
              let name = arr[i].param.name
              let value = JSON.parse(data[i].runParam)[name]
              arr[i].param.value = value
              if(data[i].params){
                if(!JSON.parse(data[i].params)[0].value && arr[i].param.value){
                  arr[i].xlStatus= true
                }
              }
            }
          }else{
            arr.param = JSON.parse(data[i].params)[0]
          }
        }
        this.bpmnData = arr
        console.log(this.bpmnData)
      })
    }else{
      this.title = "新增"
      this.init()
    }
  },
  // 方法集合
  methods: {
    handleStatusChange(){
      console.log(this.bpmnForm.runStatus)
    },
    //表达式
    changeCron(val){
        this.bpmnForm.runCron = val
    },
    //强制el-input刷新
    onInput(){
        this.$forceUpdate();
    },
    //渲染流程图
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas;
      // 建模
      this.bpmnModeler = new CustomModeler({
        container: canvas,
        additionalModules: [
          {
            // 禁止编辑label
            labelEditingProvider: ["value", ""]
          }
        ]
      });
      this.createNewDiagram();

    },
    //渲染执行
    async createNewDiagram() {
      let that = this
      try {
        //编辑或默认视图
        if(that.bpmnDataFH.resourceName){
          var result = await this.bpmnModeler.importXML(that.bpmnDataFH.resourceName);
        }else{
          var result = await this.bpmnModeler.importXML(xmlStr);
        }

        // 上传
        const { warnings } = result;
        this.data = result.warnings

        this.success();
      } catch (err) {
        // console.log(err.message, err.warnings);
      }
    },
    success() {
      this.addBpmnListener();
      this.addModelerListener();
      this.addEventBusListener();
    },


    // 渲染组件
        addModelerListener() {
          const bpmnjs = this.bpmnModeler;
          const that = this;
          // 这里我是用了一个forEach给modeler上添加要绑定的事件
          const events = [
            "shape.added",
            "shape.move.end",
            "shape.removed",
            "connect.end",
            "connect.move"
          ];
          events.forEach(function(event) {
            that.bpmnModeler.on(event, e => {
              //console.log(1,event, e,that.data );
              var elementRegistry = bpmnjs.get("elementRegistry");
              var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
              if(event == "shape.added"){
                let data =  {
                  name: "",
                  nodeId:undefined,
                  param:{
                    name:undefined,
                    describe:undefined,
                    value:undefined,
                  },
                  xlStatus:false,
                  procedefKey:undefined
                }
                data.procedefKey = shape.id
                that.bpmnData.push(data)
                //console.log('新创建节点:',shape.id,"bpmnData数组:",that.bpmnData);
              }
              if(event == "shape.removed"){
                for(let i =0;i<that.bpmnData.length;i++){
                  if(shape.id == that.bpmnData[i].procedefKey){
                    that.bpmnData.splice(i,1)
                  }
                }
                console.log(that.bpmnData)
              }

            });
          });
        },

        // 下载
        async addBpmnListener() {
          const that = this;
          const downloadLink = this.$refs.saveXML;
          const downloadSvgLink = this.$refs.saveSvg;

          async function opscoffee() {
            try {
              const result = await that.saveSVG();
              const { svg } = result;

              that.setEncoded(downloadSvgLink, "ops-coffee.svg", svg);
            } catch (err) {
              console.log(err);
            }

            try {
              const result = await that.saveXML();
              const { xml } = result;

              that.setEncoded(downloadLink, "ops-coffee.bpmn", xml);
            } catch (err) {
              console.log(err);
            }
          }

          opscoffee();
          this.bpmnModeler.on("commandStack.changed", opscoffee);
        },
        async saveSVG(done) {
          try {
            const result = await this.bpmnModeler.saveSVG(done);
            return result;
          } catch (err) {
            console.log(err);
          }
        },
        async saveXML(done) {
          try {
            const result = await this.bpmnModeler.saveXML({ format: true }, done);
            this.xml = result
            // console.log(this.xml)
            return result;
          } catch (err) {
            console.log(err);
          }
        },
        setEncoded(link, name, data) {
          const encodedData = encodeURIComponent(data);

          if (data) {
            link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
            link.download = name;
          }
        },
        handlerRedo() {
          this.bpmnModeler.get("commandStack").redo();
        },
        handlerUndo() {
          this.bpmnModeler.get("commandStack").undo();
        },
        handlerZoom(radio) {
          const newScale = !radio ? 1.0 : this.scale + radio;
          this.bpmnModeler.get("canvas").zoom(newScale);

          this.scale = newScale;
        },
        addEventBusListener() {
          const that = this;
          const eventBus = this.bpmnModeler.get("eventBus");
          const modeling = this.bpmnModeler.get("modeling");
          const elementRegistry = this.bpmnModeler.get("elementRegistry");

          eventBus.on("element.click", function(e) {
            // console.log(
            //   "点击了element",
            //   e.element.businessObject.id,
            //   e.element.businessObject.$type,
            //   e.element.businessObject.name,that.data
            // );
            e.element.businessObject.nodeId = that.formData.nodeId
            // e.element.businessObject.order = that.formData.order
            // console.log(
            //   "点击了element",
            //   e,e.element.businessObject.name,
            //   e.element.businessObject.nodeId
            // );

            if (e.element.businessObject.$type == "bpmn:SequenceFlow") {
              const sourceRef = e.element.businessObject.sourceRef;

              if (sourceRef.$type == "bpmn:ExclusiveGateway") {
                var targetElement = elementRegistry.get(sourceRef.id);

                modeling.updateProperties(targetElement, {
                  default: e.element.businessObject
                });
              }
            }
          });
        },
    // 节点取消按钮
    cancel() {
        store.commit("STATUSCHANGE")
        setTimeout(()=>{
          this.serviceTask = false
        })

        // this.reset();
    },
    // 表单重置
    // reset() {
    //   this.resetForm("form");
    // },
    /** 节点提交按钮 */
    submitForm() {
      const that = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.msgSuccess("节点属性保存成功");
          this.loading = false
          //处理弹框无法关闭
            setTimeout(()=>{
              that.cancel()
            },1)
          this.formData.procedefKey = this.$store.state.bpmn.nodeInfo.businessObject.id
          let arr = this.bpmnData
          if(arr.length>0){
             let num = 0
            for(let i =0;i<arr.length;i++){
              if(this.formData.procedefKey == arr[i].procedefKey){
                arr[i] = JSON.parse(JSON.stringify(this.formData))
                //return
                num++
                break
              }
            }
            if(num = 0){
              console.log("bpmnData长度",this.bpmnData.length,"不同procedefKey")
              num +=1
              this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)))
            }
          }else{
            if(!this.formData.param.value && this.nodeStorage.value != this.formData.param.value){
              this.formData.xlStatus = true
            }
            this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)))
          }
        }else{
          this.nodeFail = false
        }
        console.log("节点提交",this.bpmnData)
      });
    },
    /** 流程图节点提交按钮(弹框展示) */
    submitBpmn(){
      if(this.bpmnDataFH.name){
        this.bpmnForm.procdefDescribe = this.bpmnDataFH.procdefDescribe
        this.bpmnForm.name = this.bpmnDataFH.name
        this.bpmnForm.runCron = this.bpmnDataFH.runCron
        this.bpmnForm.runStatus = this.bpmnDataFH.runStatus
      }
      this.openBpmn = true
    },
    /** 流程图提交数据 */
    submitBpnmForm(){
      this.$refs["form2"].validate(valid => {
        if (valid) {
            if(this.bpmnData.length <  1 ){
              this.msgError("流程图节点数据个数小于1");
            }else{
              let params = {}
              params.runStatus = this.bpmnForm.runStatus
              params.name = this.bpmnForm.name
              params.procdefDescribe = this.bpmnForm.procdefDescribe
              params.procedefKey = this.bpmnForm.procedefKey
              params.resourceName =  this.xml.xml;
              params.nodes = []
              params.runCron =undefined
              params.id = undefined
              // if(!this.bpmnForm.runCron){
              //   params.runStatus = false
              // }else{
              //   params.runStatus = true
              //   params.runCron = this.bpmnForm.runCron
              // }
              params.runCron = this.bpmnForm.runCron
              for(let i = 0; i<this.bpmnData.length;i++){
                params.nodes[i] = {}
                params.nodes[i].param = JSON.stringify(this.bpmnData[i].param)
                params.nodes[i].procedefKey = this.bpmnData[i].procedefKey
                params.nodes[i].nodeId = this.bpmnData[i].nodeId
                params.nodes[i].name = this.bpmnData[i].name
              }
              if(this.bpmnDataFH.id){
                params.id = this.bpmnDataFH.id
                updataBpmnZkReProcdef(params).then(res=>{
                  this.msgSuccess("流程图修改成功");
                  this.loading = false
                  this.openBpmn = false
                  this.$router.push('/Middleware/bpmn')
                })
              }else{ //新增
                for(let i=0;i<this.bpmnData.length;i++){
                  params.nodes[i] = {}
                  params.nodes[i].name = this.bpmnData[i].name
                  params.nodes[i].nodeId = this.bpmnData[i].nodeId
                  params.nodes[i].procedefKey = this.bpmnData[i].procedefKey
                  var nodesWrap = {}
                  nodesWrap.id = null
                  nodesWrap.deptIds = null
                  nodesWrap.createTime = null
                  let data = this.bpmnData[i].param
                  params.nodes[i].param = {}
                  if(data.name){
                    params.nodes[i].param[data.name] = data.value
                  }
                  params.nodes[i].param = JSON.stringify(params.nodes[i].param)
                }
                console.log(params)
                addBpmnZkReProcdef(params).then(res=>{
                  this.msgSuccess("流程图保存成功");
                  this.loading = false
                  this.openBpmn = false
                  this.$router.push('/Middleware/bpmn')
                })
              }
            }
        }
      });
    },
    /** 流程图取消按钮 */
    cancelBpnm(){
      this.openBpmn = false
    },
    /** 获取下拉数据 */
    getNodeTree(){
        getBpmnZkNodeTreeList().then(res =>{
            if(res.data){
              this.tree = res.data
              this.dataOptions = this.getTreeData(res.data);
            }
        })
    },
    /** 遍历数据 */
		getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        data[i]["label"] = data[i].name
        if(data[i].children){
          if (data[i].children.length < 1) {
            // children若为空数组，则不作操作
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }else{
          data[i].children = []
        }

      }
      return data;
    },
    //遍历给下拉输入框赋值
    getInput(val,data,bpmnData,nodeKey){
        console.log("节点id：",val,bpmnData)
        for (var i = 0; i < data.length; i++) {
          if(val == data[i].id){
            this.nodeStorage = JSON.parse(data[i].params)[0]
            if(bpmnData.length>0){
              for(let a=0;a<bpmnData.length;a++){
                if(nodeKey == bpmnData[a].procedefKey){
                  console.log("修改节点入循环：")
                  console.log(this.formData.param,bpmnData[a].param)
                  this.formData.xlStatus = bpmnData[a].xlStatus
                  if(this.formData.param != bpmnData[a].param){
                    this.formData.param = JSON.parse(data[i].params)[0]
                  }

                  if(this.formData.xlStatus){
                    this.status = true
                  }else{
                    this.status = false
                  }
                  return
                }else{
                  console.log("bpmnData大于1修新节点")
                  this.formData.xlStatus = bpmnData[a].xlStatus
                  this.formData.param = JSON.parse(data[i].params)[0]
                  if(!this.formData.param.value){
                    this.status = true
                  }else{
                    this.status = false
                  }

                }
              }
            }else{
              console.log("修新节点：下拉展示")
              this.formData.xlStatus = false
              this.formData.param = JSON.parse(data[i].params)[0]
              if(!this.formData.param.value){
                this.status = true
              }else{
                this.status = false
              }
              console.log(this.formData)
            }
            return
          }else{
            if (this.tree[i].children) {
              this.getInput(val,data[i].children,this.bpmnData,this.nodeKey);
              // children若为空数组，则不作操作
            }
          }
        }
    },
    //鼠标点击事件响应监听
    currDeptChange(val) {
      if(val){
        this.formData.nodeId = val
        this.getInput(val,this.tree,this.bpmnData,this.nodeKey)
      }else{
        this.status = false
      }
    }
  },
  // 计算属性
  computed: {
    task: {
      get: function() {
        const that = this;
        const element = this.$store.state.bpmn.nodeInfo;
        if (element.businessObject) {
          if (element.businessObject.$type === "bpmn:ServiceTask") {
              that.serviceTask = this.$store.state.bpmn.nodeVisible;
              console.log("watch:",that.bpmnData)
          }
        }

        return false;
      },
      set: function(val) {
        this.$store.state.bpmn.nodeVisible = val;
      }
    }
  },
  watch: {
    'formData.nodeId': 'currDeptChange',
    task(val) {},
    userTask(val) {
      this.$store.state.bpmn.nodeVisible = val;
      console.log(1)
    },
    serviceTask(val) {
      this.$store.state.bpmn.nodeVisible = val;
      const status = this.$store.state.bpmn.status
      const that = this;
      const element = this.$store.state.bpmn.nodeInfo;
      that.nodeKey = element.id
      console.log(element)
      if(status == false){
        console.log("弹框关闭")
      }else{
        console.log("弹框开启")
        if (element.businessObject) {
          let status = this.$store.state.bpmn.status
          //console.log(element.businessObject)
          if (element.businessObject.$type === "bpmn:ServiceTask") {
          //新增修改数据赋值
              let data = that.bpmnData
              //console.log("computed监听编辑框id",element.businessObject.id,"computed监听编辑框id时bpmnData数据",data)
              if(data.length>0){
                for(let i = 0; i<data.length;i++){
                  if(element.businessObject.id == data[i].procedefKey){
                    if(data[i].nodeId){
                      that.formData.nodeId = data[i].nodeId
                    }
                    that.formData.name = data[i].name
                    that.formData.param = data[i].param
                    that.formData.nodeId = data[i].nodeId
                    that.formData.procedefKey = data[i].procedefKey
                    console.log(that.formData.param)
                    //修改存在记录
                    if(data[i].xlStatus){
                      that.status = true
                    }
                    return
                  }else{
                    that.formData.name = undefined
                    that.formData.nodeId = undefined
                    that.status = false
                  }
                }
              }else{
                that.formData.name = undefined
                that.formData.nodeId = undefined
                that.status = false
              }
            that.serviceTask = this.$store.state.bpmn.nodeVisible;
          }
        }

      }
    },
    scriptTask(val) {
      this.$store.state.bpmn.nodeVisible = val;
      console.log(3)
    },
    sequenceFlow(val) {
      const element = this.$store.state.bpmn.nodeInfo;
      const modeling = this.bpmnModeler.get("modeling");
      modeling.updateLabel(element, val);
      console.log(4)
    },
    "formData.name": {
      handler(val, old) {
        const element = this.$store.state.bpmn.nodeInfo;
        const modeling = this.bpmnModeler.get("modeling");
        modeling.updateLabel(element, val);
      },
      deep: true
    },
  }
};
</script>

<style scoped>
.containers {
  background: white;
  overflow: auto;
  background-image: linear-gradient(
      90deg,
      rgba(220, 220, 220, 0.5) 6%,
      transparent 0
    ),
    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
  background-size: 12px 12px;
  width: 100%;
  height: 85vh;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.buttons {
  position: absolute;
  left: 80px;
  bottom: 20px;
}
.buttons li {
  display: inline-block;
  margin: 5px;
}
.buttons li a {
  color: #999;
  background: #eee;
  cursor: not-allowed;
  padding: 8px;
  border: 1px solid #ccc;
  text-decoration: none;
}
.buttons li a.active {
  color: #333;
  background: #fff;
  cursor: pointer;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}

</style>
<style>
.djs-palette{
  display: none !important;
}
</style>
