<template>
    <div class="_box">
        <div class="workFlowNature">
            <el-form
                :model="workFlow"
                :rules="dataRules"
                ref="workFlow"
            >
                <el-form-item
                    prop="id"
                    class="workForm"
                    label="流程ID"
                    label-width="60px"
                >
                    <el-input
                        v-model="workFlow.id"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="name"
                    class="workForm"
                    label="流程名称"
                    label-width="70px"
                >
                    <el-input
                        v-model="workFlow.name"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    class="workForm"
                    style="text-align: left;"
                >
                    <el-button
                        type="primary"
                        style="margin-left: 10px;"
                        size="mini"
                        @click="getJson"
                        icon="el-icon-folder"
                        v-if="design !== 'show'"
                    >保存</el-button>
                </el-form-item>
                <!-- <el-form-item prop="file" class="workForm" label="选择文件">
                    <el-input v-model="workFlow.file" type="file" size="small"></el-input>
                </el-form-item> -->
                <div style="float: right;padding-right: 20px;">
                    <el-button
                        type="primary"
                        size="mini"
                        v-if="design"
                        @click="goBack"
                        icon="el-icon-arrow-left"
                    >返回</el-button>
                </div>
            </el-form>
        </div>
        <div
            id="workFlow"
            @onItemFocus="clickItem"
        ></div>
        <div
            class="nodeProperties"
            :style="'width:' + this.rightWidth + 'px;height:' + this.property.height + 'px'"
        >
            <el-form
                :model="form"
                ref="nodeForm"
                :rules="itemRules"
                label-width="45px"
            >
                <div class="title">节点属性</div>
                <el-form-item
                    prop="id"
                    label="ID"
                >
                    <el-input
                        v-model="form.id"
                        :disabled="true"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="name"
                    label="名称"
                >
                    <el-input
                        v-model="form.name"
                        :disabled="design === 'show'"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="type"
                    label="类型"
                >
                    <el-input
                        v-model="form.type"
                        :disabled="true"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="model"
                    label="Model"
                >
                    <el-input
                        v-model="form.model"
                        :disabled="true"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="rules"
                    label="条件"
                    v-if="form.model === 'line'"
                >
                    <el-input
                        v-model="form.rules"
                        :disabled="design === 'show'"
                        size="small"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item prop="time" label="审核时长" v-if="form.type === 'task' && form.model !== 'line'">
                    <el-input v-model="form.time" size="small" placeholder="单位：小时"></el-input>
                </el-form-item> -->
                <el-form-item
                    prop="group"
                    label="审核角色"
                    v-if="form.type === 'task' && form.model !== 'line'"
                >
                    <el-select
                        v-model="form.group"
                        filterable
                        placeholder="请选择"
                        size="small"
                        :disabled="design === 'show'"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="from"
                    label="From"
                    v-if="form.model === 'line'"
                >
                    <el-input
                        v-model="form.from"
                        :disabled="true"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="to"
                    label="To"
                    v-if="form.model === 'line'"
                >
                    <el-input
                        v-model="form.to"
                        :disabled="true"
                        size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    style="text-align:center"
                    v-if="form.id && design !== 'show'"
                >
                    <el-button
                        type="primary"
                        @click="saveProperties"
                    >保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="saveButton">
            <el-button
                type="primary"
                @click="getJson"
                icon="el-icon-folder"
                v-if="design !== 'show'"
            >保存</el-button>
            <el-button
                type="primary"
                v-if="design"
                @click="goBack"
                icon="el-icon-arrow-left"
            > 返回 </el-button>
        </div> -->
    </div>
</template>

<script>
import store from '@/store/index.js';
import { checkChar, checkCharLength, checkCharNoChinese } from '@/utils/validator.js';
export default {
    name: 'workFlow',
    data () {
        return {
            demo: '',
            store,
            rightWidth: 200,
            property: {
                width: 1200,
                height: 550,
                toolBtns: ['start round mix', 'end round', 'task', 'plug'],
                haveHead: true,
                headLabel: true,
                headBtns: ['undo', 'redo'], // 如果haveHead=true，则定义HEAD区的按钮
                haveTool: true,
                haveGroup: false,
                useOperStack: true
            },
            remark: {
                cursor: '选择指针',
                direct: '结点连线',
                start: '入口结点',
                'end': '结束结点',
                'task': '任务结点',
                node: '自动结点',
                chat: '决策结点',
                state: '状态结点',
                plug: '附加插件',
                fork: '分支结点',
                'join': '联合结点',
                'complex': '复合结点'
            },
            jsondata: {
                'title': '',
                'id': '',
                'nodes': {},
                'lines': {},
                'initNum': 10
            },
            form: {
                id: '',
                name: '',
                type: '',
                model: '',
                rules: '',
                group: '',
                from: '',
                time: '',
                to: '',
                projName: ''
            },
            workFlow: {
                id: '',
                name: ''
            },
            dataRules: {
                name: [
                    { required: true, message: '请输入流程名称', trigger: 'blur' },
                    { validator: checkChar, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                id: [
                    { required: true, message: '请输入流程ID', trigger: 'blur' },
                    { validator: checkCharNoChinese, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ]
            },
            itemRules: {
                name: [
                    { validator: checkChar, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                group: [
                    { required: true, message: '请选择角色', trigger: 'blur' }
                ]
            },
            options: [],
            design: '',
            dataItem: {}
        }
    },
    mounted () {
        this.design = this.$route.params ? this.$route.params.type : '';
        if (this.design && this.design !== 'add') {
            this.dataItem = this.$route.params.data;
            this.getProcessXml();
            if (this.design === 'show') {
                this.property.haveTool = false;
            }
        } else if (!this.design || this.design === 'add') {
            this.initProcess();
        }
        this.getRoles();
    },
    methods: {
        getJson () {
            // this.demo.exportDataToXML(this.jsondata)
            console.log(this.demo.exportDataToXML(this.jsondata))
            this.addWorkFlow(this.demo.exportDataToXML(this.jsondata))
        },
        getHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        getWidth (dom) {
            return window.innerWidth - dom.offsetLeft;
        },
        /**
         * 节点/连线 点击
         */
        clickItem (id, model) {
            this.$nextTick(() => {
                var obj;
                this.form.model = model;
                this.form.id = id;
                if (model === 'line') {
                    obj = this.demo.$lineData[id];
                    this.form.type = obj.type;
                    this.form.name = obj.name;
                    this.form.left = '';
                    this.form.top = '';
                    this.form.width = '';
                    this.form.height = '';
                    this.form.from = obj.from;
                    this.form.to = obj.to;
                    this.form.rules = this.demo.$lineData[id].rules;
                    if (!this.jsondata.lines[id]) {
                        this.jsondata.lines[id] = {};
                        for (let item in this.form) {
                            this.jsondata.lines[id][item] = this.form[item]
                        }
                    }
                } else if (model === 'node') {
                    obj = this.demo.$nodeData[id];
                    this.form.name = obj.name;
                    this.form.type = obj.type;
                    this.form.left = obj.left;
                    this.form.top = obj.top;
                    this.form.width = obj.width;
                    this.form.height = obj.height;
                    this.form.rules = this.jsondata.nodes[id] ? this.jsondata.nodes[id].rules : '';
                    this.form.group = obj.type === 'task' && this.jsondata.nodes[id] ? this.jsondata.nodes[id].group : '';
                    this.form.from = '';
                    this.form.to = '';
                    if (!this.jsondata.nodes[id]) {
                        this.jsondata.nodes[id] = {};
                        for (let item in this.form) {
                            this.jsondata.nodes[id][item] = this.form[item]
                        }
                    }
                }
            })
        },
        initProcess () {
            let that = this;
            this.$nextTick(() => {
                this.property.width = this.getWidth(this.$refs['workFlow'].$el) * 0.8;
                this.rightWidth = window.innerWidth - this.property.width - 60;
                this.demo = $.createGooFlow($('#workFlow'), this.property);
                this.demo.setNodeRemarks(this.remark);
                this.demo.loadData(this.jsondata);
                this.demo.onItemFocus = function (id, model) {
                    that.clickItem(id, model)
                }
                this.demo.onItemBlur = function (id, model) {
                    for (let item in this.form) {
                        this.form[item] = ''
                    }
                    return true;
                };
                this.demo.onItemRename = function (id, name, type) {
                    if (type === 'node') {
                        that.jsondata.nodes[id].name = name;
                        that.form.name = name;
                    } else {
                        that.jsondata.lines[id].name = name;
                        that.form.name = name;
                    }
                }
                // this.demo.onItemAdd = function (id, type,json) {
                //     if (type === 'node'){
                //         json.rules = '';
                //         json.group = '';
                //         that.jsondata.nodes[id] = json;
                //     } else {
                //         json.rules = '';
                //         that.jsondata.lines[id] = json;
                //     }
                // }
            })
        },
        /**
         * 修改节点/连线 信息
         */
        saveProperties () {
            this.$refs['nodeForm'].validate((res) => {
                if (res) {
                    let type = this.form.model === 'line' ? 'lines' : 'nodes'
                    for (let item in this.form) {
                        this.jsondata[type][this.form.id][item] = this.form[item];
                    }
                    if (this.form.model === 'line') {
                        this.demo.$lineData[this.form.id].name = this.form.name;
                        this.demo.$lineData[this.form.id].rules = this.form.rules;
                    }
                    this.demo.$setName(this.form.id, this.form.name, this.form.model)
                }
            })
        },
        /**
         * XML 转换JSON
         */
        xmlToJson (xml) {
            xml = xml || '';
            // xml = '<?xml version="1.0" encoding="UTF-8"?><definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:tns="http://www.activiti.org/test" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="m1515296568080" exporter="camunda modeler" exporterVersion="2.7.1" name="" targetNamespace="http://www.activiti.org/test">  <process id="Vacationprocess" name="请假流程" isExecutable="true">    <startEvent id="startevent1" name="Start">      <outgoing>flow1</outgoing>    </startEvent>    <userTask id="usertask1" activiti:candidateGroups="empGroup" activiti:exclusive="true" name="填写申请">      <incoming>flow1</incoming>      <outgoing>flow2</outgoing>    </userTask>    <exclusiveGateway id="exclusivegateway1" name="Exclusive Gateway">      <incoming>flow2</incoming>      <outgoing>flow3</outgoing>      <outgoing>flow5</outgoing>    </exclusiveGateway>    <userTask id="usertask2" activiti:candidateGroups="manageGroup" activiti:exclusive="true" name="总监审批">      <incoming>flow3</incoming>      <outgoing>flow4</outgoing>    </userTask>    <userTask id="usertask3" activiti:candidateGroups="dirGroup" activiti:exclusive="true" name="经理审批">      <incoming>flow5</incoming>      <outgoing>flow6</outgoing>    </userTask>    <endEvent id="endevent1" name="End">      <incoming>flow4</incoming>      <incoming>flow6</incoming>    </endEvent>    <sequenceFlow id="flow1" sourceRef="startevent1" targetRef="usertask1"/>    <sequenceFlow id="flow2" sourceRef="usertask1" targetRef="exclusivegateway1"/>    <sequenceFlow id="flow3" sourceRef="exclusivegateway1" targetRef="usertask2">      <conditionExpression xsi:type="tFormalExpression"><![CDATA[							${days <= 3}            		]]></conditionExpression>    </sequenceFlow>    <sequenceFlow id="flow4" sourceRef="usertask2" targetRef="endevent1"/>    <sequenceFlow id="flow5" sourceRef="exclusivegateway1" targetRef="usertask3">      <conditionExpression xsi:type="tFormalExpression"><![CDATA[							${days > 3}            		]]></conditionExpression>    </sequenceFlow>    <sequenceFlow id="flow6" sourceRef="usertask3" targetRef="endevent1"/>  </process>  <bpmndi:BPMNDiagram documentation="background=#3C3F41;count=1;horizontalcount=1;orientation=0;width=842.4;height=1195.2;imageableWidth=832.4;imageableHeight=1185.2;imageableX=5.0;imageableY=5.0" id="Diagram-_1" name="New Diagram">    <bpmndi:BPMNPlane bpmnElement="Vacationprocess">      <bpmndi:BPMNShape id="Shape-startevent1" bpmnElement="startevent1">        <omgdc:Bounds height="32.0" width="32.0" x="80.0" y="150.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="32.0" width="32.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Shape-usertask1" bpmnElement="usertask1">        <omgdc:Bounds height="55.0" width="105.0" x="180.0" y="140.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="55.0" width="105.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Shape-exclusivegateway1" bpmnElement="exclusivegateway1">        <omgdc:Bounds height="32.0" width="32.0" x="350.0" y="147.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="32.0" width="32.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Shape-usertask2" bpmnElement="usertask2">        <omgdc:Bounds height="55.0" width="105.0" x="460.0" y="80.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="55.0" width="105.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Shape-usertask3" bpmnElement="usertask3">        <omgdc:Bounds height="55.0" width="105.0" x="460.0" y="210.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="55.0" width="105.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNShape id="Shape-endevent1" bpmnElement="endevent1">        <omgdc:Bounds height="32.0" width="32.0" x="660.0" y="150.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="32.0" width="32.0" x="0.0" y="0.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNShape>      <bpmndi:BPMNEdge id="BPMNEdge_flow1" bpmnElement="flow1">        <omgdi:waypoint xsi:type="omgdc:Point" x="112.0" y="166.0"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="180.0" y="167.5"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="BPMNEdge_flow2" bpmnElement="flow2">        <omgdi:waypoint xsi:type="omgdc:Point" x="285.0" y="167.5"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="350.0" y="163.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="BPMNEdge_flow3" bpmnElement="flow3">        <omgdi:waypoint xsi:type="omgdc:Point" x="370.0" y="151.0"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="370.0" y="107.0"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="460.0" y="107.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="BPMNEdge_flow4" bpmnElement="flow4">        <omgdi:waypoint xsi:type="omgdc:Point" x="565.0" y="107.5"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="660.0" y="166.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="BPMNEdge_flow5" bpmnElement="flow5">        <omgdi:waypoint xsi:type="omgdc:Point" x="370.0" y="175.0"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="370.0" y="237.0"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="460.0" y="237.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>      <bpmndi:BPMNEdge id="BPMNEdge_flow6" bpmnElement="flow6">        <omgdi:waypoint xsi:type="omgdc:Point" x="565.0" y="237.5"/>        <omgdi:waypoint xsi:type="omgdc:Point" x="660.0" y="166.0"/>        <bpmndi:BPMNLabel>          <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>        </bpmndi:BPMNLabel>      </bpmndi:BPMNEdge>    </bpmndi:BPMNPlane>  </bpmndi:BPMNDiagram></definitions>'
            var jsonObj = this.$x2js.xml2js(xml);
            console.log(jsonObj)
            let data = {}
            data.title = jsonObj.definitions.process._name;
            data.id = jsonObj.definitions.process._id;
            data.nodes = {};
            data.lines = {};
            let process = jsonObj.definitions.process;
            let bpm = jsonObj.definitions.BPMNDiagram;
            for (let item in process) {
                if (item.indexOf('start') >= 0 || item.indexOf('end') >= 0) {
                    // 开始 结束节点
                    if (process[item].constructor === Object) {
                        data.nodes[process[item]._id] = {};
                        data.nodes[process[item]._id].id = process[item]._id;
                        data.nodes[process[item]._id].name = process[item]._name;
                        data.nodes[process[item]._id].type = item.indexOf('start') >= 0 ? 'start round mix' : 'end round mix';
                        data.nodes[process[item]._id] = this.getNodeNature(data.nodes[process[item]._id], bpm);
                    } else if (process[item].constructor === Array) {
                        for (let i = 0; i < process[item].length; i++) {
                            data.nodes[process[item][i]._id] = {};
                            data.nodes[process[item][i]._id].id = process[item][i]._id;
                            data.nodes[process[item][i]._id].name = process[item][i]._name;
                            data.nodes[process[item][i]._id].type = item.indexOf('start') >= 0 ? 'start round mix' : 'end round mix';
                            data.nodes[process[item][i]._id] = this.getNodeNature(data.nodes[process[item][i]._id], bpm);
                        }
                    }
                   
                } else if (item === 'exclusiveGateway') {
                    // 条件节点
                    if (process[item].constructor === Object) {
                        data.nodes[process[item]._id] = {};
                        data.nodes[process[item]._id].id = process[item]._id;
                        data.nodes[process[item]._id].name = process[item]._name;
                        data.nodes[process[item]._id].type = 'plug';
                        data.nodes[process[item]._id] = this.getNodeNature(data.nodes[process[item]._id], bpm);
                    } else if (process[item].constructor === Array) {
                        for (let i = 0; i < process[item].length; i++) {
                            data.nodes[process[item][i]._id] = {};
                            data.nodes[process[item][i]._id].id = process[item][i]._id;
                            data.nodes[process[item][i]._id].name = process[item][i]._name;
                            data.nodes[process[item][i]._id].type = 'plug';
                            data.nodes[process[item][i]._id] = this.getNodeNature(data.nodes[process[item][i]._id], bpm);
                        }
                    }
                    
                } else if (item === 'userTask') {
                    // 角色 用户节点
                    if (process[item].constructor === Object) {
                        data.nodes[process[item]._id] = {};
                        data.nodes[process[item]._id].id = process[item]._id;
                        data.nodes[process[item]._id].name = process[item]._name;
                        data.nodes[process[item]._id].type = 'task';
                        data.nodes[process[item]._id].group = process[item]['_activiti:candidateGroups'];
                        data.nodes[process[item]._id] = this.getNodeNature(data.nodes[process[item]._id], bpm);
                    } else if (process[item].constructor === Array) {
                        for (let i = 0; i < process[item].length; i++) {
                            data.nodes[process[item][i]._id] = {};
                            data.nodes[process[item][i]._id].id = process[item][i]._id;
                            data.nodes[process[item][i]._id].name = process[item][i]._name;
                            data.nodes[process[item][i]._id].type = 'task';
                            data.nodes[process[item][i]._id].group = process[item][i]['_activiti:candidateGroups'];
                            data.nodes[process[item][i]._id] = this.getNodeNature(data.nodes[process[item][i]._id], bpm);
                        }
                    }
                } else if (item === 'sequenceFlow') {
                    // 连接线
                    if (process[item].constructor === Object) {
                        data.lines[process[item]._id] = {};
                        data.lines[process[item]._id].id = process[item]._id;
                        data.lines[process[item]._id].from = process[item]._sourceRef;
                        data.lines[process[item]._id].to = process[item]._targetRef;
                        data.lines[process[item]._id].rules = process[item].conditionExpression ? this.trim(process[item].conditionExpression.__cdata) : '';
                        data.lines[process[item]._id] = this.getLineM(data.lines[process[item]._id], bpm, data.nodes);
                    } else if (process[item].constructor === Array) {
                        for (let i = 0; i < process[item].length; i++) {
                            data.lines[process[item][i]._id] = {};
                            data.lines[process[item][i]._id].id = process[item][i]._id;
                            data.lines[process[item][i]._id].from = process[item][i]._sourceRef;
                            data.lines[process[item][i]._id].to = process[item][i]._targetRef;
                            data.lines[process[item][i]._id].rules = process[item][i].conditionExpression ? this.trim(process[item][i].conditionExpression.__cdata) : '';
                            data.lines[process[item][i]._id] = this.getLineM(data.lines[process[item][i]._id], bpm, data.nodes);
                        }
                    }
                }
            }
            this.workFlow.id = data.id;
            this.workFlow.name = data.title;
            this.jsondata = data;
            this.initProcess();
        },
        trim (s) {
            return s.replace(/(^\s*)|(\s*$)/g, "");
        },
        /**
         * 获取节点属性
        **/
        getNodeNature (data, arr) {
            // 获取节点大小 位置
            for (let i = 0; i < arr.BPMNPlane.BPMNShape.length; i++) {
                if (arr.BPMNPlane.BPMNShape[i]._bpmnElement === data.id) {
                    data.left = Number(arr.BPMNPlane.BPMNShape[i].Bounds._x - arr.BPMNPlane.BPMNShape[i].Bounds._width / 2);
                    data.top = Number(arr.BPMNPlane.BPMNShape[i].Bounds._y - arr.BPMNPlane.BPMNShape[i].Bounds._height / 2);
                    data.width = Number(arr.BPMNPlane.BPMNShape[i].Bounds._width);
                    data.height = Number(arr.BPMNPlane.BPMNShape[i].Bounds._height);
                }
            }
            return data
        },
        // 获取复杂连线 M 值
        getLineM (data, arr, nodes) {
            // 判断连线类型
            for (let i = 0; i < arr.BPMNPlane.BPMNEdge.length; i++) {
                if (arr.BPMNPlane.BPMNEdge[i]._bpmnElement === data.id) {
                    data.type = arr.BPMNPlane.BPMNEdge[i].waypoint.length > 2 ? 'tb' : 'sl';
                    if (arr.BPMNPlane.BPMNEdge[i].waypoint.length > 2) {
                        data.M = (nodes[data.from].top + nodes[data.from].height / 2 + nodes[data.to].top + nodes[data.to].height / 2) / 2;
                    }
                }
            }
            return data
        },
        //保存 修改流程
        addWorkFlow (bpmn) {
            let that = this;
            that.$refs['workFlow'].validate(valid => {
                if (valid) {
                    that.axios.post('pass/act/v1/act/deployTextProcess', {
                        fileName: that.workFlow.id + '.bpmn',
                        bpmnText: bpmn
                    }).then(res => {
                        if (res.code === '0') {
                            that.$message.success('保存成功');
                            that.$router.push('processManagement')
                        }
                    })
                }
            })
        },
        //  取角色list
        getRoles () {
            this.store.dispatch('system/rolesManage/list').then(res => {
                if (res.code === '0') {
                    this.options = res.data;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        getProcessXml () {
            let that = this;
            that.axios.get('pass/act/v1/act/processDefs/' + that.dataItem.id).then(res => {
                if (res.code === '0') {
                    this.xmlToJson(res.data[0].deploys[0].model)
                } else {
                    that.$message.error(res.message)
                }
            })
        },
        goBack () {
            this.$router.go(-1)
        }
    },
    watch: {
        'workFlow.name': {
            handler (newName, oldName) {
                this.jsondata.title = newName;
                this.$nextTick(() => {
                    this.demo.setTitle(newName);
                })
            }
        },
        'workFlow.id': {
            handler (newName, oldName) {
                this.jsondata.id = newName;
                this.$nextTick(() => {
                    this.demo.setId(newName);
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
._box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
}
#workFlow,
.nodeProperties {
    float: left;
}
.nodeProperties {
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 10px;
    background: #f1f1f1;
    margin-left: 10px;
}
.title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 15px;
    color: #000;
}
.el-select {
    width: 100%;
}
.workForm {
    width: 20%;
    display: inline-block;
}
.saveButton {
    clear: both;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}
.goback {
    margin-bottom: 10px;
}
</style>
