<template>
  <div class="containers">
    <!-- 面板 -->
      <!-- <div class="canvas" ref="canvas"></div>
      <ul class="buttons">
        <li>
          <a href="javascript:" @click="$refs.refFile.click()">加载本地BPMN文件</a>
          <input type="file" id="files" ref="refFile" style="display: none" @change="loadXML" />
        </li>
        <li>
          <a href="javascript:" @click="saveXML" title="保存为bpmn">保存为BPMN文件</a>
        </li>
        <li>
          <a href="javascript:" @click="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> -->
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "../mock/xmlStr";
import { CustomModeler } from "../components/customBpmn";

export default {
  name: "ops-coffee",
  mounted() {
    this.init();
  },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
      xmlStr: xmlStr,
      scale: 1
    };
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        keyboard: { //快捷键
          bindTo: window
        }
      });
      this.createNewDiagram();
    },
    createNewDiagram() { //流程图渲染
      try {
        const result = this.bpmnModeler.importXML(xmlStr);
        const { warnings } = result;
        console.log(warnings);
        this.success();
        // 在createNewDiagram渲染完成后调用success方法，success中添加了
        // addEventBusListener监听方法，然后通过eventBus.on来实现对事件的监听，例如这里监听了element.click点击事件
      } catch (err) {
        console.log(err.message, err.warnings);
      }
      
    },
    success() { //调用事件
      this.addEventBusListener();
    },
    addEventBusListener() {// 事件（eventBus）
      const that = this;
      const eventBus = this.bpmnModeler.get("eventBus");

      eventBus.on("element.click", function(e) {
        // console.log("eventBusListener", e);
        that.elementClick(e);
      });
    },
    elementClick(e) { //节点判断
      if (e.element.businessObject.$type === "bpmn:UserTask") {
        console.log(
          "这是一个用户节点",
          e.element.businessObject.id,
          e.element.businessObject.$type,
          e.element.businessObject.name
        );
      }
    },
    loadXML() {//上传bpmn文件
      const that = this;
      const file = this.$refs.refFile.files[0];

      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function() {
        that.xmlStr = this.result;
        that.createNewDiagram();
      };
    },
    async saveXML() { //bpmn保存
      try {
        const result = await this.bpmnModeler.saveXML({ format: true });
        const { xml } = result;

        var xmlBlob = new Blob([xml], {
          type: "application/bpmn20-xml;charset=UTF-8,"
        });

        var downloadLink = document.createElement("a");
        downloadLink.download = "ops-coffee-bpmn.bpmn";
        downloadLink.innerHTML = "Get BPMN SVG";
        downloadLink.href = window.URL.createObjectURL(xmlBlob);
        downloadLink.onclick = function(event) {
          document.body.removeChild(event.target);
        };
        downloadLink.style.visibility = "hidden";
        document.body.appendChild(downloadLink);
        downloadLink.click();
      } catch (err) {
        console.log(err);
      }
    },
    async saveSVG() { //bpmn导出svg
      try {
        const result = await this.bpmnModeler.saveSVG();
        const { svg } = result;

        var svgBlob = new Blob([svg], {
          type: "image/svg+xml"
        });

        var downloadLink = document.createElement("a");
        downloadLink.download = "ops-coffee-bpmn.svg";
        downloadLink.innerHTML = "Get BPMN SVG";
        downloadLink.href = window.URL.createObjectURL(svgBlob);
        downloadLink.onclick = function(event) {
          document.body.removeChild(event.target);
        };
        downloadLink.style.visibility = "hidden";
        document.body.appendChild(downloadLink);
        downloadLink.click();
      } catch (err) {
        console.log(err);
      }
    },
    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;
    }
  }
};
</script>

<style scoped>
/* .containers {
  width: 100%;
  height: calc(100vh - 82px);
} */
/* 加网格样式 */
.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: calc(100vh - 82px);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.canvas {
  width: 100%;
  height: 100%;
}
/* 底部控件 */
  .buttons {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
  .buttons li {
    display: inline-block;
    margin: 5px;
  }
  .buttons li a {
    color: #333;
    background: #fff;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #ccc;
    text-decoration: none;
  }



</style>
