<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : OrderMemoRegistForm.html
 * @desc    : 주문메모 등록 화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.16   jsh77b       최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="900">
	<div class="panelStyle">
		<div class="panelTitle">
			<h2>주문메모등록</h2>
			<button type="button" class="close" onclick="uifnPopupClose('popupCreateOrderMemo');"><i class="fa fa-times"></i></button>
		</div>
	
		<div class="panelContent" style="height:100%; overflow-y:auto;">
			<form id="orderMemoRequestFrm">
				<input type="hidden" name="ordNo" th:value="${ordNo}" />
				<input type="hidden" name="seq" th:value="${seq}" />
				<input type="hidden" name="mode" th:value="${mode}" />
				
				<table class="frmStyle">
					<colgroup>
						<col style="width:30%" />
						<col />
					</colgroup>
					<tbody>
						<tr>
							<th>등록자ID</th>
							<td id="userNm"></td>
						</tr>
						<tr>
							<th>관리자 메모</th>
							<td>
								<textarea th:if="${orderMemo != null and orderMemo != ''}" name="memo" style="height:100px;" th:text="${orderMemo.memo}"></textarea>
								<textarea th:unless="${orderMemo != null and orderMemo != ''}" name="memo" style="height:100px;" text=""></textarea>
							</td>
						</tr>
						<tr id="imageFileTr">
							<th>파일</th>
							<td><div class="uFile">
								<input id="imageFile" name="imageFile" type="file" class="uFileInput"/>
								<label for="imageFile" class="uFileLabel">파일선택</label>
								<input type="hidden" name="orgFileNm"/>
								<input type="hidden" name="sysFileNm"/>
							</div>
							</td>
						</tr>
						<th:block th:if="${mode == 'U' and orderMemo.sysFileNm != null and orderMemo.sysFileNm != ''}" th:with="uploadImageUrl=${@environment.getProperty('upload.image.view')}">
							<tr>
								<th>이미지</th>
								<td>
									<a href="javascript:void(0);" onclick="fnPreImgView()">
										<img id="memoImg" th:src="|${uploadImageUrl}/Order/${orderMemo.sysFileNm}|" th:onerror="'this.src=\''+@{${@environment.getProperty('domain.uximage')}+ '/image/no.gif'}+'\';'" width="300px"/>
									</a>
								</td>
							</tr>
						</th:block>
						<!-- <th:block th:text="|${uploadImageUrl}/Order/${orderMemo.sysFileNm}|"></th:block> -->
					</tbody>
				</table>
				<div>
					<button type="button" class="btn btn-success btnRight marT10" id="btnOrderMemoRegistOk">저장</button>
				</div>	
				<br>
			</form>
		</div>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
// 이벤트 바인딩 관련
var orderMemo 	= [[${orderMemo}]];
var userNo 		= [[${userNo}]];
var userNm 		= [[${userNm}]];
var mode 		= [[${mode}]];

// 첨부파일 등록
$('#orderMemoRequestFrm input[name=imageFile]').on('change', function() {
	var file = this.files[0];
	
	if (typeof(file) == 'undefined'){
		return;
	}
	
	gagajf.ajaxFileUpload('/common/file/upload?subDir=/Order'
		, file
		, function(result) {
			$('#orderMemoRequestFrm input[name=orgFileNm]').val(result.oldFileName);
			$('#orderMemoRequestFrm input[name=sysFileNm]').val(result.newFileName);
		}
		, 'image'
	);
});

// 주문메모저장
$('#btnOrderMemoRegistOk').on('click', function() {
	var memo = $('#orderMemoRequestFrm textarea[name=memo]').val();

	if (gagajf.isNull(memo)) {
		mcxDialog.alert('메모 입력해 주세요.');
		$('#orderMemoRequestFrm textarea[name=memo]').focus();
		return;
	}

	mcxDialog.confirm('저장하시겠습니까?', {
		cancelBtnText	: "취소",
		sureBtnText		: "확인",
		sureBtnClick	: function(){
			var jsonData = JSON.stringify($('#orderMemoRequestFrm').serializeObject());
			gagajf.ajaxJsonSubmit(
				'/order/memo/save'
				, jsonData
				, function(){
					fnBindOrderMemo();
					uifnPopupClose('popupCreateOrderMemo');
				}
			);
		}
	});
});
	
// 이미지 클릭 시 미리보기 팝업 이벤트
var fnPreImgView = function(){
	cfnOpenImagePreViewPopup('preImgView', $('#memoImg').attr('src'));
}

// 이미지 로드 시 사이즈 변경
$('#imagePreView').bind('load', function(){
	var windowWidth = $(window).width() * 0.95;
	var windowHeight = $(window).height() * 0.95;
	
	var width = $('#imagePreView').width();
	var height = $('#imagePreView').height();
	
	if (width > windowWidth) {
		$('#preImgView >.videoPopup').css('width', windowWidth);
		$('#imagePreView').css('width', windowWidth);
		
	}
	if (height > windowHeight) {
		$('#preImgView >.videoPopup').css('height', windowHeight);
		$('#imagePreView').css('height', windowHeight);
	}
});
	
$(document).ready(function() {
	var userText = '';
	
	if (mode == 'U') {
		userText = orderMemo.userNm + ' ('+orderMemo.updNo+')';
		$('#orderMemoRequestFrm input[name=orgFileNm]').val(orderMemo.orgFileNm);
		$('#orderMemoRequestFrm input[name=sysFileNm]').val(orderMemo.sysFileNm);
	} else {
		if (!gagajf.isNull(userNm) && !gagajf.isNull(userNo)) {
			userText = userNm + ' (' + userNo + ')';
		} else {
			if (gagajf.isNull(userNm)) userText = userNm;
			if (gagajf.isNull(userNo)) userText = userNo;
		}
	}
	
	$('#userNm').text(userText);

	// 등록자만 수정 가능하게 처리
	if (mode == 'U' && userNo != orderMemo.updNo) {
		$('#btnOrderMemoRegistOk').css('display', 'none');
		$('#imageFileTr').css('display', 'none');
		$('#orderMemoRequestFrm textarea[name=memo]').attr('readonly', true);
	}
});

/*]]>*/
</script>

</html>
