<%@ 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">
<!-- css -->
<jsp:include page="/jsp/common/include/css.jsp"/>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/jsondiffpatch/formatters-styles/annotated.css"/>" />
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/jsondiffpatch/formatters-styles/html.css"/>" />
<style>
    .pre_container {
      width: 100%; /* 원하는 너비로 설정 */
    }
    .pre_container pre {
      white-space: pre-wrap; /* 줄 바꿈을 허용하는 설정 */
    }
    .display_none {
      display: none; /* pre 태그 안의 내용을 숨김 */
    }
    .border-right_solid {
    	border-right: 1px solid #a3a9b1 !important;
    	text-align: center !important;
    }
</style>
<!-- script -->
<jsp:include page="/jsp/common/include/script.jsp"/>
<script language="javascript" src="<c:url value="/jsondiffpatch/jsondiffpatch.umd.slim.js"/>"></script>
<script language="javascript" >
var url      ='<c:url value="/onl/admin/adapter/adapterAuditMan.json" />';
var url_view ='<c:url value="/onl/admin/adapter/adapterAuditMan.view" />';

var isDetail = false;

function init(key,revNo,callback){
	$.ajax({
		type : "POST",
		url:url,
		dataType:"json",
		data:{cmd: 'LIST_INIT_COMBO'},
		success:function(json){
			new makeOptions("CODE","NAME").setObj($("select[name=eaibzwkdstcd]")).setFormat(codeName3OptionFormat).setData(json.bizRows).rendering();				// 업무구분코드
			new makeOptions("CODE","NAME").setObj($("select[name=adptrcd]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.adapterTypeRows).rendering();	// 어댑터 유형
			new makeOptions("CODE","NAME").setObj($("select[name=adptrmsgdstcd]")).setFormat(codeName3OptionFormat).setData(json.msgTypeRows).rendering();			// 메시지타입
			new makeOptions("CODE","NAME").setObj($("select[name=msgencode]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.msgEncodeRows).rendering();    // 메시지문자셋
			
			new makeOptions("CODE","NAME").setObj($("select[name=adptriodstcd]")).setData(json.adptrIoDstcdRows).setFormat(codeName3OptionFormat).rendering();		// IN/OUT 구분
			new makeOptions("CODE","NAME").setObj($("select[name=adptrmsgptrncd]")).setData(json.adptrMsgPtrnCdRows).setFormat(codeName3OptionFormat).rendering();	// 표준/비표준 구분
			new makeOptions("CODE","NAME").setObj($("select[name=adptruseyn]")).setData(json.ynNumRows).setFormat(codeName3OptionFormat).rendering();				// 어댑터 사용구분
			new makeOptions("CODE","NAME").setObj($("select[name=sndrcvhmslogyn]")).setData(json.ynNumRows).setFormat(codeName3OptionFormat).rendering();			// 송수신 로그여부
			new makeOptions("CODE","NAME").setObj($("select[name=spcfcluuseyn]")).setData(json.ynNumRows).setFormat(codeName3OptionFormat).rendering();				// 특정LU 사용여부
			
			new makeOptions("CODE","NAME").setObj($("select[name=osidinstiyn]")).setData(json.ynTypeRows).setFormat(codeName3OptionFormat).rendering();				// 대외기관 여부
			new makeOptions("CODE","NAME").setObj($("select[name=moniuseyn]")).setData(json.ynRows).setFormat(codeName3OptionFormat).rendering();				// 모니터링 사용 여부
			new makeOptions("CODE","NAME").setObj($("select[name=testmasteryn]")).setData(json.testMasterYnRows).setFormat(codeName3OptionFormat).rendering();			//TAS참조대표어댑터여부
			
			if(typeof callback === 'function') {
				callback(key,revNo,'DETAIL');
    		}
			
		},
		error:function(e){
			alert(e.responseText);
		}
	});

}
function detail(key,revNo,cmd){
	if (!isDetail) return ;
	
	$.ajax({  
		type : "POST",
		url:url,
		dataType:"json",
		data:{cmd: cmd
			, adptrbzwkgroupname : key
			, revNo : revNo
		},
		success:function(json){
			const detail = json;
			
			//adapterGroup
			$("input[name=revNo]").attr('readonly',true);
			$("input[name=revTstmp]").attr('readonly',true);
			$("input[name=userId]").attr('readonly',true);
			$("input[name=adptrbzwkgroupname]").attr('readonly',true);
			$("select[name=eaibzwkdstcd]").prop('disabled',true);
			$("select[name=adptrmsgptrncd]").prop('disabled',true);
			$("select[name=adptruseyn]").prop('disabled',true);
			$("select[name=sndrcvhmslogyn]").prop('disabled',true);
			$("select[name=adptriodstcd]").prop('disabled',true);
			$("select[name=adptrcd]").prop('disabled',true);
			$("select[name=adptrmsgdstcd]").prop('disabled',true);
			$("select[name=msgencode]").prop('disabled',true);
			$("input[name=refclsname]").attr('readonly',true);
			
			$("#detail input,#detail select").each(function(){
				const name = $(this).attr('name');
				$(this).val(detail[name]);
			});
			
			//requestCurrentJson('CHANGE');
			//setJsonTitle('변경분(현재)');
			document.getElementById("json").textContent = JSON.stringify(json, undefined, 2);
			document.getElementById("json_snapshot").textContent = JSON.stringify(json, undefined, 2);
			setJsonTitle('[현재 Revision 스냅샷]');
			requestPrevJson(diffJsonDisplay);// 현재와 이전 json 비교
		},
		error:function(e){
			if(e.responseText == '')
				alert('데이터 없음');
			else
				alert(e.responseText);
		}
	});


}

$(document).ready(function() {	
	const key ="${param.adptrBzwkGroupName}";
	if (key != "" && key !="null"){
		isDetail = true;
	}
	
	init(decodeURIComponent(key),"${param.revNo}",detail);

	const returnUrl = getReturnUrlForReturn();
	$("#btn_previous").click(function(){
		goNav(returnUrl);//LIST로 이동
	});
	
	// 변경분 보기
	$("#btn_modifiedparts").click(function(){
		requestCurrentJson('CHANGE');
		setJsonTitle('[현재 Revision 변경분]');
	});
	
	// 스냅샷 보기
	$("#btn_snapshot").click(function(){
		requestCurrentJson('DETAIL');
		setJsonTitle('[현재 Revision 스냅샷]');
	});
	
	$("#btn_jsoncopy").click(function(){
		window.navigator.clipboard.writeText(document.getElementById("json").textContent).then(() => {
			alert($("#json_title").text() + " 복사완료");
		});
	});
	$("#btn_prevjsoncopy").click(function(){
		window.navigator.clipboard.writeText(document.getElementById("prev_json").textContent).then(() => {
			alert($("#pre_json_title").text() + " 복사완료");
		});
	});
	
	// 이전 Revision
	$("#btn_prevrevision").click(function(){
		detail($("input[name=adptrbzwkgroupname]").val(), $("input[name=revNo]").val(), 'PREV');
	});
	
	// 다음 Revision
	$("#btn_nextrevision").click(function(){
		detail($("input[name=adptrbzwkgroupname]").val(), $("input[name=revNo]").val(), 'NEXT');
	});
	
	// 이전 Revision 스냅샷의 이전
	$("#btn_prevsnapshot").click(function(){
		requestPrevJsonSnapshot($("input[name=preRevNo]").val(), 'PREV', diffJsonDisplay);
	});
	
	// 이전 Revision 스냅샷의 다음
	$("#btn_nextsnapshot").click(function(){
		if($("input[name=preRevNo]").val() == $("input[name=revNo]").val()) {
			alert("더이상의 정보가 없습니다.");
			return;
		}
		requestPrevJsonSnapshot($("input[name=preRevNo]").val(), 'NEXT', diffJsonDisplay);
	});
	
	buttonControl(isDetail);
	titleControl(isDetail);
	
});

function requestCurrentJson(cmd) {
	$.ajax({  
		type : "POST",
		url:url,
		dataType:"json",
		data:{cmd: cmd
		     , adptrbzwkgroupname : $("input[name=adptrbzwkgroupname]").val()
		     , revNo : $("input[name=revNo]").val()
		},
		success:function(json){
			document.getElementById("json").textContent = JSON.stringify(json, undefined, 2);
		},
		error:function(e){
			alert(e.responseText);
		}
	});
}

function requestPrevJson(callback) {
	requestPrevJsonSnapshot($("input[name=revNo]").val(), "PREV", callback);
}

// [이전 Revision 스냅샷] 부분의 json을 조회한다.
function requestPrevJsonSnapshot(preRevNo, cmd, callback) {
	$.ajax({  
		type : "POST",
		url:url,
		dataType:"json",
		data:{cmd: cmd
		     , adptrbzwkgroupname : $("input[name=adptrbzwkgroupname]").val()
		     , revNo : preRevNo
		},
		success:function(json){
			document.getElementById("prev_json").textContent = JSON.stringify(json, undefined, 2);
			$("input[name=preRevNo]").val(json.revNo);
			callback();
		},
		error:function(e){
			document.getElementById("prev_json").textContent = '';
			document.getElementById("diff_json").textContent = '';
		}
	});
}

function setJsonTitle(title) {
	document.getElementById("json_title").textContent = title;
}

function diffJsonDisplay() {
	document.getElementById("diff_json").textContent  = '';
	
	const json1 = JSON.parse($('#json_snapshot').text());
	const json2 = JSON.parse($('#prev_json').text());
	
	const diff = jsondiffpatch.diff(json2, json1);
	if (typeof diff === 'undefined') {
		document.getElementById("diff_json").innerHTML = 'no diff';
		return;
	}
	document.getElementById("diff_json").innerHTML = jsondiffpatch.formatters.html.format(diff, json1);
	jsondiffpatch.formatters.html.hideUnchanged();
	
	//document.getElementById("diff_json").innerHTML = jsondiffpatch.formatters.annotated.format(diff);
}
</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" id="content_middle">
				<div class="search_wrap">
					<button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
					<button type="button" class="cssbtn" id="btn_prevrevision" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> 이전 Revision</button>
					<button type="button" class="cssbtn" id="btn_nextrevision" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_forward</i> 다음 Revision</button>
				</div>
				
				<div class="title_adptdetail">어댑터 변경이력 상세</div>
				
				<div class="table_row_title">Revision 정보</div>
				<table id="detail" class="table_row"  cellspacing="0"  >
					<tr>
						<th width="15%">Revision 번호</th>
						<td width="35%" ><input type="text" name="revNo"/></td>
						<th width="15%">변경 일자</th>
						<td width="35%" ><input type="text" name="revTstmp"/></td>
					</tr>
					<tr>
						<th width="15%">작업자ID</th>
						<td width="35%" ><input type="text" name="revUserId"/></td>
						<th width="15%"></th>
						<td width="35%" ></td>
					</tr>
				</table>
						
				<div class="table_row_title">어댑터 기본 정보</div>
				<table id="detail" class="table_row"  cellspacing="0"  >
					<tr>
						<th width="15%"><%=localeMessage.getString("adapterDetail.adptrbzwkgroupname")%></th>
						<td width="35%" ><input type="text" name="adptrbzwkgroupname" style="width:calc(100% - 65px);"/>
						</td>
						<th width="15%"><%=localeMessage.getString("adapterDetail.eaibzwkdstcd")%></th>
						<td width="35%">
							<div class="select-style">
								<select name="eaibzwkdstcd" ></select> 
							</div>
						</td>
					</tr>
					<tr>
						<th><%=localeMessage.getString("adapterDetail.adptrmsgptrncd")%></th>
						<td >
							<div class="select-style">
								<select name="adptrmsgptrncd"></select>
							</div>
						</td>
						<th><%=localeMessage.getString("adapterDetail.adptruseyn")%></th>
						<td >
							<div class="select-style">
								<select name="adptruseyn"></select>
							</div>
						</td>
					</tr>
					<tr>
						<th><%=localeMessage.getString("adapterDetail.sndrcvhmslogyn")%></th>
						<td >
							<div class="select-style">
								<select name="sndrcvhmslogyn"></select>
							</div>
						</td>
						<th><%=localeMessage.getString("adapterDetail.adptriodstcd")%></th>
						<td >
							<div class="select-style">
								<select name="adptriodstcd"></select>
							</div>
						</td>
					</tr>
					<tr>
						<th><%=localeMessage.getString("adapterDetail.adptrcd")%></th>
						<td >
							<div class="select-style">
								<select name="adptrcd"></select> 
							</div>
						</td>
						<th><%=localeMessage.getString("adapterDetail.adptrmsgdstcd")%></th>
						<td >
							<div class="select-style">
								<select name="adptrmsgdstcd"></select> 
							</div>
						</td>
					</tr>
					<tr>
						<th><%=localeMessage.getString("adapterDetail.msgencode")%></th>
						<td>
							<div class="select-style">
								<select name="msgencode"></select>
							</div>
						</td>
						<th><%=localeMessage.getString("adapterDetail.refclsname")%></th>
						<td><input type="text" name="refclsname"/>
						</td>
					</tr>
				</table>
				
				<div class="table_row_title">JSON</div>
				<table id="json_compare" class="table_row"  cellspacing="0">
					<tbody>
						<tr height="30px">
							<th class="border-right_solid" width="50%" colspan="2">
								[스냅샷 비교결과]
							</th>
						</tr>
						<tr>
							<td valign="top" colspan="2">
								<div id="diff_json"></div>
							</td>
						</tr>
						<tr height="40px">
							<th class="border-right_solid" width="50%" >
								<span id="pre_json_title" >[이전 Revision 스냅샷]</span>
								<button type="button" class="cssbtn" id="btn_prevsnapshot" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> 이전</button>
								<button type="button" class="cssbtn" id="btn_nextsnapshot" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_forward</i> 다음</button>
								<button type="button" class="cssbtn" id="btn_prevjsoncopy" level="R" status="DETAIL,NEW"><i class="material-icons">content_copy</i> JSON 복사</button>
								<input type="hidden" name="preRevNo"/>
							</th>
							<th class="border-right_solid" width="50%" >
								<span id="json_title" ></span>
								<button type="button" class="cssbtn" id="btn_modifiedparts" level="R" status="DETAIL,NEW"><i class="material-icons">search</i> 변경분 보기</button>
								<button type="button" class="cssbtn" id="btn_snapshot" level="R" status="DETAIL,NEW"><i class="material-icons">search</i> 스냅샷 보기</button>
								<button type="button" class="cssbtn" id="btn_jsoncopy" level="R" status="DETAIL,NEW"><i class="material-icons">content_copy</i> JSON 복사</button>
							</th>
						</tr>
						<tr>
							<td valign="top" style="background-color: rgba(255, 187, 187, 0.1);">
								<div class="pre_container">
									<pre id="prev_json" class="jsondiffpatch-delta"></pre>
								</div>
							</td>
							<td valign="top" style="background-color: rgba(	187, 255, 187, 0.1);">
								<div class="pre_container">
									<pre id="json" class="jsondiffpatch-delta"></pre>
									<pre id="json_snapshot" class="display_none"></pre>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				
			</div><!-- end content_middle -->
		</div><!-- end right_box -->	
	</body>
</html>

