<template>
  <div class="containers" ref="content" v-loading = "vLoading">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
// 引入相关的依赖
import BpmnModeler from '../../public/js/bpmn-js/lib/NavigatedViewer'
import Modeling from 'bpmn-js/lib/features/modeling/Modeling'
export default {
  data () {
    return {
      // bpmn建模器
      bpmnModeler: null,
      canvas: null,
      bpmnXmlStr:'',
      procDefId: '',
     // accessUrl:'http://localhost:8080',
      vLoading:false,
    }
  },
  created () {


  },
  methods: {
      createNewDiagram () {
        let _this =this;
        _this.bpmnModeler.importXML(_this.bpmnXmlStr, function (err) {
          if (err) {
            console.error(err)
          }else{
            const canvas = _this.bpmnModeler.get('canvas');
            canvas.zoom('fit-viewport');
            _this.success();
          }
        })
      },
      // 增加事件监听器在Modeling里
      success() {
        const bpmnjs = this.bpmnModeler;
        const eventBus = bpmnjs.get('eventBus');
        const elementFactory = bpmnjs.get('elementFactory');
//        viewer没有这两个 所以不传了，
//        如果是Modeler,应该要引入且const modeling = new Modeling(eventBus,elementFactory,commandStack,bpmnRules);
//        const commandStack = bpmnjs.get('commandStack');
//        const bpmnRules = bpmnjs.get('bpmnRules');
        const modeling = new Modeling(eventBus,elementFactory);
        this.addBpmnListener(this, modeling);
      },
      addBpmnListener(_self,modeling) {
        const bpmnjs = this.bpmnModeler;
        const eventBus = bpmnjs.get('eventBus');
        const events = [
          'element.click',
          'element.dblclick'
        ];
        events.forEach(function(event) {
          eventBus.on(event, function(e) {
            //bpmn:Lane bpmn:SequenceFlow bpmn:Task bpmn:SequenceFlow bpmn:ExclusiveGateway
            //bpmn:Process
            //console.log(event + '   ' + JSON.stringify(e.element));
           if(e.element.type=='bpmn:Process'||e.element.type=='bpmn:Lane')
              return;
            var elementRegistry = bpmnjs.get('elementRegistry');
            var shape = elementRegistry.get(e.element.id);
            // 改变颜色
            modeling.setColor(shape,{ stroke:'RED' });

            // console.log(shape)
            // 我是通过console找到节点id和节点名称存储在哪里的
            //_self.nodeCode = shape.businessObject.id;
           // _self.nodeName = shape.businessObject.name;
           // console.log(_self.nodeCode)
           // console.log(_self.nodeName)
        });
      });
      }
  },
  mounted () {
    this.vLoading = true;

     // 获取到属性ref为“content”的dom节点
    this.container = this.$refs.content
    // 获取到属性ref为“canvas”的dom节点
    const canvas = this.$refs.canvas
    // 建模，官方文档这里讲的很详细
    let options = {
      container: canvas,
      additionalModules: [
        //汉字转换模块
      ],
      keyboard: {
        bindTo: window
      },
    };
    this.bpmnModeler = new BpmnModeler(options);
    // 下载画图
    let _this = this
    _this.procDefId = _this.$route.query.procDefId
    let openProcessUrl = this.$get_bpmn_manage_url() + '/procDefModelMgr/showProcessXml.do?' +
        'procDefId='+_this.procDefId;
    this.$axios.get(openProcessUrl).then(function(res){
          _this.bpmnXmlStr = res.data.bpmnXml
          _this.createNewDiagram(_this.bpmnModeler);
          _this.vLoading = false;
      }).catch(function(error){
          console.log(error);
          _this.vLoading = false;
      });
    /** let imgs= document.getElementsByClassName("bjs-powered-by");
    for(let i = 0;i<imgs.length;i++){
      imgs[i].style.display = 'none';
    }**/
  }
}
</script>

<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
  @import '../../node_modules/bpmn-js/dist/assets/diagram-js.css';
  @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
   .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      fill: green !important; /* color elements as green */
    }

    .highlight-overlay {
      background-color: green; /* color elements as green */
      opacity: 0.4;
      pointer-events: none; /* no pointer events, allows clicking through onto the element */
      border-radius: 10px;
    }
    .canvas{
      width:100%;
      height: calc(100% - 48px);
    }
</style>
