<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="toolbar">
          <el-collapse  >
            <el-collapse-item title="启动事件" name="1">
                <div class="flowable-wrap">
                  <vuedraggable :sort= "false" @start="onStart" @end="onEnd">
                    <div class="flowable-div">空启动事件</div>
                    <div class="flowable-div">定时启动事件</div>
                    <div class="flowable-div">信号启动事件</div>
                    <div class="flowable-div">消息启动事件</div>
                    <div class="flowable-div">异常启动事件</div>
                    <div class="flowable-div">注册开始事件</div>
                    <div class="flowable-div">升级开始事件</div>
                    <div class="flowable-div">条件启动事件</div>
                  </vuedraggable>
                </div>
            </el-collapse-item>
            <el-collapse-item title="活动" name="2">
              <div class="flowable-wrap">
                <div >用户任务</div>
                <div >服务任务</div>
                <div >脚本任务</div>
                <div >业务规则任务</div>
                <div >接收任务</div>
                <div >手动任务</div>
                <div >邮件任务</div>
                <div >驼峰任务</div>
                <div >Http任务</div>
                <div >Mule任务</div>
                <div >事件发送任务</div>
                <div >Shell任务</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="结构" name="3">
              <div class="flowable-wrap">
                <div >子流程</div>
                <div >折叠子流程</div>
                <div >事件子流程</div>
                <div >调研活动</div>
                <div >自组网子流程</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="网关" name="4">
              <div class="flowable-wrap">
                <div >排他网关</div>
                <div >并行网关</div>
                <div >包容网关</div>
                <div >事件网关</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="边界事件" name="5">
              <div class="flowable-wrap">
                <div>边界错误事件</div>
                <div>边界升级事件</div>
                <div>边界计时事件</div>
                <div>边界信号事件</div>
                <div>边界消息事件</div>
                <div>边界取消事件</div>
                <div>边界注册事件</div>
                <div>边界条件事件</div>
                <div>边界补偿事件</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="中间捕获事件" name="6">
              <div class="flowable-wrap">
                <div>中间计时捕获事件</div>
                <div>中间信号捕获事件</div>
                <div>中间消息捕获事件</div>
                <div>中间条件捕获事件</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="中间抛出事件" name="7">
              <div class="flowable-wrap">
                <div>中间空抛出事件</div>
                <div>中间信号抛出事件</div>
                <div>中间升级抛出事件</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="结束事件" name="8">
              <div class="flowable-wrap">
                <div>结束事件</div>
                <div>结束错误事件</div>
                <div>结束升级事件</div>
                <div>结束取消事件</div>
                <div>结束终止事件</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="泳道" name="9">
              <div class="flowable-wrap">
                <div>池</div>
                <div>泳道</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="工件" name="10">
              <div class="flowable-wrap">
                <div>文本注释</div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="20">
        <input v-model="v_text" type="text" placeholder="请输入对应的城市名称......" />
        <button @click="createNewNode(v_graph,v_parent)">生成节点</button>
        <button @click="packageXml(v_graph)">获得节点数据</button>
        <button>保存数据</button>
        <div id="graphContainer"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import mxgraph from './index.js'
import vuedraggable from 'vuedraggable'

const { mxGraph, mxClient, mxCodec, mxUtils/*, mxDefaultKeyHandler, mxEditor*/ } = mxgraph

export default {
  name: 'Designer',
  components: {
    vuedraggable
  },
  data: function() {
    return {
      bpmnModeler: null, // bpmn 建模器
      container: null,
      canvas: null,
      v_graph: '',
      v_parent: '',
      v_encoder: '',
      v_text: 'test',
      v_id: 0
    }
  },
  methods: {
    mxGraph() {
      if (!mxClient.isBrowserSupported()) {
        // 判断是否支持mxgraph
        mxUtils.error('Browser is not supported!', 200, false)
      } else {
        // 再容器中创建图表
        const container = document.getElementById('graphContainer')
        const MxGraph = mxGraph
        const MxCodec = mxCodec
        var graph = new MxGraph(container)
        // 生成 Hello world!
        var parent = graph.getDefaultParent()
        // graph.getModel().beginUpdate()
        this.v_graph = graph
        this.v_parent = parent
        graph.setCellsResizable(false)
        graph.setTooltips(true)
        try {
          // var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 200, 80, 30)
          // var v2 = graph.insertVertex(parent, null, 'World', 200, 150, 80, 30)
          // var v3 = graph.insertVertex(parent, null, 'everyBody!', 300, 350, 60, 60)
          // graph.insertEdge(parent, null, '', v1, v2)
          // graph.insertEdge(parent, null, '', v2, v3)
          // graph.insertEdge(parent, null, '', v1, v3)
        } finally {
          // graph.getModel().endUpdate()
        }
        // 打包XML文件
        const encoder = new MxCodec()
        const xx = encoder.encode(graph.getModel())
        // 保存到getXml参数中
        this.getXml = mxUtils.getXml(xx)
      }
    },
    /**
     * 生成节点函数
     */
    createNewNode(graph, parent) {
      console.info(graph)
      const text = this.v_text
      graph.insertVertex(
        parent,
        1,
        text,
        0,
        0,
        150,
        40,
        'fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=15;image:1.jpeg'
      )
      this.v_text = ''
    },
    /**
     * 获得流程图数据 xml
     * @param graph
     */
    packageXml(graph) {
      const MxCodec = mxCodec
      // 打包XML文件
      const encoder = new MxCodec()
      const xx = encoder.encode(graph.getModel())
      // 保存到getXml参数中
      this.getXml = mxUtils.getXml(xx)
      console.info(this.getXml)
    },
    onStart() {},
    onEnd() {
      this.createNewNode(this.v_graph, this.v_parent)
    }
  },
  mounted: function() {
    this.mxGraph()
  }
}
</script>

<style scoped>
  .container {
    background: #e4eeee;
    background-image: linear-gradient(white 2px,transparent 0),
    linear-gradient(90deg, white 2px,transparent 0),
    linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
    linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
    background-size:75px 75px,75px 75px,15px 15px,15px 15px;
  }
  .canvas {
    width: 100%;
    height: 100%;
  }
  .toolbar{
    background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
    background-size: 10px 10px;
    height: calc(88vh);
  }
  .flowable-wrap{
    text-align: center;
    background-color: #d4d4f5;
    overflow: hidden;
  }
  .flowable-div {
    width: 31%;
    padding-bottom: 28%;
    margin: 1%;
    border-radius: 10%;
    float: left;
    background-color: #e8e8ee;
  }

</style>
