<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String cntx = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<%@ include file="/WEB-INF/include/include-header.jspf" %>
    <link rel="stylesheet" href="<%=cntx%>/vendor/bootstrap-multiselect-2.0/dist/css/bootstrap-multiselect.css" type="text/css">

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>상담사별 현황</title>

    <script type="text/javascript" src="<%=cntx%>/vendor/bootstrap-multiselect-2.0/dist/js/bootstrap-multiselect.js"></script>
	
	<style type="text/css">
		html, body {
    		height: 98%
		}
	   	*{margin:0; padding:0;}
		body{font:12px "맑은고딕";margin:5px;}
		.jui .navbar {
		    padding: 10px 15px 5px 15px;
		}
		.alert {
		    padding: 2px 2px 2px 10px;
		}
		.container-fluid {
		    width: 100%;
		    padding-right: 0px;
		    padding-left: 0px;
		}
		
		.navbar {
		    color: rgb(51, 51, 51);
		    background-color: rgb(255, 255, 255);
		    background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(230, 230, 230) 100%);
		    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px inset;
		    border-width: 1px;
		    border-style: solid;
		    border-color: rgb(217, 217, 217);
		    border-image: initial;
		    padding: 10px 10px 10px 10px;
		    margin-bottom: 10px;
		    font-size: 12px;
		    overflow: visible;
		    border-radius: 5px;
		}
		.card-header {
		    padding: 6px 2px 2px 2px;
		}
		.card-body {
		    padding: 1px;
		}
		
	  </style>
	  
	<script type="text/javascript">
	var tmpdate = new Date();
	var ws;
	var current_array = [];
	var ready_array = [];
	var talk_array = [];
	var acw_array = [];
	var nr1_array = [];
	var nr34_array = [];
	var nr2_array = [];
	var deptname = "파크";
	var icon = "";

	function lpad(s,c,n){
		if(!s || !c || s.length >= n){
			return s;
		}
		var max = (n - s.length)/c.length;
		for(var i=0; i<max; i++){
			s=c+s;
		}
		return s;
	}

	function interceptionExtno(extNo){
	    $.ajax({
	        type: "POST",
	        url: "http://localhost:5312/requestListen.do",
	        data : "param={\"rpt\":\"\",\"rnm\":\"stateview" +
	                    "\",\"rno\":\"" + extNo + 
	                    "\",\"rip\":\"172.22.240.54" +
	                    "\",\"rcn\":\"" + '-1' +
	                    "\",\"uid\":\"" + '' +
	                    "\",\"unm\":\"" + '' +
	                    "\"}",
	        dataType: "jsonp",
	        timeout: 10000,
	        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	        error:function(data, a, b) {
	            alert("청취요청오류입니다");
	        }
	    });
	}
/*
	$(function(){
		document.getElementById('gubun').value = "1_106";	
		var queryString = $("form[name=frm]").serialize();
		$.ajax({
			url:"<%=cntx%>/ctiInfo/agentGroupList.do",
			data : queryString,
			type:"post",
			datatype:"json",
			success:function(args){
				var frm1 = document.frm;
				var op;
				//frm1.selGroup.options.length = 0;
				if(args.row != null){
					for(var i=0; i<args.rows.length; i++){
						op = new Option();
						op.value = args.rows[i].OBJ_ID;
						op.text = args.rows[i].OBJ_NM;
						frm1.selGroup.options.add(op);
					}
				}
			},
			error : function(x,o,e){
				var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
				alert(msg);
			}
		});	
	});
*/	
	//상담그룹에 속하는 상담사 목록 리턴
	function getAgentList(tgtGrpId){
		var queryString = $("form[name=frm]").serialize() ;
		$.ajax({
			url:"<%=cntx%>/ctiInfo/agentList.do",
			type:"post",
	        data : queryString,
			datatype:"json",
			success:function(args){
				$('#selAgent').multiselect();
				var data = [];
				for(var j=0; j<args.rows.length; j++){
			        var group = {label: args.rows[j].OBJECT_NM,
			                value: args.rows[j].OBJECT_ID
			        }			 
			        data.push(group);
			    }
			    $('#selAgent').multiselect('dataprovider', data);
		    },
			error : function(x,o,e){
				var msg = "에러발생 \n" + x.status + " : " + o + " : " + e;
				alert(msg);
			}
		});	
	}


	//"웹소켓 접속" 버튼을 클릭했을때
    function btnLogin_onclick() {
        if(ws != null){
        	ws.close();
        	ws = null;
        }
		//웹소켓을 지원하는 브라우저이면
		if ("WebSocket" in window) {
			//웹소켓 서버에 접속한다.
			ws = new WebSocket("ws://172.22.240.23:14003");
			//ws = new WebSocket("ws://127.0.0.1:14003");

			//웹소켓이 접속되었음.
			ws.onopen = function() {
				//var sendstr = "REGIST|" + "STAT^2000";
				var sendstr = "REGIST|" + "STAT^1234567";
				ws.send(sendstr);
			};
			//웹소켓 서버에서 메세지가 전송되었음.
			ws.onmessage = function(evt) {
				EventHandler(evt.data);
			};
			//웹소켓이 종료되었음.
			ws.onclose = function() {
				//document.getElementById("ConnectYn").value = "연결끊김";
				//document.getElementById("btnLogin").disabled = false;
				//document.getElementById("btnLogout").disabled = true;
				//flag = true;
			};
			//웹소켓 접속중 에러가 발생하였음.
			ws.onerror = function(e) {
				alert("Server error:" + e);
			};

		} else {
			alert("브라우저가 웹소켓을 지원하지 않습니다.");
		}
    }
    
	//"웹소켓 끊기" 버튼을 클릭했을때
    function btnLogout_onclick() {
		ws.close();
    }

	//ws.onmessage에서 받은 CTI 이벤트를 파싱하고 처리한다.
	function EventHandler(evtStr){
		var array_Stat;
		array_EvtStr = splitString(evtStr, "_");
		if(array_EvtStr != null){
			for(var i=0; i<array_EvtStr.length; i++){
				array_Stat = null;
				array_Stat = splitString(array_EvtStr[i], "=");
				if(array_Stat != null){
					if(array_Stat[0] == "PARK.STAT"){	//센터현황
						STAT_Process(array_Stat[1]);
					}else if(array_Stat[0] == "PARK.CURRENT"){	//상담사별 상태
						CURRENT_Process(array_Stat[1]);
					}else if(array_Stat[0] == "MALL.STAT"){	//센터현황
						STAT_Process(array_Stat[1]);
					}else if(array_Stat[0] == "MALL.CURRENT"){	//상담사별 상태
						CURRENT_Process(array_Stat[1]);
					}
				}
			}
		}
	}
	function fnSelectScreen(args){
	}

	//상담사별 상태
	//사번*상태코드*지속시간*성명*전화번호
	function CURRENT_Process(args){		
		var statName = "";
		current_array = [];		//상세정보
		ready_array = [];		//대기
		talk_array = [];		//통화중
		acw_array = [];			//후처리
		nr1_array = [];			//휴식
		nr34_array = [];		//교육/회의
		nr2_array = [];			//식사
		array_Str = splitString(args, "@");
		if(array_Str != null){
			if(array_Str.length > 0){
				for(var j=0; j < array_Str.length; j++){
					statStrArray = splitString(array_Str[j], "*");
					var obj = new Object();
					obj.dept = deptname;
					obj.emp = statStrArray[0];
					obj.name = statStrArray[3];
					obj.ext = statStrArray[5];
					statName = getStatName(statStrArray[1]);
					obj.stat = statName;
					obj.icon = "<font size='3'><i class='" +icon+ "'></i></font>";
					obj.stat_org = statStrArray[1];
					obj.telno = statStrArray[4];
					obj.time = timeFormat(statStrArray[2]);
					obj.time_org = parseInt(statStrArray[2]);
					obj.ib = statStrArray[6];
					obj.ob = statStrArray[7];
					obj.rec = "<i class='fa fa-headphones' style='cursor: pointer;' onClick='interceptionExtno("+statStrArray[5]+");'></i>";

					current_array.push(obj);
					if(statStrArray[1] == "4"){		//대기
						obj.gbn = "ready";
						ready_array.push(obj);
					}else if(statStrArray[1] == "19" || statStrArray[1] == "20" || statStrArray[1] == "21" || statStrArray[1] == "22" || statStrArray[1] == "26"){		//인바운드, 아웃바운드, 내선, 컨설트, unKnown
						obj.gbn = "talk";
						talk_array.push(obj);
					}else if(statStrArray[1] == "9"){	//후처리
						obj.gbn = "acw";
						acw_array.push(obj);
					}else if(statStrArray[1] == "81"){	//휴식
						obj.gbn = "nr1";
						nr1_array.push(obj);
					}else if(statStrArray[1] == "83" || statStrArray[1] == "84"){	//교육, 업무
						obj.gbn = "nr34";
						nr34_array.push(obj);
					}else if(statStrArray[1] == "82"){	//식사
						obj.gbn = "nr2";
						nr2_array.push(obj);
					}
					
				}
				current_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org > b.time_org ? 1 : 0; //이름 오름차순
					//return a.name < b.name ? -1 : a.name < b.name ? 1 : 0;	//이름 내임차순
					//return a.emp < b.emp ? -1 : a.emp > b.emp ? 1 : 0;	//사번 오름차순
					//return a.emp < b.emp ? -1 : a.emp < b.emp ? 1 : 0;	//사번 내림착순
				});
				ready_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				talk_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				acw_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				nr1_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				nr34_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				nr2_array.sort(function(a, b) { // 오름차순
				    return a.time_org < b.time_org ? -1 : a.time_org < b.time_org ? 1 : 0; //이름 오름차순
				});
				$('#table_detail').bootstrapTable('load', current_array);	//상세 테이블 데이터 세팅
				$('#table_detail').bootstrapTable('mergeCells', {index: 0, field: 'dept', rowspan: current_array.length});	//상세 테이블 첫째컬럼 머지
				$('#table_ready').bootstrapTable('load', ready_array);	//간략 텝 대기 테이블 세팅
				$('#cnt_ready').val(ready_array.length);	//대기중 카운트
				$('#table_talk').bootstrapTable('load', talk_array);	//간략 텝 통화중 테이블 세팅
				$('#cnt_talk').val(talk_array.length);		//통화중 카운트
				$('#table_acw').bootstrapTable('load', acw_array);		//간략 텝 후처리 테이블 세팅
				$('#cnt_acw').val(acw_array.length);		//후처리 카운트
				$('#table_nr_1').bootstrapTable('load', nr1_array);		//간략 텝 휴식 테이블 세팅
				$('#cnt_nr_1').val(nr1_array.length);		//휴식 카운트
				$('#table_nr_34').bootstrapTable('load', nr34_array);	//간략 텝 교육/회의 테이블 세팅
				$('#cnt_nr_34').val(nr34_array.length);		//교육/회의 카운트
				$('#table_nr_2').bootstrapTable('load', nr2_array);		//간략 텝 식사중 테이블 세팅
				$('#cnt_nr_2').val(nr2_array.length);		//식사 카운트
			}
		}
	}

	//센터 현황
	//대기콜수^로그인수^대기상담사^통화중(인,아웃)^이석^후처리^통화중(인,아웃,내선,컨설트)^인바운드통화^아웃바운드통화
	function STAT_Process(args){	
		array_Str = splitString(args, "^");	
		document.getElementById("WaitCall").value = array_Str[0];
		document.getElementById("LoginAgent").value = array_Str[1];
		document.getElementById("ReadyAgent").value = array_Str[2];
		document.getElementById("TalkAgent").value = array_Str[6];
		document.getElementById("NotreadyAgent").value = array_Str[4];
		document.getElementById("AcwAgent").value = array_Str[5];
		var tmpEtc = array_Str[1] - array_Str[2] - array_Str[6] - array_Str[4] - array_Str[5];
		if(tmpEtc >= 0){
			document.getElementById("etcAgent").value = tmpEtc;
		}else {
			document.getElementById("etcAgent").value = 0;
		}
	}

	function splitString(arrayString, splitChar) {
		if (arrayString == null || splitChar == null) {
			return null;
		}
		return arrayString.split(splitChar);
	}
	
	function clearLog(){
		var x = document.getElementById("log");
		x.innerHTML = "";
	}

	function timeFormat(seconds) {	
        var rtnval = "";
        if(seconds == "" || seconds == null || seconds == NaN){
            rtnval = "00:00:00";
        }else{
              var pad = function(x) { return (x < 10) ? "0"+x : x; }
              rtnval = pad(parseInt(seconds / (60*60))) + ":" +
                 pad(parseInt(seconds / 60 % 60)) + ":" +
                 pad(seconds % 60);
        }
        if(rtnval == "NaN:NaN:NaN"){
        	rtnval = "00:00:00";
        }
        return rtnval;
    }
	
	function getStatName(statValue){
		var rtnName = "";
		switch(statValue) {
			case("0"): 
				rtnName = "모니터링 안함";
				icon = "";
				break;
			case("1"): 
				rtnName = "모니터링중";
				icon = "";
				break;
			case("2"): 
				rtnName = "로그인";
				icon = "fa fa-power-off";
				break;
			case("3"): 
				rtnName = "수화기 내림";
				icon = "fa fa-chevron-down";
				break;
			case("4"): 
				rtnName = "대기";
				icon = "fa fa-play-circle-o";
				break;
			case("5"): 
				rtnName = "수화기듬";
				icon = "fa fa-chevron-up";
				break;
			case("6"): 
				rtnName = "다이얼링중";
				icon = "fa fa-th";
				break;
			case("7"): 
				rtnName = "벨울림중";
				icon = "fa fa-bell-o";
				break;
			case("8"): 
				rtnName = "이석중";
				icon = "fa fa-user-times";
				break;
			case("81"): 
				rtnName = "이석(휴식중)";
				icon = "fa fa-coffee";
				break;
			case("82"): 
				rtnName = "이석(식사중)";
				icon = "fa fa-cutlery";
				break;
			case("83"): 
				rtnName = "이석(교육중)";
				icon = "fa fa-graduation-cap";
				break;
			case("84"): 
				rtnName = "이석(업무중)";
				icon = "fa fa-keyboard-o";
				break;
			case("9"): 
				rtnName = "후처리중";
				icon = "fa fa-pencil";
				break;
			case("13"): 
				rtnName = "통화대기";
				icon = "fa fa-pause-circle-o";
				break;
			case("19"): 
				rtnName = "컨설트통화중";
				icon = "fa fa-users";
				break;
			case("20"): 
				rtnName = "내선통화중";
				icon = "fa fa-volume-control-phone";
				break;
			case("21"): 
				rtnName = "아웃바운드 통화중";
				icon = "fa fa-volume-control-phone";
				break;
			case("22"): 
				rtnName = "인바운드 통화중";
				icon = "fa fa-volume-control-phone";
				break;
			case("23"): 
				rtnName = "로그아웃";
				icon = "fa fa-times-circle";
				break;
			case("24"): 
				rtnName = "다이얼완료";
				icon = "";
				break;
			case("25"): 
				rtnName = "다이얼링중포기";
				icon = "fa fa-times";
				break;
			case("26"): 
				rtnName = "통화중";
				icon = "fa fa-volume-control-phone";
				break;
			case("27"): 
				rtnName = "벨울림중 포기";
				icon = "fa fa-times";
				break;
			case("28"): 
				rtnName = "보류중";
				icon = "fa fa-volume-off";
				break;
			case("29"): 
				rtnName = "보류해제";
				icon = "fa fa-volume-up";
				break;
			case("30"): 
				rtnName = "보류중 포기";
				icon = "fa fa-times";
				break;
			case("31"): 
				rtnName = "호전환 전송";
				icon = "";
				break;
			case("32"): 
				rtnName = "착신전환";
				icon = "";
				break;
			case("33"): 
				rtnName = "호전환 완료";
				icon = "";
				break;
			case("34"): 
				rtnName = "컨퍼런스 전송";
				icon = "";
				break;
			case("35"): 
				rtnName = "컨퍼런스 연결";
				icon = "";
				break;
			case("36"): 
				rtnName = "다자통화중 통화자 추가";
				icon = "";
				break;
			case("37"): 
				rtnName = "다자통화중 통화자 삭제";
				icon = "";
				break;
			case("38"): 
				rtnName = "유저이벤트";
				icon = "";
				break;
			case("39"): 
				rtnName = "다이얼링중(상태모름)";
				icon = "";
				break;
			case("40"): 
				rtnName = "다이얼링중(내선)";
				icon = "fa fa-th";
				break;
			default : 
				break;
		}
		return rtnName;
	}
	</script>

<body>
<form name="frm">
	<input type="hidden" id ="gubun" name="gubun" value="">
	<input type="hidden" id ="fromdt" name="fromdt" value="">
	<input type="hidden" id ="todt" name="todt"  value="">
	<input type="hidden" id ="groups" name="groups"  value="1_2_182">
	<input type="hidden" id ="agents" name="agents"  value="">
	<input type="hidden" id ="qrymode" name="qrymode" value="">
	<div>
	<table style="width: 100%">
		<tr>
			<td>
				<div>
					정비예약파트 실시간 현황
				</div>
			</td>
			<td style="text-align: right; width: 30%;">
				<div>
					<span id="realTimer"></span>
				</div>
			</td>
		</tr>
	</table>
	</div>


	<!-- 메뉴 영역 시작-->
	<div class="container-fluid page-body-wrapper">
		<div class="navbar">
			<div class="col-12 col-md-12" style="display: inline-block;">
				[종합상담현황] 로그인 : 00명,  고객대기 : 0명,  상담사 대기 0명,  작업인원 : 0명, 상담중 : 0명,  휴식인원 : 0명
			</div>
		</div>
		<table style="width: 100%;">
			<tr>
				<td align="left" style="height:40px; width:150px; vertical-align: center; background-color: RGB(242,222,222); border-top-left-radius: 3px; border-top-right-radius: 3px;">
					&nbsp;&nbsp;&nbsp;대기고객 : <input type="text" id="WaitCall" size="3" class="input mini" style="text-align: center;" />
				</td>
				<td style="width:5px;">
				</td>
				<td align="left" style="height:40px; vertical-align: center; background-color: RGB(242,222,222); border-top-left-radius: 3px; border-top-right-radius: 3px;">
					&nbsp;&nbsp;&nbsp;전체 : <input type="text" id="LoginAgent" size="3" class="input mini" style="text-align: center;" />
					&nbsp;&nbsp;&nbsp;통화중 : <input type="text" id="TalkAgent" size="3" class="input mini" style="text-align: center;" />
					&nbsp;&nbsp;&nbsp;대기중 : <input type="text" id="ReadyAgent" size="3" class="input mini" style="text-align: center;" />
					&nbsp;&nbsp;&nbsp;후처리중 : <input type="text" id="AcwAgent" size="3" class="input mini" style="text-align: center;" />
					&nbsp;&nbsp;&nbsp;이석중 : <input type="text" id="NotreadyAgent" size="3" class="input mini" style="text-align: center;" />
					&nbsp;&nbsp;&nbsp;기타 : <input type="text" id="etcAgent" size="3" class="input mini" style="text-align: center;" />
				</td>
			</tr>
		</table>			
		<br>
		<ul class="nav nav-tabs" id="myTab" role="tablist">
	  		<li class="nav-item">
	    		<a class="nav-link active" id="detail-tab" data-toggle="tab" href="#detail" role="tab" aria-controls="detail" aria-selected="true" onclick="fnSelectScreen('Detail');">상세정보</a>
	  		</li>
	  		<li class="nav-item">
	    		<a class="nav-link" id="simple-tab" data-toggle="tab" href="#simple" role="tab" aria-controls="simple" aria-selected="false" onclick="fnSelectScreen('Simple');">간략정보</a>
	  		</li>
		</ul>
		<div class="tab-content" id="myTabContent">
	  		<div class="tab-pane fade show active" id="detail" role="tabpanel" aria-labelledby="detail-tab" style="padding-top: 10px;">
				<table id="table_detail" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="asc" data-sortable="true" data-show-columns="false" style="text-align: center;">
					<thead style="text-align: center;">
				    	<tr>
				    		<th data-field="dept">소속</th>
				      		<th data-field="name" data-sortable="true">상담사</th>
				      		<th data-field="emp" data-sortable="true">CTI ID</th>
				      		<th data-field="ext" data-sortable="true">내선번호</th>
				      		<th data-field="icon">아이콘</th>
				      		<th data-field="stat" data-sortable="true">상담사 상태</th>
				      		<th data-field="stat_org" data-visible="false">상담사 상태</th>
				      		<th data-field="time" data-sortable="true">지속시간</th>
				      		<th data-field="time_org" data-sortable="true" data-visible="false">지속시간(sec)</th>
				      		<th data-field="ib" data-sortable="true">인바운드</th>
				      		<th data-field="ob" data-sortable="true">아웃바운드</th>
				      		<th data-field="telno">고객정보</th>
				    	</tr>
				  	</thead>
				</table>
			</div>
			<div class="tab-pane fade" id="simple" role="tabpanel" aria-labelledby="simple-tab" style="padding-top: 10px;">
				<table style="width: 98%">
					<tr>
						<td style="width: 33.3%; padding: 2px;">
							<div class="card">
							  <div class="card-header">
							  	<div class="row">
							  		<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-play-circle-o" aria-hidden="true"></i>&nbsp;대기중</div>
									<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_ready" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="ready_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
  								</div>
							  </div>
							  <div class="card-body">
							  	<table id="table_ready" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
									<thead style="text-align: center;">
							    		<tr>
									    	<th data-field="dept">소속</th>
									    	<th data-field="name">상담사</th>
									    	<th data-field="time">지속시간</th>
									    	<th data-field="time_org" data-visible="false">지속시간(sec)</th>
									    	<th data-field="stat_org" data-visible="false">상담사 상태</th>
									    	<th data-field="gbn" data-visible="false">그리드구분</th>
									    </tr>
									</thead>
								</table>
							  </div>
							</div>
						</td>
						<td style="width: 33.3%; padding: 2px;">
						<div class="card">
							  <div class="card-header">
							<div class="row">
								<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-volume-control-phone" aria-hidden="true"></i>&nbsp;통화중</div>
								<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_talk" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="talk_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
							</div>
							</div>
							<div class="card-body">
									<table id="table_talk" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
										<thead style="text-align: center;">
							    			<tr>
									    		<th data-field="dept">소속</th>
									      		<th data-field="name">상담사</th>
									      		<th data-field="time">지속시간</th>
									      		<th data-field="time_org" data-visible="false">지속시간(sec)</th>
									      		<th data-field="telno">고객정보</th>
									      		<th data-field="rec">감청</th>
									      		<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
									      		<th data-field="gbn" data-visible="false">그리드구분</th>
									    	</tr>
									  	</thead>
									</table>
								</div>
								</div>
						</td>
						<td style="width: 33.3%; padding: 2px;">
							<div class="card">
							  <div class="card-header">
							  <div class="row">
								<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-pencil" aria-hidden="true"></i>&nbsp;후처리중</div>
								<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_acw" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="acw_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
							</div>
							  </div>
							  <div class="card-body">
							  <table id="table_acw" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
										<thead style="text-align: center;">
							    			<tr>
									    		<th data-field="dept">소속</th>
									      		<th data-field="name">상담사</th>
									      		<th data-field="time">지속시간</th>
									      		<th data-field="time_org" data-visible="false">지속시간(sec)</th>
									      		<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
									      		<th data-field="gbn" data-visible="false">그리드구분</th>
									    	</tr>
									  	</thead>
									</table>
							  </div>
							 </div>
						</td>
					</tr>
					<tr>
						<td style="width: 33.3%; padding: 2px;">
						<div class="card">
							  <div class="card-header">
							  <div class="row">
								<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-coffee" aria-hidden="true"></i>&nbsp;휴식</div>
								<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_1" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="nr1_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
							</div>
							  </div>
							  <div class="card-body">
							  <table id="table_nr_1" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center; ">
										<thead style="text-align: center;">
							    			<tr>
									    		<th data-field="dept">소속</th>
									      		<th data-field="name">상담사</th>
									      		<th data-field="time">지속시간</th>
									      		<th data-field="time_org" data-visible="false">지속시간(sec)</th>
									      		<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
									      		<th data-field="gbn" data-visible="false">그리드구분</th>
									    	</tr>
									  	</thead>
									</table>
							  </div>
							 </div>
						</td>
						<td style="width: 33.3%; padding: 2px;"> 
						<div class="card">
							  <div class="card-header">
							  <div class="row">
								<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-keyboard-o" aria-hidden="true"></i>&nbsp;교육/업무</div>
								<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_34" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="nr34_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
							</div>
							  </div>
							  <div class="card-body">
							  <table id="table_nr_34" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
										<thead style="text-align: center;">
							    			<tr>
									    		<th data-field="dept">소속</th>
									      		<th data-field="name">상담사</th>
									      		<th data-field="time">지속시간</th>
									      		<th data-field="time_org" data-visible="false">지속시간(sec)</th>
									      		<th data-field="stat_org" data-visible="false">상담사 상태코드</th>
									      		<th data-field="gbn" data-visible="false">그리드구분</th>
									    	</tr>
									  	</thead>
									</table>
							  </div>
							 </div>
						</td>
						<td style="width: 33.3%; padding: 2px;">
						<div class="card">
							  <div class="card-header">
							  <div class="row">
								<div class="col" style="font-weight: bold;">&nbsp;<i class="fa fa-cutlery" aria-hidden="true"></i>&nbsp;식사중</div>
								<div class="col" style="text-align: right;"><input type="text" size="3" id="cnt_nr_2" readonly="readonly" style="text-align: right;">&nbsp;<input type="text" size="3" id="nr2_time" class="input_change" style="text-align: right; background-color: rgb(214, 216, 217);"></div>
							</div>
							  </div>
							  <div class="card-body">
							  <table id="table_nr_2" class="table-sm" data-height="400" data-virtual-scroll="true" data-sort-name="time" data-sort-order="desc" data-show-columns="false" data-row-style="rowStyle" style="text-align: center;">
									  <thead style="text-align: center;">
									    <tr>
									      <th data-field="dept">소속</th>
									      <th data-field="name">상담사</th>
									      <th data-field="time">지속시간</th>
									      <th data-field="time_org" data-visible="false">지속시간(sec)</th>
									      <th data-field="stat_org" data-visible="false">상담사 상태코드</th>
									      <th data-field="gbn" data-visible="false">그리드구분</th>
									    </tr>
									  </thead>
									</table>
							  </div>
							 </div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

</form>
</body>

<script>
	//[조회] 버튼 누르기 
	$("#btnSearch").click(function(e) {
		btnLogin_onclick();
	});

	function selGroupChanged(){
		//getAgentList($("#selGroup option:selected").val());
	}

	function rowStyle(row, index) {
		//console.log(index);
	}

	$(".input_change").change(function(){
		localStorage.setItem('stat.' + this.id, $('#'+this.id).val());
	});

	$(function() {
		var ready_time = localStorage.getItem('stat.ready_time');
		var talk_time = localStorage.getItem('stat.talk_time');
		var acw_time = localStorage.getItem('stat.acw_time');
		var nr1_time = localStorage.getItem('stat.nr1_time');
		var nr34_time = localStorage.getItem('stat.nr34_time');
		var nr2_time = localStorage.getItem('stat.nr2_time');
		
		var grid_height = window.innerHeight - 260;
		var grid_height2 = (window.innerHeight - 320) /2;
		var dt = [];
	    $('#table_detail').bootstrapTable({data: dt});
		$('#table_ready').bootstrapTable({data: dt});
		$('#table_talk').bootstrapTable({data: dt});
		$('#table_acw').bootstrapTable({data: dt});
		$('#table_nr_1').bootstrapTable({data: dt});
		$('#table_nr_34').bootstrapTable({data: dt});
		$('#table_nr_2').bootstrapTable({data: dt});

		$('#table_detail').bootstrapTable('resetView' , {height: grid_height});
		$('#table_ready').bootstrapTable('resetView' , {height: grid_height2});
		$('#table_talk').bootstrapTable('resetView' , {height: grid_height2});
		$('#table_acw').bootstrapTable('resetView' , {height: grid_height2});
		$('#table_nr_1').bootstrapTable('resetView' , {height: grid_height2});
		$('#table_nr_34').bootstrapTable('resetView' , {height: grid_height2});
		$('#table_nr_2').bootstrapTable('resetView' , {height: grid_height2});

		if(ready_time == null){
			ready_time = "500";
		}
		$('#ready_time').val(ready_time);
		
		if(talk_time == null){
			talk_time = "600";
		}
		$('#talk_time').val(talk_time);
		
		if(acw_time == null){
			acw_time = "60";
		}
		$('#acw_time').val(acw_time);
		
		if(nr1_time == null){
			nr1_time = "1800";
		}
		$('#nr1_time').val(nr1_time);
		
		if(nr34_time == null){
			nr34_time = "3000";
		}
		$('#nr34_time').val(nr34_time);
		
		if(nr2_time == null){
			nr2_time = "1800";
		}
		$('#nr2_time').val(nr2_time);
			
	});

	function rowStyle(row, index) {
		var tm = 0;
		if(row.gbn == "ready"){
			tm = parseInt($('#ready_time').val());
		}else if(row.gbn == "talk"){
			tm = parseInt($('#talk_time').val());
		}else if(row.gbn == "acw"){
			tm = parseInt($('#acw_time').val());
		}else if(row.gbn == "nr1"){
			tm = parseInt($('#nr1_time').val());
		}else if(row.gbn == "nr34"){
			tm = parseInt($('#nr34_time').val());
		}else if(row.gbn == "nr2"){
			tm = parseInt($('#nr2_time').val());
		}
		
		if(row.time_org >= tm){
			return {
				css: {
					color: 'black',
					background : '#F3E3F3'						
				}
			}
		}else{
			return {
				css: {
					color: 'black'
				}
			}
		}
	}

	function leadingZeros(n, digits) {
	    var zero = '';
	    n = n.toString();
	    if (n.length < digits) {
	        for (i = 0; i < digits - n.length; i++)
	            zero += '0';
	    }
	    return zero + n;
	}
	
	function timer(){ 
	    var d = new Date();

	    var date = leadingZeros(d.getFullYear(), 4) + '년 ' +
	        leadingZeros(d.getMonth() + 1, 2) + '월 ' +
	        leadingZeros(d.getDate(), 2) + '일 ';

	    var time = leadingZeros(d.getHours(), 2) + '시 ' +
	        leadingZeros(d.getMinutes(), 2) + '분 ';

	    var txt_time = date + "<br>" + time;
		 return txt_time;
	} 

	function setData(){
	}

	function get_timer(){ 
		setData();
		 // 함수값 불러와서, 태그 안에 집어넣기. 
		 var timetxt = timer();
		 if( document.getElementById( "realTimer" ) ){	//페이지가 로드되지 않았을때 객체가 null일경우 에러발생됨
			 document.getElementById( "realTimer" ).innerHTML = timetxt;
		 }
		  
		 // 1000 밀리초(=1초) 후에, 이 함수를 실행하기 (반복 실행 효과). 
		 setTimeout( "get_timer()", 1000 ); 
	}

	$(window).ready(function(){
		// (페이지가 로드되면) 함수를 불러오기. 
		//alert("wall1 load");
		var callFunction = get_timer(); 
	});

	
</script>
</html>
