<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%@page import="com.blueland.bpm.manage.util.*"%>
<%
	String processInstanceId=request.getParameter("processInstanceId");
%>
<!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" style="overflow-y: auto;overflow-x auto;">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%@ include file="/commons/meta.jsp"%>
	<style type="text/css">
		div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
		div#rMenu ul li{
			margin: 1px 0;
			padding: 0 5px;
			cursor: pointer;
			list-style: none outside none;
			background-color: #DFDFDF;
		}
	</style>

	<link href="${ctx}/resource/js/plugins/loadmask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
	<link href="${ctx}/resource/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="${ctx }/resource/js/plugins/zTree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${ctx }/resource/js/plugins/zTree/js/jquery.ztree.core-3.4.js"></script>
	<script type='text/javascript' src='${ctx}/resource/js/plugins/loadmask/jquery.loadmask.js'></script>
	<script type="text/javascript">
		/*function $(id){
            return document.getElementById(id);
        }*/
		function changeHref(id,srcStr,currentType){

			//if("image"==currentType){
			//var height="${height}";

			//}
			document.getElementById(id).src=srcStr;
		}
		function selectTag(showContent,selfObj,currentType,fileId){
			//当前展示的是文本监控还是图形监控页面标记，text为文本监控页面  image为图形监控页面
			$("#currentType").val(currentType);
			var currentProcessInstanceId = $("#currentProcessInstanceId").val();
			showContent = showContent+(showContent.indexOf("?")!=-1?'&':'?') + "processInstanceId="+currentProcessInstanceId+"&fileId="+fileId ;
			setMask("main-container");
			// 操作标签
			var tag = document.getElementById("tags").getElementsByTagName("li");
			var taglength = tag.length;
			for(i=0; i<taglength; i++){
				tag[i].className = "";
			}
			selfObj.parentNode.className = "selectTag";
			changeHref("frmrightChild",showContent,currentType);
		}
		function busiProcess(arisCode){
			var url = "<%=MyContants.BPM_FRONT_PATH%>"+"/ebpm-bpa-front/#/detail?fileId="+arisCode+"&type=.bpmn&isMenu=false";
			var iframeHeight = $("#frmrightChild").contents().find("body").height()<500?500:$("#frmrightChild").contents().find("body").height();
			$("#frmrightChild").height(iframeHeight);
			changeHref("frmrightChild",url,"");
		}
		function moveLeft(){
			var left = $("tags").style.left;
			left = left && parseInt(left) || 0;
			if(left<0){
				$("tags").style.left = left + 95 + "px";
			}
		}

		function moveRight(){
			var left = $("tags").style.left;
			left = left && parseInt(left) || 0;
			$("tags").style.left = left - 95 + "px";
		}

		var zNodes ;
		var setting = {
			view: {
				dblClickExpand : false,
				selectedMulti: false
			},
			edit: {
				enable: false,
				drag:{isMove:false}
			},
			data: {
				simpleData: {
					enable : true,
					idKey : "id",
					pIdKey : "pId"
				}
			},async: {
				enable: true,
				url:"${ctx}/workflow/trace/allProcessInstance.do?processInstanceId=${processInstanceId}",
				autoParam:["id", "name=n"],
				dataFilter: filter
			},callback: {
				beforeClick: beforeClick,
				onAsyncSuccess:onAsyncSuccess
			}

		};

		function onAsyncSuccess (){
			zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes=zTree.getNodes();
			var allnodes = zTree.transformToArray(nodes);
			if(1<allnodes.length){//左边树有多个节点时，展示左边树
				$("#leftPart").show();
			}

			//在树上标志出当前节点
			var currentProcessInstanceId = $("#currentProcessInstanceId").val();
			var node = zTree.getNodeByParam("id",currentProcessInstanceId);
			zTree.selectNode(node,false);
		}

		function filter(treeId, parentNode, childNodes) {
			//alert(childNodes);
			//默认加载第一个或者根节点
			if(typeof(parentNode)=="undefined"||parentNode==null||parentNode==""){
				//alert(childNodes[2].id);
			}

			return childNodes;
		}
		function beforeClick(treeId, treeNode) {
			flushFlowLog(treeNode.id);
			return true;
		}


		$(function(){
			var height = window.screen.height;
			$("#frmrightChild").height(parseInt(height)-290);
			$("#treeDemo").height(parseInt(height)-218);
			//默认跳转文本监控
			var currentProcessInstanceId = $("#currentProcessInstanceId").val();
			$("#frmrightChild").attr("src","${ctx}/workflow/trace/traceByText.do?"+ "processInstanceId="+currentProcessInstanceId);
			$.fn.zTree.init($("#treeDemo"), setting);
			//setMask("main-container");
		});

		function flushFlowLog(processInstanceId){
			setMask("main-container");
			$("#currentProcessInstanceId").val(processInstanceId);
			var currentType = $("#currentType").val();
			if("text" == currentType){
				document.getElementById("frmrightChild").src="${ctx}/workflow/trace/traceByText.do?processInstanceId="+processInstanceId;
			}else{
				document.getElementById("frmrightChild").src="${ctx}/workflow/trace/traceByImage.do?processInstanceId="+processInstanceId;
			}

		}
		function changiframheight(){
			$("#main-container").unmask();
		}
		function showFlowImage(arisCode){
			if($("#currentType").val()=="image"){
				return;
			}
			setMask("main-container");

			var currentProcessInstanceId = $("#currentProcessInstanceId").val();
			$("#currentType").val("image");
			var url="<%=MyContants.BPM_PROCESS_MODELER_PATH%>";
			$("#frmrightChild").attr("src",url+"#/processMonitor?"+ "processInstanceId="+currentProcessInstanceId+"&arisCode");
		}
	</script>
	<title>流程监控</title>
</head>
<body class="no-skin white-page" >
<input type="hidden" id="currentProcessInstanceId" value="${processInstanceId}"/>
<input type="hidden" id="currentType" value="text"/>
<div class="main-container" id="main-container">
	<script type="text/javascript">
		try{ace.settings.check('main-container' , 'fixed')}catch(e){}
	</script>
	<div class="main-content">
		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content" style="padding:2px;">
			<!-- #section:settings.box -->

			<!-- /section:settings.box -->
			<div class="page-content-area">

				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->

						<table  width="100%">
							<tr>
								<td colspan="2">
									<div class="panel-heading" style="margin:0 15px;background: #f5f5f5 !important;color: #18191A;border: 0 !important;padding: 10px 20px;">
										<span id="headingSpan" style="font-size: 14px;"><b>流程标题：</b>${processInstance.procTitle}，<b>流程状态：</b>${processInstance.procState==1?'运行中':(processInstance.procState==5?'已结束':'已作废')}，<b>流程定义名称：</b>${processInstance.procDefName}</span>
									</div>
								</td>
							</tr>
							<tr>
								<td id="leftPart" valign="top" class="centerleft" style="width:250px;display:none; ">
									<div class="panel panel-primary" style="width:250px;">
										<div class="ztree" id="treeDemo" style="width:250px; height:474px; overflow:auto"></div>
									</div>
								</td>
								<td valign="top" align="left" id="rightPart" >
									<div class="tabbable" style="margin-left: 0; margin-right: 0;">
										<ul class="nav nav-tabs padding-12 tab-color-blue background-blue"
											id="tags">
											<li class="active"><a id="UserContract"  data-toggle="tab"
																  onclick="selectTag('${ctx}/workflow/trace/traceByText.do',this,'text','${arisCode}');"
																  href="" target="frmrightChild" class="current"><i class="ace-icon fa fa-file-text-o bigger-125"></i>
												文本监控</a></li>

											<%-- <li><a id="UserEvent" href=""
                                                data-toggle="tab"
                                                onclick="selectTag('${ctx}/workflow/trace/traceByImage.do',this,'image','${arisCode}');"
                                                target="frmrightChild"><i class="ace-icon fa fa-picture-o  bigger-125"></i>
                                                图形监控</a></li> --%>
											<li><a id="UserEvent" href=""
												   data-toggle="tab"
												   onclick="selectTag('${ctx}/workflow/trace/traceByImage.do',this,'image','${arisCode}');"
												   target="frmrightChild"><i class="ace-icon fa fa-picture-o  bigger-125"></i>
												图形监控</a></li>
											<%-- <li><a id="UserEvent" href=""
                                            data-toggle="tab"
                                            onclick="showFlowImage('${arisCode}');"
                                            target="frmrightChild"><i class="ace-icon fa fa-picture-o  bigger-125"></i>
                                            图形监控</a></li> --%>
											<c:if test="${arisCode != null }">
												<li><a id="busiEvent" href=""
													   data-toggle="tab"
													   onclick="busiProcess('${arisCode}');"
													   target="frmrightChild"><i class="ace-icon fa fa-sitemap bigger-125"></i>业务流程梳理</a></li>
											</c:if>

										</ul>

										<div class="tab-content" style="width: 100%; height: 100%;" id="firea">
											<IFRAME scrolling="auto" frameBorder=0 id="frmrightChild"
													onload="changiframheight();"
													name="frmrightChild" style="width:100%;"
													allowTransparency="true">
										</div>
									</div>
								</td>
							</tr>
						</table>
						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content-area -->
		</div><!-- /.page-content -->



	</div><!-- /.main-container -->
</body>

</html>