<%@page
	import="com.blueland.bpm.engine.core.model.ProcessDefinitionModel"%>
<%@page import="com.blueland.bpm.engine.config.model.ProcessInfoConfig"%>
<%@page import="com.blueland.bpm.common.page.*"%>
<%@page import="com.blueland.bpm.common.util.*"%>
<%@page import="java.util.*"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>环节配置</title>
<%@ include file="/commons/meta.jsp"%>
 <link rel="stylesheet" href="${ctx}/resource/js/plugins/bpmn/css/diagram-js.css" />
</head>
<body class="white-page">
<div class="main-container" id="main-container">
<input type="hidden" id="processDefId" name ="processDefId" value="${query.processDefId}"/>
  <div class="canvas">
    <div id="js-canvas"></div>
  </div>
 </div>
  <!-- viewer -->
<script  type='text/javascript'src="${ctx}/resource/js/plugins/bpmn/bpmn-navigated-viewer.development.js"></script>
  <script type="text/javascript">
  var height1 = window.parent.document.documentElement.clientHeight;
  var windowHeight = (parseInt(height1)-200)
    var viewer = new BpmnJS({
      container: document.querySelector('#js-canvas'),
      height: windowHeight
    });
    var procDefId,
    processTrace,
    processDetailLogs;
    var arrayActId=[];
    var typeList = ["bpmn:Process","bpmn:SubProcess","label","bpmn:SequenceFlow"]
	$(function(){
		procDefId = $("#processDefId").val();
		getXmlContent()
		 
	})
	//获取xml数据
	function getXmlContent(){
		  var url="${ctx}/procDefModelMgr/showProcessXml.do";
			 $.ajax({
	        url : url,
	        data:{"procDefId":procDefId},
	        cache : false, 
	        async : false,
	        type : "POST",
	        success : function (data){
	      	  createNewDiagram(data.bpmnXml);
	        }
	    });
	}
	function createNewDiagram (bpmnXmlStr) {
		viewer.importXML(bpmnXmlStr, function (err) {
         if (err) {
           console.error(err)
         }else{
           var canvas = viewer.get('canvas');
           canvas.zoom('fit-viewport'); 
           appendHtml();          
           dealLine(canvas);
         }
       })
     }
	function hidenDiv(id){
	    document.getElementById(id).style="display:none";
	     document.querySelectorAll("[signDiv]").forEach(function(item) {
	       if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
	           document.getElementById(item.id).style="display:none";
	         }
	     });
	 }
	 function showLineDiv(id){
	    document.getElementById(id).style="display:block";
	 }
	 function hidenLineDiv(id){
		    document.getElementById(id).style="display:none";
		     document.querySelectorAll("[lineDiv]").forEach(function(item) {
		       if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
		           document.getElementById(item.id).style="display:none";
		         }
		     });
		 }
		 function showDiv(id){
		    document.getElementById(id).style="display:block";
		 }
	  //拼接环节详细信息
	 function appendHtml(){
	     var eventBus =  viewer.get('eventBus');
	     var events = [
	    	 'element.hover',
	         'element.out',
	     ];
	     var overlays =  viewer.get('overlays');
	     events.forEach(function(event) {
	       eventBus.on(event, function(e) {
	    	  
	         var thisNode=document.getElementById('div_'+e.element.id);
	         var id = e.element.id.split("_")[0];
	         var thisLinkNode=document.getElementById('line_'+id);	        
	         if(!typeList.includes(e.element.type)){
        		 if(event=='element.hover'){   
	            	 dealActHtml(overlays,event,e);
	             }
	             if(event=='element.out' && thisNode != null){
	                document.getElementById('div_'+e.element.id).style="display:none";
	                document.querySelectorAll("[signDiv]").forEach(function(item) {
	                   if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
	                     document.getElementById(item.id).style="display:none";
	                   }
	               });
	             }
	        	
	             
	           }else if(e.element.type =='label'){//处理输出线的名称
	               var listLine= viewer._getLineName.filter(function(item){//判断这个输出线是否是截取的输出线名称
	                   return item.id == id; 
	               })
	               if(listLine.length>0){
	                 if(event=='element.hover'){
	                   if(thisLinkNode!=null){
	                       document.getElementById("line_"+id).style="display:block";
	                   }else{
	                      appendLineHtml(overlays,event,id);
	                   }
	                  
	                 }
	               }
	                if(event=='element.out'){
	                  if(document.getElementById('line_'+id) !=null){//去掉输出线的显示
	                       document.getElementById('line_'+id).style="display:none";
	                   }
	                   document.querySelectorAll("[lineDiv]").forEach(function(item) {
	                       if(document.getElementById(item.id) !=null){//去掉所有的输出线显示
	                         document.getElementById(item.id).style="display:none";
	                       }
	                   });
	               }
	
	           }
	          
	      });
	     });
	 }
	//环节信息
	 function dealActHtml(overlays,event,e){
	   var html = new Array();
	    var thisNode=document.getElementById('div_'+e.element.id);
	    var listAct= arrayActId.filter(function(item){//判断这个节点是否
	       return item == ('div_'+e.element.id); 
	    })
	    if(listAct.length==0){
	       arrayActId.push('div_'+e.element.id);
	    }
	    if(listAct.length>0){
	      if(thisNode!=null){
	         document.getElementById('div_'+e.element.id).style="display:block";
	      }
	      return;
	    }	
	    	var id = e.element.id;
	    	var oldtitle= e.element.name; 
	    	var type = e.element.type;	    	
	    	html.push('<div class="lchj-set" signDiv="flag" onmouseover="showDiv(\'div_'+e.element.id+'\')" onmouseleave="hidenDiv(\'div_'+e.element.id+'\')" id="div_'+e.element.id+'"><div class="box-head"><span class="title">'+oldtitle+'</span></div><div class="box-body">');
	        html.push("<ul class='actDetail_set'>");
	        if(type=="bpmn:ServiceTask"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/otherTask/editServiceTaskView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'服务任务设置','980px','600px');\">服务任务设置</a></li>");
        	}else if(type=="bpmn:ScriptTask"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/otherTask/editScriptTaskView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'脚本任务设置','980px','600px');\">脚本任务设置</a></li>");
        	}else if(type=='bpmn:ReceiveTask'){//接收任务
        		html.push("<li><a  id='actDefInfo' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }");
            	html.push("' ,'环节属性设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
            	
            	html.push("<li><a  id='actSequenceFlow' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
            	html.push("' ,'环节输出线设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
            	
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/activityInfo/actOperatePowerList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'环节操作权限设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节操作权限设置</a></li>");
            	
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/dataObjectRelation/activityList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'环节扩展属性设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节扩展属性设置</a></li>");
            		         
        	}else if(type=='bpmn:ManualTask'){//线下任务
        		html.push("<li><a  id='actDefInfo' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }");
            	html.push("' ,'环节属性设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
            	
        	}else if(type=="bpmn:CallActivity"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/otherTask/editCallActivityView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'子流程设置','980px','600px');\">子流程设置</a></li>");    
            	if(id!=""){
            		html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
                	html.push(" onclick=\"showDiaLog('");
                	html.push("${ctx}/procDefMgr/callactivityconfig.do?callActivityProcKey="+id+"&isSubProcess=1&sys=${appId}&mAppId=${mAppId}");
                	html.push("' ,'关联子流程设置','980px','600px');\">关联子流程设置</a></li>");
            	}
            	html.push("<li><a  id='actSequenceFlow' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
            	html.push("' ,'环节输出线设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
            	
        	}else if(type=="bpmn:ExclusiveGateway"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/gateway/editGatewayByCd.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'条件网关','980px','600px');\">条件网关设置</a></li>");
        	}else if(type=="bpmn:InclusiveGateway"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/gateway/editGatewayByIc.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'包容网关','980px','600px');\">包容网关设置</a></li>");
        	}else if(type=="bpmn:ParallelGateway"){
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/gateway/editGatewayByIc.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'并行网关','980px','600px');\">并行网关设置</a></li>");
        	}else{
        	
            	html.push("<li><a  id='actDefInfo' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }&sys=${appId}&mAppId=${mAppId}");
            	html.push("' ,'环节属性设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
            	
            	html.push("<li><a  id='actDefUser' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/setActResource/list.do?actId="+id+"&procDefId=${query.processDefId}");
            	html.push("' ,'环节人员设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节人员设置</a></li>");
            	
            	html.push("<li><a  id='actSequenceFlow' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
            	html.push("' ,'环节输出线设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
            	
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/activityInfo/actOperatePowerList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'环节操作权限设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节操作权限设置</a></li>");
            	
            	html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("${ctx}/dataObjectRelation/activityList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
            	html.push("' ,'环节扩展属性设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节扩展属性设置</a></li>");
            	
            <%-- 	html.push("<li><a  id='actDefRoelOperate' href='javascript:void(0)'");
            	html.push(" onclick=\"showDiaLog('");
            	html.push("<%=MyContants.KSKF_PAHT%>"+"/dev-plateform-web/#/roleFormField?formId=${formId}&procDefKey=${procDefKey}&appId=${appId}&actDefId="+id+"&formCode=${formCode}&modelId=${modelId}&processDefId=${query.processDefId}");
            	html.push("' ,'环节表单设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节表单设置</a></li>"); --%>
            	if(e.element.isMulti==true){
            		html.push("<li><a  id='actDefOperate' href='javascript:void(0)'");
            		html.push(" onclick=\"showDiaLog('");
            		html.push("${ctx}/actInfo/activityFinishRule/create.do?sourceActId="+id+"&procDefId=${query.processDefId}&sourceActName=" + oldtitle);
            		html.push("' ,'环节完成条件设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前环节->"+oldtitle+"','980px','600px');\">环节完成条件设置</a></li>");
            	}
        	}
	    	html.push('</ul></div>');
           var content = html.join('');
           if(event=='element.hover'){
               overlays.add(e.element.id, 'note', {
                 position: {
                   bottom: 0,
                   right: 0
                 },
                 html: content
               });
           }
	 }
	 
	function appendLineHtml(overlays,event,id){//拼写输出线名称
	    var html = new Array();
	     var hash = {};//数组去重
	      var lineList = viewer._getLineName.reduce(function(item, next) {
	        hash[next.id] ? '' : hash[next.id] = true && item.push(next);
	        return item;
	    }, []);
	    var thisNode=document.getElementById('line_'+id);
	    var list= lineList.filter(function(item){//判断这个输出线是否是截取的输出线名称
	          return item.id == id; 
	    })
	    var listAct= arrayActId.filter(function(item){//判断这个节点是否
	       return item == id; 
	    })
	    if(listAct.length==0){
	       arrayActId.push('line_'+id);
	    }
	    if(thisNode!=null && listAct.length==0){
	      document.getElementById('line_'+id).style="display:block";
	      return;
	    }
	    html.push('<div class="lchj-box" lineDiv="flag" onmouseover="showLineDiv(\'line_'+id+'\')" onmouseleave="hidenLineDiv(\'line_'+id+'\')" id="line_'+list[0].id+'"><div class="box-body">'+list[0].name);
	    html.push('</div></div>');
	    var content = html.join('');
	    //alert(list[0].name)
	    if(event=='element.hover'){
	        overlays.add(id, {
	          position: {
	            bottom: 0,
	            right: 0
	          },
	          html: content
	        });
	    }
	  }
	//处理线的名称样式
   function dealLine(canvas){
      var hash = {};//数组去重
      var lineList = viewer._getLineId.reduce(function(item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next);
          return item;
      }, []);
      var colorClass =  "highlight-label";
      lineList.forEach(function(item){
          canvas.addMarker(item+"_label", colorClass)
      })
    }
   
</script>
</body>
</html>
