<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : UserDetailForm.html
 * @desc    : 사용자 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.07   gagamel     최초 작성
 *******************************************************************************
 -->
<ul class="popup modal" data-width="900">
	<li class="mdPopTitle">
		<strong th:text="${'사용자 ' + (mode == 'N' ? '등록' : '상세')}">사용자 상세</strong>
		<button type="button" class="close" onclick="uifnPopClose('popupUser');"><em class="fa fa-times"></em></button>
	</li>
	
	<li class="mdPopContent" th:if="${mode == 'N'}">
		<form id="userRegisterForm" name="userRegisterForm" action="#" th:action="@{'/system/user/save'}" th:method="post">
			<input type="hidden" name="mode" th:value="${mode}"/>
			
			<table class="frmStyle" aria-describedby="등록폼">
				<colgroup>
					<col style="width:10%"/>
					<col style="width:40%;"/>
					<col style="width:10%;"/>
					<col/>
				</colgroup>
				<tr>
					<th>사용자ID<em class="required" title="필수"></em></th>
					<td>
						<input type="hidden" name="userNo" value="" readonly="readonly"/>
						<input type="text" class="w150" name="userId" placeholder="" maxlength="20" required="required" data-valid-type="alphaNumeric" data-valid-name="사용자ID"/>
						<button type="button" class="btn btn-default btn-sm" id="userIdDupCheck">중복체크</button>
					</td>
					<th>사용자명<em class="required" title="필수"></em></th>
					<td>
						<input type="text" name="userNm" placeholder="" maxlength="50" required="required" data-valid-name="사용자명"/>
					</td>
				</tr>
				<tr>
					<th>비밀번호<em class="required" title="필수"></em></th>
					<td colspan="3">
						<input type="password" name="passwd" placeholder="비밀번호" maxlength="50" required="required" data-valid-type="password" data-valid-name="비밀번호"/> /
						<input type="password" name="passwdConfirm" placeholder="비밀번호확인" maxlength="50" required="required" data-valid-type="password" data-valid-name="비밀번호확인"/>
						<p class="dot cBlue">대문자, 소문자, 특수문자, 숫자로 구성해야 합니다.</p>
						<p class="dot cBlue">이 중 3개 이상은 8 ~ 20자, 2개 이상은 10 ~ 20자로 설정해야 합니다.</p>
					</td>
				</tr>
				<tr>
					<th>권한<em class="required" title="필수"></em></th>
					<td>
						<input type="hidden" name="roleChangeYn" value="Y"/>
						<select name="roleCd" required="required" data-valid-name="권한">
							<option th:if="${roleList}" th:each="oneData, status : ${roleList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
						</select>
					</td>
					<th><span id="registerRoleRefVal">업체</span></th>
					<td>
						<input type="hidden" name="roleRefVal"/>
						<select name="supplyCompCd">
							<option th:if="${sessionInfo.supplyCompCd == null}" value="">[선택]</option>
							<option th:if="${supplyCompList}" th:each="oneData, status : ${supplyCompList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
						</select>
						<select name="vendorId" style="display: none">
							<option th:if="${sessionInfo.vendorId == null}" value="">[선택]</option>
							<option th:if="${vendorList}" th:each="oneData, status : ${vendorList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
						</select>
					</td>
				</tr>
				<tr>
					<th>이메일</th>
					<td>
						<input type="text" name="email" placeholder="" maxlength="100" data-valid-type="email" data-valid-name="이메일"/>
					</td>
					<th>휴대전화번호</th>
					<td>
						<input type="text" name="cellPhnno" placeholder="" maxlength="50" data-valid-type="cellPhone" data-valid-name="휴대전화번호"/>
					</td>
				</tr>
				<tr>
					<th>포인트부여가능금액</th>
					<td>
						<input type="text" name="pntAssignAmt" placeholder="" maxlength="6" data-valid-type="integer" data-valid-name="포인트부여가능금액"/>
					</td>
					<th>IP주소</th>
					<td>
						<input type="text" name="ipAddr" placeholder="" maxlength="20" data-valid-type="ipAddress" data-valid-name="IP주소"/>
					</td>
				</tr>
				
				<tr>
					<th>IP체크여부</th>
					<td>
						<input type="hidden" name="ipChkYn" value="Y"/>
						<label class="chkBox"><input type="checkbox" name="chkIpChkYn" value="Y"/>IP체크</label>
					</td>
					<th>사용여부</th>
					<td>
						<input type="hidden" name="useYn" value="Y"/>
						<label class="chkBox"><input type="checkbox" name="chkUseYn" value="Y" checked="checked"/>사용</label>
					</td>
				</tr>
			</table>
		</form>
	</li>
		
	<li class="mdPopBtnB aR" th:if="${mode == 'N'}">
		<button type="button" class="btn btn-info btn-lg" onclick="fnSaveUser('#userRegisterForm');">저장</button>
		<button type="button" class="btn btn-gray btn-lg" onclick="$('#userRegisterForm')[0].reset();">초기화</button>
	</li>
	
	<li class="mdPopContent" th:if="${mode == 'U'}">
		<form id="userDetailForm" name="userDetailForm" action="#" th:action="@{'/system/user/save'}" th:method="post" th:object="${userInfo}">
			<input type="hidden" name="mode" th:value="${mode}"/>
			
			<table class="frmStyle" aria-describedby="상세폼">
				<colgroup>
					<col style="width:10%"/>
					<col style="width:40%;"/>
					<col style="width:10%;"/>
					<col/>
				</colgroup>
				<tr>
					<th>사용자ID<em class="required" title="필수"></em></th>
					<td>
						<input type="hidden" name="userNo" readonly="readonly" th:field="*{userNo}"/>
						<input type="text" name="userId" placeholder="" readonly="readonly" th:field="*{userId}"/>
					</td>
					<th>사용자명<em class="required" title="필수"></em></th>
					<td>
						<input type="text" name="userNm" placeholder="" maxlength="50" required="required" data-valid-name="사용자명" th:field="*{userNm}"/>
					</td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td colspan="3">
						<input type="password" name="passwd" placeholder="비밀번호" maxlength="50" data-valid-type="password" data-valid-name="비밀번호"/> /
						<input type="password" name="passwdConfirm" placeholder="비밀번호확인" maxlength="50" data-valid-type="password" data-valid-name="비밀번호확인"/>
						<button type="button" class="btn btn-info btn-sm" id="btnChangePassword">비밀번호변경</button>
						<p class="dot cBlue">대문자, 소문자, 특수문자, 숫자로 구성해야 합니다.</p>
						<p class="dot cBlue">이 중 3개 이상은 8 ~ 20자, 2개 이상은 10 ~ 20자로 설정해야 합니다.</p>
					</td>
				</tr>
				<tr>
					<th>권한<em class="required" title="필수"></em></th>
					<td>
						<input type="hidden" name="roleChangeYn" value="N"/>
						<select name="roleCd" required="required" data-valid-name="권한" th:field="*{roleCd}">
							<option th:if="${roleList}" th:each="oneData, status : ${roleList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}" th:selected="${roleCd == oneData.cd}"></option>
						</select>
					</td>
					<th><span id="detailRoleRefVal">업체</span></th>
					<td>
						<input type="hidden" name="roleRefVal" th:value="${userInfo.roleRefVal}"/>
						<select name="supplyCompCd">
							<option th:if="${sessionInfo.supplyCompCd == null}" value="">[선택]</option>
							<option th:if="${supplyCompList}" th:each="oneData, status : ${supplyCompList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}" th:selected="${userInfo.roleRefVal == oneData.cd}"></option>
						</select>
						<select name="vendorId" style="display: none">
							<option th:if="${sessionInfo.vendorId == null}" value="">[선택]</option>
							<option th:if="${vendorList}" th:each="oneData, status : ${vendorList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}" th:selected="${userInfo.roleRefVal == oneData.cd}"></option>
						</select>
					</td>
				</tr>
				<tr>
					<th>이메일</th>
					<td colspan="3">
						<input type="text" name="email" placeholder="" maxlength="100" data-valid-type="email" data-valid-name="이메일" th:field="*{email}"/>
						<!-- <button type="button" class="btn btn-info btn-sm" id="btnSendTempPassword">임시비밀번호 발송</button> -->
					</td>
				</tr>
				<tr>
					<th>휴대전화번호</th>
					<td>
						<input type="text" name="cellPhnno" placeholder="" maxlength="50" data-valid-type="cellPhone" data-valid-name="휴대전화번호" th:field="*{cellPhnno}"/>
					</td>
					<th>포인트부여가능금액</th>
					<td>
						<input type="text" class="aR" name="pntAssignAmt" placeholder="" maxlength="6" data-valid-type="integer" data-valid-name="포인트부여가능금액" th:field="*{pntAssignAmt}"/>
					</td>
				</tr>
				<tr>
					<th>IP주소</th>
					<td>
						<input type="text" name="ipAddr" placeholder="" maxlength="20" data-valid-type="ipAddress" data-valid-name="IP주소" th:field="*{ipAddr}"/>
					</td>
					<th>IP체크여부</th>
					<td>
						<input type="hidden" name="ipChkYn" th:value="${userInfo.ipChkYn}"/>
						<label class="chkBox" th:checked="${userInfo.ipChkYn == 'Y'}"><input type="checkbox" name="chkIpChkYn" th:value="${userInfo.ipChkYn}" th:checked="${userInfo.ipChkYn == 'Y'}"/>IP체크</label>
					</td>
				</tr>
				<tr>
					<th>사용여부</th>
					<td>
						<input type="hidden" name="useYn" th:value="${userInfo.useYn}"/>
						<label class="chkBox" th:checked="${userInfo.useYn == 'Y'}"><input type="checkbox" name="chkUseYn" th:value="${userInfo.useYn}" th:checked="${userInfo.useYn == 'Y'}"/>사용</label>
					</td>
					<th>최종로그인일시</th>
					<td th:text="*{loginLdt}">
					</td>
				</tr>
				<tr>
					<th>비밀번호변경일시</th>
					<td colspan="3" th:text="*{passwdChgDt}">
					</td>
				</tr>
			</table>
		</form>
	</li>
	
	<li class="mdPopBtnB aR" th:if="${mode == 'U'}">
		<button type="button" class="btn btn-info btn-lg" onclick="fnSaveUser('#userDetailForm');">저장</button>
		<button type="button" class="btn btn-gray btn-lg" onclick="fnInitialize(false);">초기화</button>
	</li>
</ul>

<script th:inline="javascript">
/*<![CDATA[*/
	var mode = [[${mode}]];
	var roleCd = [[${userInfo.roleCd}]];
	
	// 사용자ID 중복 체크
	var isUnique = true;
	$('#userIdDupCheck').on('click', function() {
		var $e = $('#userRegisterForm input[name=userId]');
		if (gagajf.isNull($e.val())) {
			mcxDialog.alert('사용자ID를 입력해 주세요.');
			$e.focus();
			return;
		}
		
		$.get('/system/user/id/' + $e.val()
			, function(data) {
				if (data > 0) {
					mcxDialog.alert('이 ID는 이미 사용중입니다. 다른 ID를 입력해 주세요.');
					isUnique = false;
					$e.val('');
					$e.focus();
				} else {
					mcxDialog.alert('이 ID는 사용 가능합니다.');
					isUnique = true;
				}
			});
	});
	
	// 등록화면 권한 변경 시
	$('#userRegisterForm select[name=roleCd]').on('change', function() {
		var abRoleCd = $(this).val().substring(0,1);
		if (abRoleCd == 'A' || abRoleCd == 'B') { // 입점업체
			$('#userRegisterForm select[name=supplyCompCd]').show();
			$('#userRegisterForm select[name=vendorId]').hide();
			$('#registerRoleRefVal').text('업체');
		} else if (abRoleCd == 'C') { // 외부몰벤더
			$('#userRegisterForm select[name=supplyCompCd]').hide();
			$('#userRegisterForm select[name=vendorId]').show();
			$('#registerRoleRefVal').text('외부몰벤더');
		} else {
			$('#userRegisterForm select[name=supplyCompCd]').hide();
			$('#userRegisterForm select[name=vendorId]').hide();
			$('#registerRoleRefVal').text('');
		}
	});
	
	// 비밀번호 변경
	$('#btnChangePassword').on('click', function() {
		// 기본 이벤트 실행 안 되게
		//if (event.preventDefault) event.preventDefault(); else event.returnValue = false;

		var passwd = $('#userDetailForm input[name=passwd]').val();
		var passwdConfirm = $('#userDetailForm input[name=passwdConfirm]').val();
		
		if (gagajf.isNull(passwd)) {
			mcxDialog.alert('비밀번호를 입력해 주세요.');
			$('#userDetailForm input[name=passwd]').focus();
			return;
		}
		
		if (gagajf.isNull(passwdConfirm)) {
			mcxDialog.alert('비밀번호확인을 입력해 주세요.');
			$('#userDetailForm input[name=passwdConfirm]').focus();
			return;
		}
		
		if (passwd != passwdConfirm) {
			mcxDialog.alert('비밀번호를 확인해주세요.');
			$('#userDetailForm input[name=passwd]').focus();
			return;
		}
		
		mcxDialog.confirm("비밀번호를 변경하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify($('#userDetailForm').serializeObject());
				gagajf.ajaxJsonSubmit('/system/user/password/change', jsonData);
			}
		});
	});
	
	// 임시비밀번호 발송
	$('#btnSendTempPassword').on('click', function() {
		// 기본 이벤트 실행 안 되게
		//if (event.preventDefault) event.preventDefault(); else event.returnValue = false;

		var email = $('#userDetailForm input[name=email]').val();
		
		if (gagajf.isNull(email)) {
			mcxDialog.alert('이메일을 입력해 주세요.');
			$('#userDetailForm input[name=email]').focus();
			return;
		}
		
		mcxDialog.confirm("임시비밀번호를 발송하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify($('#userDetailForm').serializeObject());
				gagajf.ajaxJsonSubmit('/system/user/tempPassword/send', jsonData);
			}
		});
	});
	
	// 수정화면 권한 변경 시
	$('#userDetailForm select[name=roleCd]').on('change', function() {
		if (roleCd == $(this).val()) {
			$('#userDetailForm input[name=roleChangeYn]').val('N');
		} else {
			$('#userDetailForm input[name=roleChangeYn]').val('Y');
		}
		
		var abRoleCd = $(this).val().substring(0,1);
		if (abRoleCd == 'A' || abRoleCd == 'B') { // 입점업체
			$('#userDetailForm select[name=supplyCompCd]').show();
			$('#userDetailForm select[name=vendorId]').hide();
			$('#detailRoleRefVal').text('업체');
		} else if (abRoleCd == 'C') { // 외부몰벤더
			$('#userDetailForm select[name=supplyCompCd]').hide();
			$('#userDetailForm select[name=vendorId]').show();
			$('#detailRoleRefVal').text('외부몰벤더');
		} else {
			$('#userDetailForm select[name=supplyCompCd]').hide();
			$('#userDetailForm select[name=vendorId]').hide();
			$('#detailRoleRefVal').text('');
		}
	});
	
	// 초기화
	var fnInitialize = function(isFirst) {
		if (!isFirst) {
			$('#userDetailForm')[0].reset();
		}
		
		// 상세/수정 화면이면
		if (mode == 'U') {
		}
	}
	
	// 저장
	var fnSaveUser = function(formId) {
		// 입력 값 체크
		if (!gagajf.validation(formId))
			return false;
		
		if (mode == 'N') {
			if (!isUnique) {
				mcxDialog.alert('사용자ID를 중복체크해 주세요.');
				return;
			}
			
			if ($(formId + ' input[name=passwd]').val() != $(formId + ' input[name=passwdConfirm]').val()) {
				mcxDialog.alert('비밀번호와 비밀번호확인 값이 다릅니다.');
				$(formId + ' input[name=passwdConfirm]').focus();
				return;
			}
		}
		
		if ($(formId + ' input:checkbox[name=chkIpChkYn]').is(":checked")) {
			if (gagajf.isNull($(formId + ' input[name=ipAddr]').val())) {
				mcxDialog.alert('IP주소를 입력해 주세요.');
				$(formId + ' input[name=ipAddr]').focus();
				return;
			}
		}
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				$(formId + ' input[name=ipChkYn]').val($(formId + ' input:checkbox[name=chkIpChkYn]').is(":checked") ? 'Y' : 'N');
				$(formId + ' input[name=useYn]').val($(formId + ' input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
				
				var abRoleCd = $(formId + ' select[name=roleCd]').val().substring(0,1);
				if (abRoleCd == 'A' || abRoleCd == 'B' || abRoleCd == 'E') { // 자사,입점,촬영업체
					$(formId + ' input[name=roleRefVal]').val($(formId + ' select[name=supplyCompCd]').val());
				} else if (abRoleCd == 'C') { // 외부몰벤더
					$(formId + ' input[name=roleRefVal]').val($(formId + ' select[name=vendorId]').val());
				} else {
					$(formId + ' input[name=roleRefVal]').val('');
				}
				
				gagajf.ajaxFormSubmit($(formId).prop('action'), formId, function() {
					uifnPopClose('popupUser');
					$('#btnSearch').trigger('click');
				});
			}
		});
	}
	
	$(document).ready(function() {
		// 상세/수정 화면이면
		if (mode == 'U') {
			fnInitialize(true);
		}
	});
/*]]>*/
</script>

</html>
