<template>
  <div class="app-container">
    <div class="containers">
      <div class="canvas" ref="canvas"></div>
      <ul class="buttons buttons-left">
        <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>
      </ul>
      <ul class="buttons buttons-right">

        <li>
          <el-button
            type="primary"
            @click="submitBpmn"
            v-if="!loading"
            title="提交场景配置"
            size="mini"
            >提 交</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" v-if="checkSatus">
            <el-form-item label="执行">
              <el-tree
                class="tree-border"
                :data="dataOptions"
                show-checkbox
                ref="menu"
                node-key="id"
                :default-expanded-keys="checked"
                :check-strictly="true"
                empty-text="加载中，请稍后"
                @check="currentChecked"
              ></el-tree>
              <!-- :props="defaultProps" -->
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="status">
            <el-form-item :label="formData.describe1" prop="blurry">
              <el-input
                v-model.trim="formData.blurry"
                :placeholder="'请输入' + formData.describe1"
                @input="onInput"
                show-word-limit
              />
            </el-form-item>
            <!-- <el-form-item :label="formData.describe2" prop="deptName">
              <el-select
                v-model="formData.deptName"
                :placeholder="'请输入' + formData.describe2"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.name"
                />
              </el-select>
            </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" plain>取 消</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">
              <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"> </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 "@/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 {
  getBpmnZkNodeTreeList,
  getBpmnZkReProcdefList,
  addBpmnZkReProcdef,
  updataBpmnZkReProcdef,
  getBpmnZkReNodeProcdefListByPorcedfId,
} from "@/api/business/Middleware/bpmn";
import store from "../../../../store";
export default {
  name: "",
  components: { Treeselect, cron },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
      scale: 1,
      userTask: false,
      serviceTask: false,
      scriptTask: false,
      sequenceFlow: "",
      data: undefined,
      loading: false,
      xml: undefined,
      serviceTaskStatus: false,
      //选中展开
      checked: [],
      checkSatus:false,

      //返回节点计数器
      FHdnum:0,
      //表达式
      showCronBox: false,
      showClo: false,
      //逻辑参数
      //当前节点参数
      formData: {
        runName: "",
        nodes: [],
        //暂时(人员同步)
        describe1: undefined,
        // describe2: undefined,
        blurry: undefined,
        deptName: undefined,
        xlStatus: undefined,
        procedefKey: undefined, //流程图节点canvas节点id
      },
      //节点树选项
      dataOptions: [],
      // 菜单列表
      //menuOptions: [],

      defaultProps: {
        children: "children",
        label: "label",
      },
      // 节点表单校验
      rules: {
        name: [
          { required: true, message: "节点名称不能为空", trigger: "blur" },
        ],
        nodeId: [
          {
            required: true,
            message: "场景不能为空",
            trigger: ["blur", "change"],
          },
        ],
        // deptName: [
        //   {
        //     required: true,
        //     message: "部门不能为空",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
      deptOptions: [{ name: "物业" }, { name: "非物业" }],
      //最终提交框状态
      openBpmn: false,
      //最终提交框
      bpmnForm: {
        //流程图弹框提交信息
        name: undefined,
        procdefDescribe: undefined,
        runCron: "",
        runStatus: false,
      },
      //最终待提交数据，
      bpmnData: [],
      //表达式状态框
      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'] }
        // ],
      },

      //checkedKeys:[],//流程图返回节点
      //流程图返回一级信息  =>修改
      bpmnDataFH: [],

      status: false,
      //下拉数据集
      tree: [],
      //待确认
      value: undefined, //节点value有值时缓存节点参数

      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];
        this.init();
      });
      //流程图关联节点信息查询
      getBpmnZkReNodeProcdefListByPorcedfId({
        procdefId: this.$route.query.id,
      }).then((res) => {
        /** 获取节点 */
        let data = [];
        for (let i = 0; i < res.data.length; i++) {
          if(JSON.stringify(data) == "[]"){
            data[i] = {
              name:undefined,
              runName:undefined,
              describe1:undefined,
              // describe2:undefined,
              blurry:undefined,
              deptName:undefined,
              procedefKey:undefined,
              nodes:[]
            }
            data[i].name = res.data[i].name
            data[i].runName = res.data[i].runName
            data[i].procedefKey = res.data[i].procedefKey
            if(res.data[i].id == "1"){
              data[i].describe1 = JSON.parse(res.data[i].params)[0].describe
              // data[i].describe2 = JSON.parse(res.data[i].params)[1].describe
              if(res.data[i].runParam){
                if(JSON.parse(res.data[i].runParam).blurry){
                  data[i].blurry = JSON.parse(res.data[i].runParam).blurry
                }
                if(JSON.parse(res.data[i].runParam).deptName){
                  data[i].deptName = JSON.parse(res.data[i].runParam).deptName
                }
              }
            }
            data[i].nodes.push(res.data[i])
          }else{
            for(let a = 0;a<data.length;a++){
              if(res.data[i].procedefKey == data[a].procedefKey){
                data[a].nodes.push(res.data[i])
                this.FHdnum  = 1
              }
            }
            if(this.FHdnum == 0){
              let arr =  {
                  runName:undefined,
                  describe1:undefined,
                  // describe2:undefined,
                  blurry:undefined,
                  deptName:undefined,
                  procedefKey:undefined,
                  nodes:[]
                }
                arr.runName = res.data[i].runName
                arr.procedefKey = res.data[i].procedefKey
                if(res.data[i].id == "1"){
                  arr.describe1 = JSON.parse(res.data[i].params)[0].describe
                  // arr.describe2 = JSON.parse(res.data[i].params)[1].describe
                  if(res.data[i].runParam){
                    if(JSON.parse(res.data[i].runParam).blurry){
                      arr.blurry = JSON.parse(res.data[i].runParam).blurry
                    }
                    if(JSON.parse(res.data[i].runParam).deptName){
                      arr.deptName = JSON.parse(res.data[i].runParam).deptName
                    }
                  }
                }
                arr.nodes.push(res.data[i])
                data.push(arr)
                this.FHdnum = 0
            }
          }
        }
        this.bpmnData = data;
        console.log(this.bpmnData)
      });
    } else {
      this.title = "新增";
      this.init();
    }
  },
  // 方法集合
  methods: {
    //获取选中节点
    currentChecked(nodeObj, SelectedObj) {
      //条件显示
      if(JSON.stringify(SelectedObj.checkedKeys) != "[]"){
        for (let i = 0; i < SelectedObj.checkedKeys.length; i++) {
          if (SelectedObj.checkedKeys[i] == 1) {
            this.status = true
            this.formData.describe1 = JSON.parse(
              SelectedObj.checkedNodes[i].params
            )[0].describe;
            // this.formData.describe2 = JSON.parse(
            //   SelectedObj.checkedNodes[i].params
            // )[1].describe;
            break;
          }else{
            this.status = false
          }
        }
      }else{
        this.status = false
      }
      //获取节点
      let arr = [];
      for (let i = 0; i < SelectedObj.checkedKeys.length; i++) {
        //节点编辑
        let data = JSON.parse(JSON.stringify(SelectedObj.checkedNodes[i]));
        data.procedefKey = this.$store.state.bpmn.nodeInfo.id;
        delete data.children;
        arr.push(data);
        this.formData.nodes = arr;
      }
    },
    //表达式
    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 =
              {
                runName: undefined,
                name:undefined,
                nodes: [],
                describe1: undefined,
                // describe2: undefined,
                blurry: undefined,
                deptName: undefined,
                xlStatus: false,
                procedefKey: undefined, //流程图节点canvas节点id
            }
            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.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() {
      let that = this
      store.commit("STATUSCHANGE");
      setTimeout(() => {
        that.formData = {}
        that.checked = []
        that.serviceTask = false;
      });
      console.log(that.formData)
    },
    /** 节点提交按钮 */
    submitForm() {
      const that = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.formData.procedefKey = this.$store.state.bpmn.nodeInfo.id;
          this.formData.runName = this.formData.name;
          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));
                num++;
                break
              }
            }
            // 不同节点
            if (num == 0) {
              this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)));
              num++;
            }
          } else {
            this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)));
          }
          this.loading = false;
          //处理弹框无法关闭
          setTimeout(() => {
            that.cancel();
          }, 1);
          this.msgSuccess("节点属性保存成功");
        }
        console.log("节点提交111", 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("场景管理节点数据个数不能为零");
          } else {
            let arr = this.bpmnData
            let nodeRepeat = []
            for (let i = 0; i < arr.length; i++) {
              for (let a = 0; a < arr[i].nodes.length; a++) {
                if(nodeRepeat.indexOf(arr[i].nodes[a].id)>-1){
                  this.msgError("节点信息不能重复");
                  return
                }else{
                  nodeRepeat.push(arr[i].nodes[a].id)
                }
              }
            }
            console.log(nodeRepeat,arr)
            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;
            params.runCron = this.bpmnForm.runCron;
            for (let i = 0; i < arr.length; i++) {
              for (let a = 0; a < arr[i].nodes.length; a++) {
                let node = {}
                console.log(arr[i].nodes[a])
                node.name = arr[i].runName;
                node.procedefKey = arr[i].procedefKey;
                node.nodeId = arr[i].nodes[a].id;
                node.param = {};
                let data = JSON.parse(arr[i].nodes[a].params);
                for (let b = 0; b < data.length; b++) {
                  //人员
                  if (data[b].name == "blurry") {
                    node.param.blurry = arr[i].blurry;
                  } else if (data[b].name === "deptName") {
                    node.param.deptName = arr[i].deptName;
                  }
                }
                //门禁
                if (data.name == "doorVOS") {
                    for(let b =0;b<data.value.length;b++){
                      node.param.doorVOS = data.value[b];
                    }
                  }
                node.param = JSON.stringify(node.param)
                params.nodes.push(node)
              }
            }
            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 {
              //新增
              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].params) {
          data[i].disabled = true;
        }
        if (data[i].children) {
          if (data[i].children.length < 1) {
            // children若为空数组，则不作操作
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        } else {
          data[i].children = [];
        }
      }
      return data;
    },
  },
  // 计算属性
  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;
          }
        }
        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;
    },
    serviceTask(val) {
      //弹框监听
      this.$store.state.bpmn.nodeVisible = val;
      console.log(this.$store.state.bpmn,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("弹框关闭",this.$store.state.bpmn.nodeInfo.id);
        that.checkSatus = false
      } else {
        console.log("弹框开启",this.$store.state.bpmn.nodeInfo.id);
        that.checkSatus = true
      }
      if (element.businessObject) {
          if (element.businessObject.$type === "bpmn:ServiceTask") {
            //新增修改数据赋值
            let data = this.bpmnData;
            console.log(data)
            let checkedKeys = [];
            if (data.length > 0) {
              that.formData.runName = undefined;
              that.formData.name = undefined;
              that.formData = {}
              that.status = false
              that.checked = []
              checkedKeys.forEach((v) => {
                that.$nextTick(() => {
                  that.$refs.menu.setChecked(v, true, false);
                  that.checked = checkedKeys;
                });
              });
              for (let i = 0; i < data.length; i++) {
                for (let a = 0; a < data[i].nodes.length; a++) {
                  if (data[i].nodes[0].procedefKey == that.$store.state.bpmn.nodeInfo.id) {
                    //多选框赋值
                      if(data[i].runName){
                        // 修改
                        if(that.checkSatus){
                          if(-1 == checkedKeys.indexOf(data[i].nodes[a].id)){
                            checkedKeys.push(data[i].nodes[a].id);
                          }
                          checkedKeys.forEach((v) => {
                            that.$nextTick(() => {
                              that.$refs.menu.setChecked(v, true, false);
                              that.checked = checkedKeys;
                            });
                          });
                        }
                      }
                    //多选框外部参数
                      that.formData.runName = data[i].runName;
                      that.formData.name = data[i].runName;
                      that.formData.nodes = data[i].nodes
                      that.formData.procedefKey = data[i].procedefKey;
                      if (data[i].nodes[a].id == "1") {
                        that.formData.describe1 = data[i].describe1
                        // that.formData.describe2 = data[i].describe2
                        if (data[i].blurry) {
                            that.formData.blurry = data[i].blurry
                            that.status = true
                        }
                        if (data[i].deptName) {
                            that.formData.deptName = data[i].deptName
                            that.status = true
                        }
                      }
                  }
                }
              }
            }
          } else {
            that.formData.nodes = [];
          }
          that.serviceTask = that.$store.state.bpmn.nodeVisible;
        }

      console.log(that.bpmnData,that.formData,that.checked)
    },
    scriptTask(val) {
      this.$store.state.bpmn.nodeVisible = val;
    },
    sequenceFlow(val) {
      const element = this.$store.state.bpmn.nodeInfo;
      const modeling = this.bpmnModeler.get("modeling");
      modeling.updateLabel(element, val);
    },
    "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-left {
  position: absolute;
  left: -30px;
}
.buttons-right {
  position: absolute;
  right: 0px !important;
}
.buttons {
  bottom: 0px;
}
.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;
}
.el-tree-node__content {
  padding: 17px 0 !important;
}
.el-tree-node__children {
  margin-left: 15px;
}
.tree-border {
  overflow:auto;
  max-height:400px !important;
}
</style>
