<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ page import="com.eactive.eai.rms.common.login.SessionManager"%>
<%@ 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"/>
	<style>
		.jexcel tbody {
			font-size: 13px;
		}
	</style>

	<script language="javascript" >
		var isPop = "${param.pop}";
		var isDetail = false;
		var url      ='<c:url value="/onl/admin/rule/standardLayoutHistoryMan.json" />';
		var url_view ='<c:url value="/onl/admin/rule/standardLayoutHistoryMan.view" />';
		var roleString = "<%=SessionManager.getRoleIdString(request)%>";
		let userId = '<%=SessionManager.getUserId(request) %>';
		var returnUrl = getReturnUrlForReturn();
		var sevrArr = new Array();

		let operationType ;

		let grid;

		function detail(operationSeq){
			$.ajax({
				type : "POST",
				url:url,
				dataType:"json",
				data:{cmd: 'DETAIL', operationSeq: operationSeq},
				success:function(json){
					var data = json.detail;

					$("input[name=loutName]").attr('readonly',true);

					$("#ajaxForm input[type!=radio],#ajaxForm select,#ajaxForm textarea").each(function(){
						var key = $(this).attr("name");
						var tag  = $(this).prop("tagName").toLowerCase();
						// var key = name.toUpperCase();
						let value = data[key];
						if(key == 'operationDatetime'){
							const dateFormat = new Date(value);
							value = dateFormat.toLocaleString();
						}else if(key == 'operationType'){
							operationType = value;
							switch(value){
								case 'NEW': value = '<%= localeMessage.getString("standardLayoutHistory.operationDescNew") %>'; break;
								case 'MODIFY': value = '<%= localeMessage.getString("standardLayoutHistory.operationDescModify") %>'; break;
								case 'DEPLOY': value = '<%= localeMessage.getString("standardLayoutHistory.operationDescDeploy") %>'; break;
								case 'DELETE': value = '<%= localeMessage.getString("standardLayoutHistory.operationDescDelete") %>'; break;
							}
						}
						$(tag+"[name="+key+"]").val(value);
					});

					if(operationType != 'DELETE') {
						initializeEditGrid(json);
					}else{
						$('#labelEditGrid').hide();
					}
				},
				error:function(e){
					alert(e.responseText);
				}
			});
		}

		function initializeEditGrid(layoutData){
			const itemTypes = [{id:2, name:'Field'}, {id:3, name:'Group'}, {id:4, name:'Grid'}, {id:5, name:'Field Array'}, {id:9, name:'Biz Data'}];
			const fieldTypes = [{id:1, name:'Element'}, {id:2, name:'Attribute'}];
			const dataTypes = [{id:1, name:'String'}, {id:2, name:'Number'},{id:11, name:'ZZ String'}, {id:12, name:'LL Number'}];
			columns = [ // for columnData prop
				{
					title: '<%= localeMessage.getString("standardLayout.itemName") %>',
					name: 'itemName',
					type: 'text',
					width: 230,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.itemDesc") %>',
					name: 'itemDesc',
					type: 'text',
					width: 230,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.itemLevel") %>',
					name: 'itemLevel',
					type: 'text',
					width: 60,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.itemType") %>',
					name: 'itemType',
					type: 'dropdown',
					source: itemTypes,
					width: 80,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.arraySize") %>',
					name: 'arraySize',
					type: 'text',
					width: 60,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.fieldType") %>',
					name: 'fieldType',
					type: 'dropdown',
					source: fieldTypes,
					width: 100,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.dataLength") %>',
					name: 'dataLength',
					type: 'numeric',
					width: 70,
					align: 'center',
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.dataType") %>',
					name: 'dataType',
					type: 'dropdown',
					source: dataTypes,
					width: 100,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.refFieldPath") %>',
					name: 'refFieldPath',
					type: 'text',
					align: 'left',
					width: 180,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.refValue") %>',
					name: 'refValue',
					type: 'text',
					align: 'left',
					width: 80,
					readOnly:true
				},
				{
					title: '<%= localeMessage.getString("standardLayout.defaultValue") %>',
					name: 'defaultValue',
					type: 'text',
					align: 'left',
					width: 180,
					readOnly:true
				}
			];

			grid = defaultEditGrid($('#editGrid'), columns, null, 'itemLevel', layoutData.rows);
		}

		$(document).ready(function() {
			var operationSeq ="${param.operationSeq}";
			if (operationSeq != "" && operationSeq !="null"){
				isDetail = true;
			}
			detail(operationSeq);

			$("#btn_previous").click(function(){
				if(isPop == "true")
					window.close();
				else
					goNav(returnUrl);//LIST로 이동

			});
			buttonControl(isDetail);
			//titleControl(isDetail);

			setBtnHide(roleString, "admin", "btn_initialize");
			setBtnHide(roleString, "admin", "btn_modify");
			$('body').css("overflow-x","hidden");
		});

	</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 id="content_middle" class="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><!%-- 이전화면 -->
		</div>
		<div class="title"><%= localeMessage.getString("standardLayoutHistory.title") %></div>

		<form id="ajaxForm">
			<div class="table_row_title" style="display: inline;margin-bottom: -8px;"><%= localeMessage.getString("standardLayout.subTitle1") %></div>
			<table class="table_row" cellspacing="0">
				<tr>
					<th style="width:10%; min-width: 130px;"><%= localeMessage.getString("standardLayout.layoutName") %></th>
					<td style="width:15%; min-width: 200px;"><input type="text" name="layoutName" readonly="true"/> </td>
					<th style="width:10%; min-width: 130px;"><%= localeMessage.getString("standardLayout.layoutDesc") %></th>
					<td colspan="5"><input type="text" name="layoutDesc" readonly="true"/> </td>
				</tr>
				<tr>
					<th><%= localeMessage.getString("standardLayoutHistory.operationSeq") %></th>
					<td><input type="text" name="operationSeq" readonly="true"/> </td>
					<th><%= localeMessage.getString("standardLayoutHistory.operationType") %></th>
					<td><input type="text" name="operationType" readonly="true"/> </td>
					<th style="width:10%; min-width: 130px;"><%= localeMessage.getString("standardLayoutHistory.operatorName") %></th>
					<td><input type="text" name="operatorName" readonly="true"/> </td>
					<th style="width:10%; min-width: 130px;"><%= localeMessage.getString("standardLayoutHistory.operationDatetime") %></th>
					<td><input type="text" name="operationDatetime" readonly="true"/> </td>
				</tr>
			</table>
			<div id="labelEditGrid" class="table_row_title" style="display: inline;"><%= localeMessage.getString("standardLayout.subTitle2") %></div>
			<div id="editGrid"></div>
		</form>
		</form>
	</div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>

