<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ attribute name="isTypeSearch" type="java.lang.Boolean" required="false" description="경찰 타입을 검색할지?" %>
<%@ attribute name="isIdSearch" type="java.lang.Boolean" required="false" description="이름 또는 아이디로 타입을 검색할지?" %>
<%@ attribute name="title" type="java.lang.String" required="false" description="팝업 타이틀을 받는다" %>

<!-- 타이틀 설정 (기본값:사용자선택) -->
<c:if test="${title eq '' or title eq null}">
	<spring:message code="member.selectpop.title" var="popTitle"/>
</c:if>
<c:if test="${title ne '' and title ne null}">
	<c:set value="${title}" var="popTitle"/>
</c:if>

<div id="divMemberSelectPopup" title="${popTitle}" class="text-center">
	<div class="user_name">
		<ul>
			<li><label for="txtMemberSelectUserName"><spring:message code="member.view.name" /></label></li>
			<li><input type="text" id="txtMemberSelectUserName" /></li>
			
			<!-- 아이디 -->
			<c:if test="${isIdSearch}">
				<li><input type="hidden" id="hdMemberSelectUserId" /></li>
			</c:if>
			
			<!-- 타입 선택 -->
			<c:if test="${isTypeSearch}">
				<li class="margin_left">
					<input type="radio" name="rdMemberSelectUser" value="f" id="usertypeFa"/><label for="usertypeFa"><spring:message code="report.view.fa"/></label>
					<input type="radio" name="rdMemberSelectUser" value="g" id="usertypeNotfa"/><label for="usertypeNotfa"><spring:message code="report.view.cm"/></label>
				</li>
			</c:if>
			<li class="search_btn"><button type="button" id="btnMemeberSelectList"><spring:message code="button.search" /></button></li>
		</ul>
	</div>
	<table class="tbl_list">
	<thead>
		<tr>
			<th><spring:message code="title.no" /></th>
			<th><spring:message code="member.view.place1" /></th>
			<th><spring:message code="member.view.userid" /></th>
			<th><spring:message code="member.view.name" /></th>
			<th><spring:message code="member.view.position" /></th>
			<th><spring:message code="title.sel" /></th>
		</tr>
	</thead>
	<tbody id="tbodyMemberSelectList">
	</tbody>
	</table>
</div>

<script type="text/javascript" defer="defer">
	var MemberSelectPopup = {
		// 사용자 선택시 호출될 콜백함수
		callback: function(){},
		// JQuery Dialog 객체
		selectMemberPopup: null,
		// 최근에 로딩된 데이터 (json 배열)
		lastLoadedData: [],
		// dialog를 열고 데이터를 채운다.
		openAndFill: function(pData, pCallback){
			this.callback = pCallback;
			this.fillMemberList(pData);
			this.open();
		},
		// dialog Open.
		open: function(){
			if (this.selectMemberPopup){
				this.selectMemberPopup.dialog("open");
				$("#txtMemberSelectUserName").focus();
			}
		},
		// fill Data.
		fillMemberList: function(pData) {
			var data = {name: '', type: ''}
			$.extend(data, pData);
			
			// user name setting
			if (data.name != '') 
				$("#txtMemberSelectUserName").val(data.name);
			
			// user id setting
			if ($("#hdMemberSelectUserId").length > 0)
				$("#hdMemberSelectUserId").val($("#txtMemberSelectUserName").val());

			// user type setting
			if (data.type != '') {
				$("input[name=rdMemberSelectUser]").prop("checked", false);
				$("input[name=rdMemberSelectUser][value='" + data.type + "']").prop("checked", true);
			}
			
			if ($("#txtMemberSelectUserName").val().trim().length <= 0 ) {
				alert("<spring:message code="member.msg.invalidNameLength" />");
				$("#txtMemberSelectUserName").focus();
				return false;
			}
		
			$.ajax({
				type: "get",
				cache: false,
				url: "/member/faListAll.json",
				data: {
					name: $("#txtMemberSelectUserName").val(),
					userid: $("#hdMemberSelectUserId").length > 0 ? $("#hdMemberSelectUserId").val() : '',
					usertype: $("input[name=rdMemberSelectUser]").length > 0 ? $("input[name=rdMemberSelectUser]:checked").val() : '' 
				},
				success: function(data) {
					MemberSelectPopup.lastLoadedData = data;
					
					var i, size, userId, name, place1Str, positionStr, datum;
					
					$("#tbodyMemberSelectList").empty();
					
					if (data && data.length > 0) {
						for (i=0, size=data.length; i<size; i++) {
							datum = data[i];
							userId = datum.userid;
							name = datum.name;
							place1Str = datum.place1Str;
							positionStr = datum.positionStr;
							
							$("#tbodyMemberSelectList").append(
								"<tr>"
									+ "<td>" + (i+1).toString() + "</td>"
									+ "<td>" + place1Str + "</td>"
									+ "<td>" + userId + "</td>"
									+ "<td>" + name + "</td>"
									+ "<td>" + positionStr + "</td>"
									+ "<td>" + "<button type='button' onclick='MemberSelectPopup.onSelect(" + i + ");'>선택</button>" + "</td>"
								+ "</tr>"
							);
						}
					} else {
						$("#tbodyMemberSelectList").append(
								"<tr><td colSpan='6'><spring:message code="msg.nodata" /></td></tr>"
							);
					}
				}
			});
		},
		/**
		 * 사용자 선택 버튼 이벤트
		 *
		 * param : 
		 *	pIdx 최근 로딩된 배열에서 데이터를 추출할 인덱스 번호
		 */
		onSelect: function(pIdx) {
			var selectedDatum = {};
			if (this.lastLoadedData && this.lastLoadedData.length > 0) {
				selectedDatum = this.lastLoadedData[pIdx];
				if (this.callback) {
					this.callback(selectedDatum);
				}
				
				this.selectMemberPopup.dialog( "close" );
			}
		}
	};
	
	$(document).ready(function(){
		MemberSelectPopup.selectMemberPopup = $("#divMemberSelectPopup").dialog({
			autoOpen: false,
			modal: true,
			draggable: false,
			width: 560,
			maxHeight: 600,
			buttons: [{
				text: "닫기",
				click: function() {
					$( this ).dialog( "close" );
				}
			}],
			open: function(){
				MemberSelectPopup.fillMemberList();
				$("#btnMemeberSelectList").focus();
			}
		});
		
		$("#btnMemeberSelectList").click(function(){
			MemberSelectPopup.fillMemberList();
		});
		
		$("#txtMemberSelectUserName").keydown(function(e){
			if (e.keyCode == 13) {
				MemberSelectPopup.fillMemberList();	
			}
		});
	});
</script>