<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : UserListForm.html
 * @desc    : 사용자 조회 팝업 Page
 *============================================================================
 * Wivismall
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2019.12.10   sasa004     최초 작성
 *******************************************************************************
 -->
<ul class="popup modal" data-width="600" data-height="670">
	<li class="mdPopTitle">
		<strong>관리자 신청자</strong>
		<button type="button" class="close" onclick="uifnPopClose('popupUserList');"><em class="fa fa-times"></em></button>
	</li>
	
	<li class="mdPopContent">
		<form id="userSearchForm" name="userSearchForm">
			<table class="frmStyle" aria-describedby="검색조건">
				<colgroup>
					<col style="width:10%;">
					<col>
				</colgroup>
				<tbody><tr>
					<th>신청자</th>
					<td>
						<input type="text" class="" name="searchTxt" maxlength="20" onkeypress="if( event.keyCode==13 ){fnSearch();}"/>
						<input type="text" class="off"/>
					</td>
				</tr>
			</tbody></table>
		</form>
	</li>
	
	<li class="mdPopBtnB aR">
		<button type="button" class="btn btn-info btn-lg" onclick="fnSearch();">조회</button>
		<button type="button" class="btn btn-info btn-lg" onclick="fnSaveUser();">확인</button>
	</li>
		
	<li class="mdPopContent">
		<div class="yScroll" style="height: 500px;">
			<form id="userListForm" name="userListForm" action="#" th:action="@{'/system/user/list'}" th:method="post">
				<table class="tableStyle" aria-describedby="사용자 목록">
					<colgroup>
						<col style="width: 20%"/>
						<col style="width: 40%"/>
						<col style="width: 40%"/>
					</colgroup>
					<thead>
						<tr>
							<th>선택</th>
							<th>신청자명</th>
							<th>신청자ID</th>
						</tr>
					</thead>
					<tbody id="tbodyUserList">
						<tr th:unless="${userList}">
							<td colspan="4">조회 결과가 없습니다.</td>
						</tr>
						<tr th:each="oneData : ${userList}">
							<input type="hidden" name="userNm" th:value="${oneData.userNm}"/>
							<input type="hidden" name="userId" th:value="${oneData.userId}"/>
							<td><label><input type="checkbox" name="chkUseYn" onclick="fnCheck(this);"/></label></td>
							<td style="text-align: center" th:text="${oneData.userNm}"></td>
							<td style="text-align: center" th:text="${oneData.userId}"></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</li>
	
</ul>

<script th:inline="javascript">
/*<![CDATA[*/
	
	// 체크버튼 라디오버튼화
	var fnCheck = function(obj) {
		var $el = $('#userListForm input:checkbox[name=chkUseYn]');
		
		$.each($el, function(idx, item) {
			$(this).prop('checked', false);
			$(this).parent('label').removeClass('checked');
		});
		$(obj).parent('label').addClass('checked');
		$(obj).prop('checked', true);
	}
	
	var fnSearch = function() {
		var searchData = []; 
		var searchTxt = $('#userSearchForm input[name=searchTxt]').val();
		
		searchData = {searchGb : 'userNm'
				,searchTxt : searchTxt
		};
		
		var jsonData = JSON.stringify(searchData);
		gagajf.ajaxJsonSubmit($('#userListForm').prop('action'), jsonData, fnSearchResult);
	}
	
	var fnSearchResult = function(result){
		
		var resultLn = result.length;
		var html = '';
		if(resultLn==0){
			html += '<tr th:unless="${userList}">';
			html += '<td colspan="4">조회 결과가 없습니다.</td>';
			html += '</tr>';
		}else{
			for(var i=0; i<resultLn; i++){
				html += '<tr th:unless="${userList}">';
				html += '<input type="hidden" name="userNm" value="'+result[i].userNm+'"/>';
				html += '<input type="hidden" name="userId" value="'+result[i].userId+'"/>';
				html += '<td><label><input type="checkbox" name="chkUseYn" onclick="fnCheck(this);"/></label></td>';
				html += '<td style="text-align: center">'+result[i].userNm+'</td>';
				html += '<td style="text-align: center">'+result[i].userId+'</td>';
				html += '</tr>';
			}
		}
		$("#tbodyUserList").html(html);
		
		fnRowSizeOne();
	}
	
	// 확인
	var fnSaveUser = function() {
		var changedData = [];
		
		$('#tbodyUserList tr').each(function(idx) {
			if ($(this).find('input:checkbox[name=chkUseYn]').is(':checked')) {
				userId = $(this).find('input[name=userId]').val();
				userNm = $(this).find('input[name=userNm]').val();
				changedData = {userId : userId
						,userNm : userNm
				};
			}
		});
		var callback = [[${params.callBackFun}]];

		var jsonData = JSON.stringify(changedData);

		if( typeof callback != 'undefined' && callback){

			if (typeof callback == 'function') {
				callback(jsonData);
			}else{
				if( callback ) {
					if( callback.indexOf("(") == -1 ) eval( callback +"(" + jsonData+")");
					else eval( callback(jsonData) );
				}
			}
			uifnPopClose('popupUserList');
		}
	}
	
	var fnRowSizeOne = function(){
		var rowSize = $('#tbodyUserList tr').length;
		if(rowSize==1){
			if(typeof $('#userListForm input[name=userNm]').val()!='undefined'){
				$('#userListForm input:checkbox[name=chkUseYn]').parent('label').addClass('checked');
				$('#userListForm input:checkbox[name=chkUseYn]').prop('checked', true);
				fnSaveUser();
			}
		}
	}
	
	$(document).ready(function() {
		fnRowSizeOne();
	});
/*]]>*/
</script>

</html>
