<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setHeader("Expires", "0");

%>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/jsp/common/include/css.jsp"/>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/css/w2ui-1.4.3.css"/>" />
<jsp:include page="/jsp/common/include/script.jsp"/>
<script language="javascript" src="<c:url value="/js/w2ui-1.4.3.js"/>"></script>

<script language="javascript" >
var url      = '<c:url value="/onl/transaction/online/transactionStatus.json" />';
var url_view = '<c:url value="/onl/transaction/online/transactionStatus.view" />';
var url_excel= '<c:url value="/onl/transaction/online/transactionStatus.excel"/>';
var recentYn="N";

//합계만보기
var onlySum = "N";
var stop = false;

var timer;

var selectName = "searchEaiBzwkDstcd";	// selectBox Name
function w2GridToExcelSubmit(url,cmd,gridObj,formObject,fileName,merge){
	
	var postData = formObject.serializeArray();	
	postData.push({
		name : "cmd",
		value : cmd
	});
	//fileName 필수값 아님
	if (fileName != undefined){
		postData.push({
			name : "fileName",
			value : fileName
		});	
	}
	
	//grid data
	var data = gridObj.records;
	var gridData = new Array();
	var records= new Array();
	for ( var i = 0; i < data.length; i++) {
		records[i] = new Object();
		records[i]['P100'] = data[i]['P100'].toString();
		records[i]['P200'] = data[i]['P200'].toString();
		records[i]['P300'] = data[i]['P300'].toString();
		records[i]['P400'] = data[i]['P400'].toString();
		records[i]['E100'] = data[i]['E100'].toString();
		records[i]['E200'] = data[i]['E200'].toString();
		records[i]['E300'] = data[i]['E300'].toString();
		records[i]['E400'] = data[i]['E400'].toString();
		records[i]['E900'] = data[i]['E900'].toString();
		records[i]['E9300'] = data[i]['E9300'].toString();
		records[i]['E9400'] = data[i]['E9400'].toString();
		records[i]['E9900'] = data[i]['E9900'].toString();

		records[i]['BIZNAME'] = data[i]['BIZNAME'];
		records[i]['SVCCODE'] = data[i]['SVCCODE'];
		records[i]['INSTNAME'] = data[i]['INSTNAME'];
		records[i]['SVCNAME'] = data[i]['SVCNAME'];
		records[i]['AVGEAI'] = data[i]['AVGEAI'].toString();
		records[i]['AVGPSV'] = data[i]['AVGPSV'].toString();
		records[i]['AVGTOTAL'] = data[i]['AVGTOTAL'].toString();
		gridData.push(records[i]);
	}

	postData.push({
		name : "gridData",
		value : JSON.stringify(gridData)
	});
	
			
	//grid titles

	var colM = gridObj.columns;
	var headers      = new Array();
	var headerTitles = new Array(); 
	for(var i=0;i<colM.length;i++){
		if (colM[i].hidden){
		}else{
			headers.push(colM[i].field);
			headerTitles.push(colM[i].caption);
		}
	}
	postData.push({
		name : "header",
		value : JSON.stringify(headers)
	});		
	postData.push({
		name : "headerTitle",
		value : JSON.stringify(headerTitles)
	});	
	if (merge != undefined){
		postData.push({
			name : "merge",
			value : JSON.stringify(merge)
		});	
	}
	
	
	var form="<form action='"+url+"' method='post' target='excelDown'  accept-charset='utf-8' >";
	$.each(postData,function(_,obj){
		form +="<input type='hidden' name='"+obj.name+"' value='"+obj.value+"'/>";
	});
	form += "</form>";
	$(form).appendTo("body").submit().remove();
}
function init(callback,recentYn,onlySum) {
		$.ajax({
			type : "POST",
			url:url,
			dataType:"json",
			data:{cmd: 'LIST_DETAIL_COMBO'},
			success:function(json){
				new makeOptions("CODE","NAME").setObj($("select[name=searchEaiBzwkDstcd]")).setNoValueInclude(true).setNoValue("","전체").setData(json.bizList).setFormat(codeName3OptionFormat).rendering();
				
				
				$("select[name=searchEaiBzwkDstcd]").val("${param.searchEaiBzwkDstcd}");
				
				setSearchable(selectName);	// 콤보에 searchable 설정
				
				if (typeof callback === 'function') {
					callback(recentYn,onlySum);
				}
			},
			error:function(e){
				alert(e.responseText);
			}
		});
		
	}
function detail(recentYn,onlySum){
	//console.log("recentYn : "+recentYn );
	w2ui['myGrid'].clear();

	var postData = getSearchForJqgrid("cmd","DETAIL"); 
	postData['totalCount']=0;
	postData['page']=1;
	postData['rows']=1;
	postData['recentYn']=recentYn;
	postData['onlySum']=onlySum;
	
	$.ajax({  
		type : "POST",
		url:url,
		dataType:"json",
		data:postData,
		success:function(json){
			var data = json;
			var records = data.rows;
			var cnt = 1;
			//grid에서 recid가 반드시 필요.
			for(var idx in records){
				//insert recid
				records[idx]['recid'] = parseInt(idx)+1;
			}
			var total = parseInt(data.records);
			//add records
			w2ui['myGrid'].total = total;
			//data count
			w2ui['myGrid'].records = records;
			//add summary
			
			var summary = data.summary;
			//변환
			/* summary.AVGEAI   = String((summary.AVGEAI/total).toFixed(3));
			summary.AVGPSV   = String((summary.AVGPSV/total).toFixed(3));
			summary.AVGTOTAL = String((summary.AVGTOTAL/total).toFixed(3)); */
			//추가데이터
			summary.recid = 99999;
			summary.BIZNAME =" 합 계";
			summary.SVCCODE ="";
			summary.INSTNAME ="";
			summary.summary = true;

			w2ui['myGrid'].summary[0]=summary;
			//summary.summary = true;
			w2ui['myGrid'].refresh();
		},
	    error:function(xhr,status,error){
	    	alert(JSON.parse(xhr.responseText).errorMsg);
	    	//clearInterval(timer);
	    }
	});
	
}
	function thousandsSeparator(record, ind, col_ind){
		var n = record[this.columns[col_ind].field];
		if(n==null) return;
		n = n.toString();
		while(true){
			var n2= n.replace(/(\d)(\d{3})($|,|\.)/g,'$1,$2$3');
			if (n==n2) break;
			n=n2;
		}
		return n;
	};
	
function refreshGrid(recentYn){
	
	timer = setInterval(function(){
		if(stop) return;
		
		//합계만보기
		if($("#onlySum").is(":checked")){ //최근10분여부
			onlySum="Y";
		}else{
			onlySum="N";
		}
		
		detail(recentYn,onlySum);
	},5000);
	
	
function sumFormatter(record, ind, col_ind){
	var n = record[this.columns[col_ind].field];
	if(n==null || n == 0) return;
	return String(n.toFixed(3));
};
	
	
}
$( document ).ready(function() {
	
	init(detail,"N");
	$('#myGrid').w2grid({ 
	    name   : 'myGrid', 
	    datatype:'json',
	    method:'POST',
	    //url : url,
	    //data : postData,
	    show :{ emptyRecords:false
	    },
	    columnGroups : [
	    	{span : 4, caption:'<%= localeMessage.getString("tranStat.interface") %>'},
	    	{span : 4, caption:'<%= localeMessage.getString("tranStat.tranNo") %>'},
	    	{span : 3, caption:'<%= localeMessage.getString("tranStat.avgTime") %>'},
	    	{span : 5, caption:'<%= localeMessage.getString("tranStat.errNo") %>'},
	    	{span : 3, caption:'<%= localeMessage.getString("tranStat.timeout") %>'}	    	
	    ],
 
	    columns: [          
		             
		             { field : 'BIZNAME'    	, type:'text'	, caption : '<%= localeMessage.getString("eaiMsg.bizCodeName") %>' , size: '120px'    },
		             { field : 'SVCNAME'    	    ,type:'text'	,caption : '<%= localeMessage.getString("eaiMsg.svcDesc") %>' 	, size: '250px'},
         			 { field : 'SVCCODE'    	, type:'text'	, caption : '<%= localeMessage.getString("eaiMsg.serviceCode") %>' , size: '170px'    },
		             { field : 'INSTNAME'  	    , type:'text'	, caption : '<%= localeMessage.getString("scheduler.instance") %>' , size: '90px'     },
		             
		             { field : 'P100'       		,type:'text'	,caption : '100'  , size: '80px' ,style:'text-align:right', render:thousandsSeparator },
		             { field : 'P200'       		,type:'text'	,caption : '200'  , size: '80px' ,style:'text-align:right', render:thousandsSeparator  },
		             { field : 'P300'       		,type:'text'	,caption : '300'  , size: '80px' ,style:'text-align:right', render:thousandsSeparator   },
		             { field : 'P400'       		,type:'text'	,caption : '400'  , size: '80px' ,style:'text-align:right', render:thousandsSeparator  },
                     
		             { field : 'AVGEAI'     	    ,type:'text'	,caption : 'IF'	  , size: '50px' ,style:'text-align:right' },
		             { field : 'AVGPSV'     	    ,type:'text'	,caption : '<%= localeMessage.getString("tranStat.recv") %>'	  , size: '50px' ,style:'text-align:right' },
		             { field : 'AVGTOTAL'   	    ,type:'text'	,caption : '<%= localeMessage.getString("common.total") %>'	  , size: '50px' ,style:'text-align:right' },
		             
		             { field : 'E100'       		,type:'text'	,caption : '100'  , size: '65px' ,style:'text-align:right', render:thousandsSeparator  },
		             { field : 'E200'       		,type:'text'	,caption : '200'  , size: '65px' ,style:'text-align:right', render:thousandsSeparator   },
		             { field : 'E300'      		    ,type:'text'	,caption : '300'  , size: '65px' ,style:'text-align:right', render:thousandsSeparator  },
		             { field : 'E400'       		,type:'text'	,caption : '400'  , size: '65px' ,style:'text-align:right', render:thousandsSeparator   },
		             { field : 'E900'       		,type:'text'	,caption : '900'  , size: '65px' ,style:'text-align:right', render:thousandsSeparator   },

		             { field : 'E9300'      		,type:'text'	,caption : '300'  , size: '50px' ,style:'text-align:right', render:thousandsSeparator   },
		             { field : 'E9400'      		,type:'text'	,caption : '400'  , size: '50px' ,style:'text-align:right', render:thousandsSeparator  },
		             { field : 'E9900'      		,type:'text'	,caption : '900'  , size: '50px' ,style:'text-align:right', render:thousandsSeparator   }
	    ]
	    
		,summary:[
	    	{ recid : 99999, BIZNAME:"합 계", SVCNAME:" ", SVCCODE:"", INSTNAME:"", P100:"0", P200:"0", P300:"0", P400:"0",
	    		AVGEAI:"0.000", AVGPSV:"0.00", AVGTOTAL:"0.000",
	    		 E100:"0", E200:"0", E300:"0", E400:"0", E900:"0", E9300:"0", E9400:"0", E9900:"0" }
		] 
			
	});
	//w2ui['myGrid'].hideColumn('BIZCODE');
	$("input[name^=search]").keydown(function(key){
		if (key.keyCode == 13){
			$("#btn_search").click();
		}
	});
	$("#btn_10min").click(function(){
		recentYn="Y";
		
		//합계만보기
		if($("#onlySum").is(":checked")){ //최근10분여부
			onlySum="Y";
		}else{
			onlySum="N";
		}
		
		detail(recentYn,onlySum);
	});
	$("#btn_detail").click(function(){
	    var args = new Object();
	    args['userId'] = $("input[name=userId]").val();
	    
	    var url2 = url_view;
	    url2 += "?cmd=POPUP";
	    showModal(url2,args,470,740);
	});	
	$("#btn_initialize").click(function(){
		if(confirm("초기화 하시겠습니까?")){
			$.ajax({
				type : "POST",
				url:url,
				dataType:"json",
				data:{cmd: 'INITIALIZE',recentYn:recentYn},
				success:function(json){
					alert("성공하였습니다.");
				},
				error:function(e){
					alert(e.responseText);
				}
			});		
		}else{
			return false;
		}
	});
	$("#btn_stop").click(function(){
		detail(false);
		if(stop){
		$("#btn_stop").attr('src','<c:url value="/images/bt/bt_stop.gif"/>');
		 stop = false;
		
		}else{	
		$("#btn_stop").attr('src','<c:url value="/images/bt/bt_stop.gif"/>');
		 stop = true;
		
		} 
	});
	$("#btn_download").click(function(event) {
           event.stopPropagation(); // Do not propagate the event.
           // Create an object that will manage to download the file.
           var merge = new Array();
           merge.push(makeMerge("API","0","0","0","3"));
           merge.push(makeMerge("전문구간별 처리건수","0","0","4","7"));
           merge.push(makeMerge("평균처리시간(초)","0","0","8","10"));
           merge.push(makeMerge("전문구간별 에러건수","0","0","11","15"));
           merge.push(makeMerge("타임아웃","0","0","16","18"));
           
		w2GridToExcelSubmit(url_excel,"LIST_GRID_TO_EXCEL",w2ui['myGrid'],$("#ajaxForm"),"전문별 거래현황",merge);
		return false;
	});	
	$("#btn_search").click(function(){
		if($("#recentYnVal").is(":checked")){ //최근10분여부
			recentYn="Y";
		}else{
			recentYn="N";
		}
		
		//합계만보기
		if($("#onlySum").is(":checked")){ //최근10분여부
			onlySum="Y";
		}else{
			onlySum="N";
		}
		
		detail(recentYn,onlySum);
	});	
	
	$("#btn_excel").click(function(event) {
        event.stopPropagation(); // Do not propagate the event.
        var target = "excelDown" ; // iframe의 name
        var merge = new Array();
        merge.push(makeMerge("API","0","0","0","3"));
        merge.push(makeMerge("구간별 처리건수","0","0","4","7"));
        merge.push(makeMerge("평균처리시간(초)","0","0","8","10"));
        merge.push(makeMerge("구간별 에러건수","0","0","11","15"));
        merge.push(makeMerge("타임아웃","0","0","16","18"));
        
        w2GridToExcelSubmit(url_excel,"LIST_GRID_TO_EXCEL",w2ui['myGrid'],$("#ajaxForm"),"전문별 거래현황",merge);
		return false;
	});
	
	buttonControl();
	/*
 	timer = setInterval(function(){
		if(stop) return;
		detail(recentYn);
	},5000);
	*/
	

	//refresh 체크박스
	$("input:checkbox").on('click',function(){
		var refresh = $("#refresh").is(":checked");
		
		clearInterval(timer);
		
		if(refresh){ //refresh 설정
			if($("#recentYnVal").is(":checked")){ //최근10분여부
				refreshGrid("Y");
			}else{
				refreshGrid("N");
			}
		}
		
	});

});

 
</script>
</head>
	
</body>
	<body>		
		<div class="right_box">
			<div class="content_top">
				<ul class="path">
					<li><a href="#">${rmsMenuPath}</a></li>					
				</ul>					
			</div><!-- end content_top -->
			<div class="content_middle">
				<div class="search_wrap">
					<input type="checkbox" id="onlySum" value="Y" />&nbsp;<b><%= localeMessage.getString("tranStatDetail.example") %></b>&nbsp;
					<input type="checkbox" id="refresh" value="Y" />&nbsp;<b>Auto Refresh</b>&nbsp;
					<input type="checkbox" id="recentYnVal" value="N"/>&nbsp;<b><%= localeMessage.getString("tranStat.rec10Min") %></b>&nbsp;&nbsp;
					<button type="button" class="cssbtn" id="btn_detail" level="R" ><i class="material-icons">details</i> <%= localeMessage.getString("button.detail") %></button>
					<button type="button" class="cssbtn" id="btn_excel" level="W" ><i class="material-icons">table_view</i> <%= localeMessage.getString("button.excel") %></button>
					<button type="button" class="cssbtn" id="btn_initialize" level="W" ><i class="material-icons">restart_alt</i> <%= localeMessage.getString("button.reset") %></button>
					<button type="button" class="cssbtn" id="btn_search" level="R" ><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %></button>		
					<%-- <img src="<c:url value="/img/btn_10min.png"/>" alt="" id="btn_10min" level="W" /> --%>
<%-- 					<img src="<c:url value="/img/btn_detail.png"/>" alt="" id="btn_detail" level="R" /> --%>
<%-- 					<img src="<c:url value="/img/btn_excel.png"/>" alt="" id="btn_download" level="W"/> --%>
<%-- 					<img src="<c:url value="/img/btn_initialize.png"/>" alt="" id="btn_initialize" level="W" /> --%>
<%-- 					<img src="<c:url value="/img/btn_search.png"/>" alt="" id="btn_search" level="R" /> --%>
				</div>
				<div class="title"><%= localeMessage.getString("tranStatDetail.title") %><span class="tooltip"><%= localeMessage.getString("tranStat.tooltip") %></span></div>
				<table class="search_condition" cellspacing=0;>
					<tbody>
						<tr>
							<th style="width:180px;"><%= localeMessage.getString("eaiMsg.bizCodeName") %></th>
							<td style="width:400px;">
									<div class="select-style">
									<select name="searchEaiBzwkDstcd" value="${param.searchEaiBzwkDstcd}">	
									</select>
									</div>
							</td>
							<th style="width:180px;"><%= localeMessage.getString("tranStatDetail.search") %></th>
							<td>
								<div style="position: relative; width: 100%;">
									<input type="text" name="searchFilter" value="${param.searchFilter}">									
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				<div id="myGrid"  style="width:100%;height:500px" ></div>
			</div><!-- end content_middle -->
		</div><!-- end right_box -->				
	</body>	
</html>