<template>
    <div class="_box">
        <div class="workFlowNature">
            <el-form
                :model="workFlow"
                :rules="dataRules"
                ref="workFlow"
            >
                <el-form-item
                    prop="type"
                    class="workForm"
                    label="子流程类型"
                    label-width="70px">
                    <el-select
                        v-model="workFlow.type"
                        size="small"
                        placeholder="请选择"
                        :disabled="design === 'show'">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.index"
                            :label="item.dictName"
                            :value="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    prop="name"
                    class="workForm"
                    label="子流程名称"
                    label-width="80px"
                >
                    <el-input
                        v-model="workFlow.name"
                        size="small"
                        :disabled="design === 'show'"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="id"
                    class="workForm"
                    label="子流程Key"
                    label-width="80px"
                >
                    <el-input
                        v-model="workFlow.id"
                        size="small"
                        :disabled="design === 'show'"
                    ></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"
                        @click="goBack"
                        icon="el-icon-arrow-left"
                    >返回</el-button>
                </div> -->
            </el-form>
            <span @click="close" class="sui-icons sui-icons-close sui-slider-title-x"></span>
        </div>
        <processDialog
            :jsonData="jsondata"
            :options="options"
            :design="design"
            :name="workFlow.name"
            :flowChartId="workFlow.id"
            :companyId="companyId"
            @saveData="getJsonData"
            ref="processDialog">
        </processDialog>
        <!-- <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, checkStart, checkCharLength, checkCharNoChinese } from '@/utils/validator.js';
import processDialog from './processDialog.vue'
export default {
    components: {
        processDialog: processDialog
    },
    props: {
        type: {
            type: String,
            default: ''
        },
        data: {
            type: Object,
            default: () => {}
        },
        companyId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            operate: '',
            store,
            rightWidth: 200,
            jsondata: {
                'name': '',
                'id': '',
                'nodes': {},
                'edges': {},
                'initNum': 10
            },
            form: {
                id: '',
                name: '',
                type: '',
                model: '',
                rules: '',
                group: '',
                from: '',
                time: '',
                to: '',
                projName: ''
            },
            workFlow: {
                type: '',
                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' },
                    { validator: checkStart, trigger: 'change'}
                ]
            },
            itemRules: {
                name: [
                    { validator: checkChar, trigger: 'change' },
                    { validator: checkCharLength, max: 100, trigger: 'change' }
                ],
                group: [
                    { required: true, message: '请选择角色', trigger: 'blur' }
                ]
            },
            options: [],
            design: '',
            dataItem: {},
            typeOptions: []
        }
    },
    mounted () {
        this.design = this.type ? this.type : '';
        if (this.design && this.design !== 'add') {
            this.dataItem = this.data;
            this.getProcessXml();
        }
        this.getRoles();
        this.getDictList();
    },
    methods: {
        // 获取数据字典中-流程类型数据
        getDictList () {
            this.axios.get('pass/v1/sysdicts/listDict?pDictId=PROCESS_TYPE&status=1&companyId=' + this.companyId).then((res) => {
                if (res.code === '0') {
                    this.typeOptions = res.data.list
                } else {
                    this.$message.error(res.message)
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        close (str, process) {
            this.$emit('on-then', 'close', '');
        },
        getJsonData (json) {
            console.log(this.jsondata,json);
            this.jsondata.name = json.name;
            this.jsondata.id = json.id;
            this.jsondata.nodes = json.nodes;
            this.jsondata.edges = json.edges;
            this.operate = 'save';
        },
        getJson () {
            this.$refs.processDialog.save();
            if (this.operate === 'save') {
                let xmlObj = this.jsonToXml(this.jsondata);
                // let xml = this.string2Xml(xmlObj)
                // console.log(xmlObj);
                this.addWorkFlow(xmlObj);
                this.operate = '';
            }
        },
        getHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        getWidth (dom) {
            return window.innerWidth - dom.offsetLeft;
        },
        /**
         * JSON 转换字符串
         */
        jsonToXml (json) {
            json = json || '';
            let jsonS = json;
            let jsonstr = encodeURI(JSON.stringify(jsonS).replace(/"/g, "'"));
            let xml_first = `
                <?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="steerinfo2019"  exporter="camunda modeler" exporterVersion="2.7.1" name="`+jsonstr+`" targetNamespace="http://www.activiti.org/test">
                        <process id="` + json.id + `" name="` + json.name + `" isExecutable="true"> `;
            // let xml_processEnd = '</process> ';
            let xml_bpmnStart = `
                        </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="` + json.id + `">`
            let xml_bpmnShape = [];
            let xml_bpmnEdge = [];
            let xml_startEvent = [];
            let xml_userTask = [];
            let xml_manualTask = [];
            let xml_exclusiveGateway = [];
            let xml_parallelGateway = [];
            let xml_childProcess = [];
            let xml_endEvent = [];
            let xml_sequenceFlow = [];
            let xml_last = `
                        </bpmndi:BPMNPlane>
                    </bpmndi:BPMNDiagram>
                </definitions>`;
            for (let item of json.nodes) {
                switch (item.shape) {
                    case 'icore-circle':
                        let i1 = `
                        <startEvent id="BPMN_` + item.id + `" name="` + item.data.name + `">`;
                        i1 += `
                        </startEvent>`;
                        xml_startEvent.push(i1);
                        let j1 = `
                        <bpmndi:BPMNShape id="Shape-` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j1);
                        break
                    case 'icore-approver':
                        let i2 = '';
                        if (item.data.isCount === true) {
                            i2 = `
                        <userTask id="BPMN_` + item.id + '" activiti:exclusive="true" activiti:assignee="${' + item.data.variableUser + '}" name="' + item.data.name + `">`
                            // 多个监听任务添加
                            if (item.data.watchTaskParams && item.data.watchTaskParams.length > 0) {
                                i2 += `
                            <extensionElements>`
                                for (let task of item.data.watchTaskParams) {
                                i2 +=`
                                <activiti:taskListener class="` + task.taskClass + `" event="`+ task.taskEvent + `">
                                </activiti:taskListener>`
                                }
                                i2 += `
                                <modeler:initiator-can-complete xmlns:modeler="http://activiti.com/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
                            </extensionElements>`
                            }
                            i2 += `
                            <multiInstanceLoopCharacteristics isSequential="` + (item.data.mulInsType === 'Sequential' ? true : false) + `" activiti:collection="` + item.data.collection + `" activiti:elementVariable="` + item.data.variableUser + `">
                                <completionCondition>` + item.data.completeCondition + `</completionCondition>
                            </multiInstanceLoopCharacteristics>`;
                        } else {
                            if (item.data.user && item.data.user !== '') {
                                i2 = `
                        <userTask id="BPMN_` + item.id + '" activiti:exclusive="true"  activiti:candidateGroups="' + item.data.group + '" activiti:assignee="' + item.data.user + '" name="' + item.data.name + '">';
                                // 多个监听任务添加
                                if (item.data.watchTaskParams && item.data.watchTaskParams.length > 0) {
                                i2 += `
                            <extensionElements>`
                                    for (let task of item.data.watchTaskParams) {
                                i2 +=`
                                <activiti:taskListener class="` + task.taskClass + `" event="`+ task.taskEvent + `">
                                </activiti:taskListener>`
                                    }
                                i2 += `
                                <modeler:initiator-can-complete xmlns:modeler="http://activiti.com/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
                            </extensionElements>`
                                }
                            } else {
                                i2 = `
                        <userTask id="BPMN_` + item.id + '" activiti:exclusive="true"  activiti:candidateGroups="' + item.data.group + '" name="' + item.data.name + '">';
                                // 多个监听任务添加
                                if (item.data.watchTaskParams && item.data.watchTaskParams.length > 0) {
                                i2 += `
                            <extensionElements>`
                                    for (let task of item.data.watchTaskParams) {
                                i2 +=`
                                <activiti:taskListener class="` + task.taskClass + `" event="`+ task.taskEvent + `">
                                </activiti:taskListener>`
                                    }
                                i2 += `
                                <modeler:initiator-can-complete xmlns:modeler="http://activiti.com/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
                            </extensionElements>`
                                }
                            }
                        }
                        i2 += `
                        </userTask>`;
                        xml_userTask.push(i2);
                        let j2 = `
                        <bpmndi:BPMNShape id="Shape-` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="65" width="120" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="65" width="120" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j2);
                        break
                    case 'icore-event':
                        let i3 = `
                        <manualTask id="BPMN_` + item.id + '" name="' + item.data.name + '">';
                        i3 += `
                        </manualTask>`;
                        xml_manualTask.push(i3);
                        let j3 = `
                        <bpmndi:BPMNShape id="Shape-` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="60" width="60" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="60" width="60" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j3);
                        break
                    case 'icore-exclusiveGateway':
                        let i4 =`
                        <exclusiveGateway gatewayDirection="Unspecified" id="BPMN_` + item.id + '" name="' + item.data.name + '">';
                        i4 += `
                        </exclusiveGateway>`;
                        xml_exclusiveGateway.push(i4);
                        let j4 = `
                        <bpmndi:BPMNShape id="Shape-BPMN_` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j4);
                        break
                    case 'icore-parallelGateway':
                        let i5 =`
                        <parallelGateway gatewayDirection="Unspecified" id="BPMN_` + item.id + '" name="' + item.data.name + '">';
                        i5 += `
                        </parallelGateway>`;
                        xml_parallelGateway.push(i5);
                        let j5 = `
                        <bpmndi:BPMNShape id="Shape-BPMN_` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j5);
                        break
                     case 'icore-item':
                        let i6 = `
                        <callActivity activiti:exclusive="true" calledElement="` + item.data.itemName + '" id="BPMN_' + item.id + '" name="' + item.data.name + `">
                            <documentation id="` + item.data.itemName+ `_D_1"/>
                            <extensionElements>`
                            if (item.data.inSource && item.data.inTarget && (item.data.inSource.indexOf(',') !== -1 || item.data.inTarget.indexOf(',') !== -1)) {
                                for (let is = 0; is < item.data.inSource.split(',').length; is++) {
                                    i6 += `
                                <activiti:in source="#{` + item.data.inSource.split(',')[is] + `}" target="` + item.data.inTarget.split(',')[is]  +`"/>`
                                }
                            } else if (item.data.inSource && item.data.inTarget  && item.data.inSource !== '' && item.data.inTarget !== '') {
                                i6 += `
                                <activiti:in source="#{` + item.data.inSource + `}" target="` + item.data.inTarget +`"/>`
                            }
                            if (item.data.inSourceExpression && item.data.inTargetExpression && (item.data.inSourceExpression.indexOf(',') !== -1 || item.data.inTargetExpression.indexOf(',') !== -1)) {
                                for (let ise = 0; ise < item.data.inSourceExpression.split(',').length; ise++) {
                                    i6 += `
                                <activiti:in sourceExpression="#{` + item.data.inSourceExpression.split(',')[ise] + `}" target="` + item.data.inTargetExpression.split(',')[ise]  +`"/>`
                                }
                            } else if (item.data.inSourceExpression && item.data.inTargetExpression  && item.data.inSourceExpression !== '' && item.data.inTargetExpression !== '') {
                                i6 += `
                                <activiti:in sourceExpression="$` + `{` + item.data.inSourceExpression + `}" target="` + item.data.inTargetExpression + `"/>`
                            }
                            if (item.data.outSource && item.data.outTarget && (item.data.outSource.indexOf(',') !== -1 || item.data.outTarget.indexOf(',') !== -1)) {
                                for (let os = 0; os < item.data.outSource.split(',').length; os++) {
                                    i6 += `
                                <activiti:out source="#{` + item.data.outSource.split(',')[os] + `}" target="` + item.data.outTarget.split(',')[os]  +`"/>`
                                }
                            } else if (item.data.outSource && item.data.outTarget  && item.data.outSource !== '' && item.data.outTarget !== '') {
                                i6 += `
                                <activiti:out source="#{` + item.data.outSource + `}" target="` + item.data.outTarget +`"/>`
                            }
                            if (item.data.outSourceExpression && item.data.outTargetExpression && (item.data.outSourceExpression.indexOf(',') !== -1 || item.data.outTargetExpression.indexOf(',') !== -1)) {
                                for (let ose = 0; ose < item.data.outSourceExpression.split(',').length; ose++) {
                                    i6 += `
                                <activiti:out sourceExpression="#{` + item.data.outSourceExpression.split(',')[ose] + `}" target="` + item.data.outTargetExpression.split(',')[ose]  +`"/>`
                                }
                            } else if (item.data.outSourceExpression && item.data.outTargetExpression  && item.data.outSourceExpression !== '' && item.data.outTargetExpression !== '') {
                                i6 += `
                                <activiti:out sourceExpression="$` + `{` + item.data.outSourceExpression + `}" target="` + item.data.outTargetExpression + `"/>`
                            }
                        i6 += `
                            </extensionElements>
                        </callActivity>`
                        xml_childProcess.push(i6);
                        let j6 = `
                        <bpmndi:BPMNShape id="Shape-BPMN_` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="70" width="120" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="70" width="120" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j6);
                        break
                    case 'icore-end-circle':
                        let i7 = `
                        <endEvent id="BPMN_` + item.id + '" name="' + item.data.name + '">';
                        // for (let edge of json.edges) {
                        //     if (edge.target === item.id) {
                        //         i7 += `
                        //         <incoming>BPMN_` + edge.id + `</incoming>`;
                        //     }
                        //     if (edge.source === item.id) {
                        //         i7 += `
                        //         <outgoing>BPMN_` + edge.id + `</outgoing>`;
                        //     }
                        // }
                        i7 += `
                        </endEvent>`;
                        xml_endEvent.push(i7);
                        let j7 = `
                        <bpmndi:BPMNShape id="Shape-BPMN_` + item.id + '" bpmnElement="BPMN_' + item.id + '">' + `
                            <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + '"/>' + ` 
                            <bpmndi:BPMNLabel>
                                <omgdc:Bounds height="40" width="40" x="` + item.x + '" y="' + item.y + `"/>
                            </bpmndi:BPMNLabel>
                        </bpmndi:BPMNShape>`;
                        xml_bpmnShape.push(j7);
                        break
                }
            }
            for (let line of json.edges) {
                let i = `
                        <sequenceFlow id="BPMN_` + line.id + '" name="' + line.data.name + '" sourceRef="BPMN_' + line.source + '" targetRef="BPMN_' + line.target + '">';
                        if (line.data.rules && line.data.rules !== '') {
                            i += `
                            <conditionExpression xsi:type="tFormalExpression">
                                <![CDATA[ $` + '{' + line.data.rules + `} ]]>
                            </conditionExpression>`
                        }
                        i += `
                        </sequenceFlow>`
                xml_sequenceFlow.push(i);
                let j = `
                        <bpmndi:BPMNEdge id="BPMNEdge_BPMN_` + line.id + '" bpmnElement="BPMN_' + line.id + '">';
                for (let controlPoint of line.controlPoints) {
                    j += `
                        <omgdi:waypoint xsi:type="omgdc:Point" x="` + controlPoint.x + '" y="' + controlPoint.y + '"/>';
                }
                j += `
                                <bpmndi:BPMNLabel>
                                    <omgdc:Bounds height="0.0" width="0.0" x="-1.0" y="-1.0"/>
                                </bpmndi:BPMNLabel>
                            </bpmndi:BPMNEdge>`
                xml_bpmnEdge.push(j);
            }
            return xml_first + xml_startEvent.join(' ') + xml_userTask.join(' ') + xml_manualTask.join(' ') + xml_exclusiveGateway.join(' ')  + xml_parallelGateway.join(' ')  + xml_childProcess.join(' ') + xml_endEvent.join(' ') + xml_sequenceFlow.join(' ') + xml_bpmnStart + xml_bpmnShape.join(' ') + xml_bpmnEdge.join(' ') + xml_last;
        },
        /**
        * 赋值nodes
        */
        setNodes (itemNodes, bpm, shape, type, group) {
            let that = this;
            let node = {};
            node.id = itemNodes._id.replace('BPMN_', '');
            node.name = itemNodes._name;
            node.shape = shape;
            node.data = {};
            node.data.id = itemNodes._id.replace('BPMN_', '');
            node.data.name = itemNodes._name;
            node.data.type = type;
            if (group) {
                node.group = group;
            }
            node = that.getNodeNature(node, bpm);
            return node;
        },
        /**
        * 赋值edges
        */
        setEdges (itemEdges, bpm, shape, type, data) {
            let that = this;
            let edge = {};
            edge.id = itemEdges._id.replace('BPMN_', '');
            edge.name = itemEdges._name === undefined ? '' : itemEdges._name;
            edge.source = itemEdges._sourceRef.replace('BPMN_', '');
            edge.target = itemEdges._targetRef.replace('BPMN_', '');
            edge.shape = shape;
            edge.data = {};
            edge.data.id = itemEdges._id.replace('BPMN_', '');
            edge.data.name = itemEdges._name;
            edge.data.type = type;
            edge.rules = itemEdges.conditionExpression ? this.trim(itemEdges.conditionExpression.__cdata) : '';
            edge = that.getLineM(edge, bpm, data.nodes);
            return edge;
        },
        /**
         * XML 转换JSON
         */
        xmlToJson (xml, type) {
            xml = xml || '';
            var jsonObj = this.$x2js.xml2js(xml);
            let xmlData;
            try {
                xmlData = JSON.parse(decodeURI(jsonObj.definitions._name).replace(/'/g, '"'));
            } catch (err) {
                console.log('err', err);
                return;
            }
            
            console.log(jsonObj)
            let data = xmlData;
            // data.name = jsonObj.definitions.process._name;
            // data.id = jsonObj.definitions.process._id;
            // data.nodes = [];
            // data.edges = [];
            // let process = jsonObj.definitions.process;
            // let bpm = jsonObj.definitions.BPMNDiagram;
            // for (let item in process) {
            //     switch (item) {
            //         case 'startEvent':
            //         case 'endEvent':
            //             if (process[item].constructor === Object) {
            //                 let node = this.setNodes(process[item],
            //                     bpm, 
            //                     item.indexOf('start') >= 0 ? 'icore-circle' : 'icore-end-circle',
            //                     item.indexOf('start') >= 0 ? '开始节点' : '结束节点');
            //                 data.nodes.push(node);
            //             } else if (process[item].constructor === Array) {
            //                 for (let i = 0; i < process[item].length; i++) {
            //                     let node = this.setNodes(process[item][i], item ,bpm);;
            //                     data.nodes.push(node);
            //                 }
            //             }
            //             break
            //         case 'exclusiveGateway':
            //             if (process[item].constructor === Object) {
            //                 let node = this.setNodes (process[item], bpm, 'icore-gateWay', '网关');
            //                 data.nodes.push(node);
            //             } else if (process[item].constructor === Array) {
            //                 for (let i = 0; i < process[item].length; i++) {
            //                     let node = this.setNodes(process[item][i], bpm, 'icore-gateWay', '网关');
            //                     data.nodes.push(node);
            //                 }
            //             }
            //             break
            //         case 'userTask':
            //             if (process[item].constructor === Object) {
            //                 let group = process[item]['_activiti:candidateGroups'] === 'undefined' ? '' : process[item]['_activiti:candidateGroups'];
            //                 let node = this.setNodes (process[item], bpm, 'icore-approver', '审核人', group);
            //                 data.nodes.push(node);
            //             } else if (process[item].constructor === Array) {
            //                 for (let i = 0; i < process[item].length; i++) {
            //                     let group = process[item][i]['_activiti:candidateGroups'] === 'undefined' ? '' : process[item]['_activiti:candidateGroups'];
            //                     let node = this.setNodes(process[item][i], bpm, 'icore-approver', '审核人', group);
            //                     data.nodes.push(node);
            //                 }
            //             }
            //             break
            //         case 'manualTask':
            //             if (process[item].constructor === Object) {
            //                 let node = this.setNodes (process[item], bpm, 'icore-event', '事件');
            //                 data.nodes.push(node);
            //             } else if (process[item].constructor === Array) {
            //                 for (let i = 0; i < process[item].length; i++) {
            //                     let node = this.setNodes(process[item][i], bpm, 'icore-event', '事件');
            //                     data.nodes.push(node);
            //                 }
            //             }
            //             break
            //         case 'sequenceFlow':
            //             if (process[item].constructor === Object) {
            //                 let edge = this.setEdges(process[item], bpm, 'polyLineFlow', '箭头折线', data);
            //                 data.edges.push(edge);
            //             } else if (process[item].constructor === Array) {
            //                 for (let i = 0; i < process[item].length; i++) {
            //                     let edge = this.setEdges(process[item][i], bpm, 'polyLineFlow', '箭头折线', data);
            //                     data.edges.push(edge);
            //                 }
            //             }
            //             break
            //     }
            // }
            this.workFlow.id = data.id;
            this.workFlow.name = data.name;
            this.workFlow.type = type;
            this.jsondata = data;
            
        },
        trim (s) {
            return s.replace(/(^\s*)|(\s*$)/g, "");
        },
        /**
         * 获取节点属性
        **/
        getNodeNature (data, arr) {
            // 获取节点大小 位置
            if (arr.BPMNPlane.BPMNShape.constructor === Object) {
                if (arr.BPMNPlane.BPMNShape._bpmnElement.replace('BPMN_', '') === data.id) {
                    data.x = Number(arr.BPMNPlane.BPMNShape.Bounds._x);
                    data.y = Number(arr.BPMNPlane.BPMNShape.Bounds._y);
                }
            } else {
                for (let i = 0; i < arr.BPMNPlane.BPMNShape.length; i++) {
                    if (arr.BPMNPlane.BPMNShape[i]._bpmnElement.replace('BPMN_', '') === data.id) {
                        data.x = Number(arr.BPMNPlane.BPMNShape[i].Bounds._x);
                        data.y = Number(arr.BPMNPlane.BPMNShape[i].Bounds._y);
                    }
                }
            }
            return data;
        },
        // 获取复杂连线 M 值
        getLineM (data, arr, nodes) {
            // 判断连线类型
            if (arr.BPMNPlane.BPMNEdge.constructor === Object) {
                if (arr.BPMNPlane.BPMNEdge._bpmnElement.replace('BPMN_', '') === data.id) {
                    // data.type = arr.BPMNPlane.BPMNEdge[i].waypoint.length > 2 ? 'tb' : 'sl';
                    data.controlPoints = [];
                    let controlPoint = {};
                    if (arr.BPMNPlane.BPMNEdge.waypoint.length > 0) {
                        // data.M = (nodes[data.from].top + nodes[data.from].height / 2 + nodes[data.to].top + nodes[data.to].height / 2) / 2;
                        for (let j = 0; j < arr.BPMNPlane.BPMNEdge.waypoint.length; j++) {
                            controlPoint.x = Number(arr.BPMNPlane.BPMNEdge.waypoint[j]._x);
                            controlPoint.y = Number(arr.BPMNPlane.BPMNEdge.waypoint[j]._y);
                            data.controlPoints.push(controlPoint);
                        }
                    }
                }
            } else {
                for (let i = 0; i < arr.BPMNPlane.BPMNEdge.length; i++) {
                    if (arr.BPMNPlane.BPMNEdge[i]._bpmnElement.replace('BPMN_', '') === data.id) {
                        // data.type = arr.BPMNPlane.BPMNEdge[i].waypoint.length > 2 ? 'tb' : 'sl';
                        data.controlPoints = [];
                        let controlPoint = {};
                        if (arr.BPMNPlane.BPMNEdge[i].waypoint.length > 0) {
                            // data.M = (nodes[data.from].top + nodes[data.from].height / 2 + nodes[data.to].top + nodes[data.to].height / 2) / 2;
                            for (let j = 0; j < arr.BPMNPlane.BPMNEdge[i].waypoint.length; j++) {
                                controlPoint.x = Number(arr.BPMNPlane.BPMNEdge[i].waypoint[j]._x);
                                controlPoint.y = Number(arr.BPMNPlane.BPMNEdge[i].waypoint[j]._y);
                                data.controlPoints.push(controlPoint);
                            }
                        }
                    }
                }
            }
            return data
        },
        //保存 修改流程
        addWorkFlow (bpmn) {
            let that = this;
            that.$refs['workFlow'].validate(valid => {
                if (valid) {
                    that.axios.post('pass/act/v1/actinformations/upLoadProcessFile/', {
                        companyId: this.companyId,
                        type: that.workFlow.type,
                        key: that.workFlow.id,
                        name: that.workFlow.name,
                        bpmnText: bpmn
                    }).then(res => {
                        if (res.code === '0') {
                            that.$message.success('子流程保存成功');
                            this.$emit('on-then', 'success', res.data);
                            // that.$router.push({name: 'processDdesign2',params: {id: that.workFlow.id}})
                            // that.$router.go(-1)
                        }
                    })
                }
            })
        },
        //  取角色list
        getRoles () {
            this.store.dispatch('system/rolesManage/list', {companyId: this.companyId}).then(res => {
                if (res.code === '0') {
                    this.options = res.data;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        getProcessXml () {
            let that = this;
            if (that.dataItem.id) {
                that.axios.get('pass/act/v1/actinformations/' + that.dataItem.id).then(res => {
                    if (res.code === '0') {
                        // let xml = res.data.length !== 0 ? res.data[0].deploys[0].model : '';
                        let xml = res.data.bpmnText;
                        let type = res.data.type;
                        this.xmlToJson(xml, type);
                    } else {
                        that.$message.error(res.message)
                    }
                })
            }
        },
        goBack () {
            this.$router.back();
        }
    },
    watch: {
        'workFlow.name': {
            handler (newName, oldName) {
                this.jsondata.name = newName;
            }
        },
        'workFlow.id': {
            handler (newName, oldName) {
                this.jsondata.id = newName;
            }
        }
    }
}
</script>

<style lang="less" scoped>
._box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
}
.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>
