<%@ 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"/>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/jqplotScript.jsp"/>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/css/w2ui-1.4.3.css"/>" />
<script language="javascript" src="<c:url value="/js/w2ui-1.4.3.js"/>"></script>


<script language="javascript" >
var url      ='<c:url value="/onl/statistics/eaisvcname/eaiSvcNameMonthlyMan.json" />';
var url_view ='<c:url value="/onl/statistics/eaisvcname/eaiSvcNameMonthlyMan.view" />';
var url_excel = '<c:url value="/onl/statistics/eaisvcname/eaiSvcNameDailyMan.excel" />';

var plotChart1;			// jqplot 저장 (chart1)
var plotChart2;			// jqplot 저장 (chart2)

function detail(){
	w2ui['myGrid'].clear();
	var postData = getSearchForJqgrid("cmd","LIST"); //jqgrid에서는 object 로 
	postData['totalCount']=0;
	postData['page']=1;
	postData['rows']=1;

	$.ajax({  
		type : "POST",
		url:url,
		dataType:"JSON",
		data:postData,
		success:function(json){
			var data = json;
			var records = data.rows;
			
			var summary = new Object();
			summary.recid ="";
			for(var i=1;i<=12;i++){
				summary["MNTRSMTNOITM"+i] =0;
				summary["MNERRNOITM"+i] =0;
			}
			
			for(var idx in records){
				//insert recid
				records[idx]['recid'] = parseInt(idx)+1;
				for(var i=1;i<=12;i++){
					summary["MNTRSMTNOITM"+i] = summary["MNTRSMTNOITM"+i] + records[idx]["MNTRSMTNOITM"+i] ;
					summary["MNERRNOITM"+i]   = summary["MNERRNOITM"+i]   + records[idx]["MNERRNOITM"+i];
				}				
				
			}
			w2ui['myGrid'].total = data.records;
			w2ui['myGrid'].records = records;

			w2ui['myGrid'].summary.push(summary);
			// End 합계 셋팅.
			w2ui['myGrid'].refresh();				

			if(plotChart1 == undefined || plotChart1 == null)
			{
				var rowsData	= data.rows;
				// 차트 생성.
				plotChart1 = jqLineChart('chart1',rowsData, 12, 'MNTRSMTNOITM', "<%= localeMessage.getString("eaiSvcMonthly.transCnt") %>");
				plotChart2 = jqLineChart('chart2',rowsData, 12, 'MNERRNOITM', "<%= localeMessage.getString("eaiSvcMonthly.errCnt") %>");

				// Summary CSS 설정.
	 			$("#grid_myGrid_rec_").css("background-color", "#D4F4FA");  // td 배경색
	 			$("#grid_myGrid_rec_").children("td:eq(2)").text("<%= localeMessage.getString("eaiSvcMonthly.sum") %>");	
	 			$("#grid_myGrid_rec_").css("height", "30px");				// tr 높이
	 			$("#grid_myGrid_rec_").css("font-size", "10pt");			// tr 글자 크기
	 			$("#grid_myGrid_rec_").css("text-align", "center");			// td 글자 정렬
	 			
			}	
			
		},
    	error:function(xhr,status,error){
    		alert(JSON.parse(xhr.responseText).errorMsg);
    	}
	});
}



function w2GridToExcelSubmit(url_excel,cmd,gridObj,formObject,fileName){
	
	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;
	
	for(var idx in data){
		for(var i=1;i<=31;i++){
			data[idx]["MNTRSMTNOITM"+i] = String(data[idx]["MNTRSMTNOITM"+i]);
			data[idx]["MNERRNOITM"+i] = String(data[idx]["MNERRNOITM"+i]);
			data[idx]["recid"] = String(data[idx]["recid"]);
		}				
	}
	
	var gridData = new Array();
	for ( var i = 0; i < data.length; i++) {
		gridData.push(data[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)
	});	
	
	
	// var form="<form action='"+url_excel+"' method='post' target='excelDown' accept-charset='utf-8' >";
	var form="<form action='"+url_excel+"' method='post' target='excelDown'>";
	$.each(postData,function(_,obj){
		form +="<input type='hidden' name='"+obj.name+"' value='"+obj.value+"'/>";
	});
	form += "</form>";
	$(form).appendTo("body").submit().remove();
}

$(document).ready(function() {

	$("input[name=searchStart],input[name=searchEnd]").inputmask("9999",{'autoUnmask':true});
	$("input[name=searchStart],input[name=searchEnd]").each(function(){
		if ($(this).val() == undefined || $(this).val() == null || $(this).val() == ""){
			$(this).val(getToday());
		}
	});
	function thousandsSeparator(record, ind, col_ind){
		var n = record[this.columns[col_ind].field];
		n = n.toString();
		while(true){
			var n2= n.replace(/(\d)(\d{3})($|,|\.)/g,'$1,$2$3');
			if (n==n2) break;
			n=n2;
		}
		return n;
	};
	
	$('#myGrid').w2grid({
	    name   : 'myGrid', 
	    datatype:'JSON',
	    method:'POST',
	    multiSelect : false,
	    autoLoad:false,
	    show :{
	    	emptyRecords:false
	    },
	    columnGroups : [
// 	    	{span : 1, master:true},
// 	    	{span : 1, master:true},
// 	    	{span : 1, master:true},
			{span : 3, caption:'IF'},
	    	{span : 2, caption:'1'},{span : 2, caption:'2'},{span : 2, caption:'3'},{span : 2, caption:'4'},{span : 2, caption:'5'},
	    	{span : 2, caption:'6'},{span : 2, caption:'7'},{span : 2, caption:'8'},{span : 2, caption:'9'},{span : 2, caption:'10'},
	    	{span : 2, caption:'11'},{span : 2, caption:'12'}
	    ],	    
		columns:[
	        { field : 'recid'           , type:'number' ,size:'40px'  , caption:""         , style:'text-align:right'},
	        { field : 'EAISVCNAME'      , type:'text'   ,size:'170px' , caption:"<%= localeMessage.getString("eaiSvcMonthly.bizCode") %>"  },
	        { field : 'EAISVCDESC'      , type:'text'   ,size:'190px' , caption:"<%= localeMessage.getString("eaiSvcMonthly.bizName") %>"   },
	        { field : 'MNTRSMTNOITM1'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM1'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM2'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM2'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM3'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM3'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM4'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM4'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM5'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM5'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM6'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM6'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM7'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM7'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM8'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM8'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM9'   , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM9'     , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM10'  , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM10'    , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM11'  , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM11'    , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNTRSMTNOITM12'  , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.trans") %>"     , style:'text-align:right' , render:thousandsSeparator },
	        { field : 'MNERRNOITM12'    , type:'number' ,size:'85px'  , caption:"<%= localeMessage.getString("eaiSvcMonthly.err") %>"     , style:'text-align:right' , render:thousandsSeparator }
        ],
		summary:[
	    	{ recid : "", EAISVCNAME:"", EAISVCDESC:"합 계", 
              MNTRSMTNOITM1:"0", MNERRNOITM1:"0", MNTRSMTNOITM2:"0", MNERRNOITM2:"0", MNTRSMTNOITM3:"0", MNERRNOITM3:"0", MNTRSMTNOITM4:"0", MNERRNOITM4:"0", MNTRSMTNOITM5:"0", MNERRNOITM5:"0", 
              MNTRSMTNOITM6:"0", MNERRNOITM6:"0", MNTRSMTNOITM7:"0", MNERRNOITM7:"0", MNTRSMTNOITM8:"0", MNERRNOITM8:"0", MNTRSMTNOITM9:"0", MNERRNOITM9:"0", MNTRSMTNOITM10:"0", MNERRNOITM10:"0", 
              MNTRSMTNOITM11:"0", MNERRNOITM11:"0", MNTRSMTNOITM12:"0", MNERRNOITM12:"0"
	    	}
	    ],	
		onDblClick: function(event) {
		    var recid = event.recid;
		    
		    var records = this.get(recid);
			var data =[];
			
			if(plotChart1 != undefined)
			{
				// 차트 삭제
				plotChart1.destroy();
				plotChart2.destroy();
			}
			
			// 차트 생성.
			data[0]=records;
			plotChart1 = jqLineChart('chart1',data, 12,'MNTRSMTNOITM', "전송건수");
			plotChart2 = jqLineChart('chart2',data, 12,'MNERRNOITM', "오류건수");
        }
	});
	
	detail();
	
	
	$("#btn_search").click(function(){
		var postData = getSearchForJqgrid("cmd","LIST"); //jqgrid에서는 object 로
		
		if(!isFromToDate(postData.searchStart, postData.searchEnd))
		{
			alert("입력한 날짜를 확인하여주십시요.\n"
				 + "시작일 : " + setDateFormat(postData.searchStart) + "\n"
				 + "종료일 : " + setDateFormat(postData.searchEnd));
			return;
		}
	
		if(plotChart1 != undefined)
		{
			plotChart1.destroy();
			plotChart2.destroy();
		}
		
		plotChart1 = null;
		plotChart2 = null;
		
		detail();
	});
	
	$("input[name^=search]").keydown(function(key){
		if (key.keyCode == 13){
			$("#btn_search").click();
		}
	});
	
	$("#btn_excel").click(function(event) {
        event.stopPropagation(); // Do not propagate the event.
        // Create an object that will manage to download the file.
        var target = "excelDown" ; // iframe의 name
        //(url,cmd,gridObj,formObject,fileName,merge)
		//gridJsonToExcelSubmit2(url_excel,"LIST_GRID_TO_EXCEL",w2ui['myGrid'],$("#ajaxForm"),'서비스별 일별거래현황');
		w2GridToExcelSubmit(url_excel,"LIST_GRID_TO_EXCEL",w2ui['myGrid'],$("#ajaxForm"),"서비스별 월별거래현황");
		return false;
	});
	
	
	buttonControl();
	
});
 
</script>
</head>
	<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">
					<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_search" level="R" ><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %></button>	
<%-- 					<img src="<c:url value="/img/btn_excel.png"/>" id="btn_excel" level="W"/> --%>
<%-- 					<img src="<c:url value="/img/btn_search.png"/>" alt="" id="btn_search" level="R" />					 --%>
				</div>
				<div class="title"><%= localeMessage.getString("eaiSvcMonthly.title") %></div>
				<table class="search_condition" cellspacing=0;>
					<tbody>
						<tr>
							<th style="width:120px;"><%= localeMessage.getString("eaiSvcMonthly.bizName") %></th>
							<td>
								<input type="text" name="searchEaiBzwkDstcd" value="${param.searchEaiBzwkDstcd}">
							</td>
							<th style="width:120px;"><%= localeMessage.getString("eaiSvcMonthly.period") %></th>
							<td>
								<input type="text" name="searchStart" value="${param.searchStart}" style="width:100px"> ~
								<input type="text" name="searchEnd" value="${param.searchEnd}" style="width:100px">	
							</td>							
						</tr>						
					</tbody>
				</table>
				
		<br>
		<table width="100%">
			<tr width="100%">
				<td width="2%">&nbsp;</td>
				<td width="47%"><div id="chart1"></div></td>
				<td width="4%">&nbsp;</td>
				<td width="47%"><div id="chart2"></div></td>
			</tr>
			<tr width="100%">
				<td colspan=4>&nbsp;</td>
			</tr>
			<tr width="100%">
				<td colspan=4>&nbsp;</td>
			</tr>
		</table>

		<!-- grid -->
		<div id="myGrid" style="width:100%;height:260px"></div>
	</body>	
</html>

