<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : UserMenuForm.html
 * @desc    : 사용자메뉴 팝업 Page
 *============================================================================
 * Wivismall
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2019.12.06   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="600">
	<div class="panelStyle">
		<div class="panelTitle">
			<h2>사용자 메뉴</h2>
			<button type="button" class="close" onclick="uifnPopupClose('popupUserMenu');"><i class="fa fa-times"></i></button>
		</div>
		<div class="panelContent yScroll" style="height: 500px;">
			<form id="userMenuForm" name="userMenuForm" action="#" th:action="@{'/system/user/menu/list/save'}" th:method="post">
				<table class="frmStyle" aria-describedby="사용자 메뉴 목록">
					<colgroup>
						<col style="width: 10%"/>
						<col style="width: 20%"/>
						<col/>
						<col style="width: 20%"/>
					</colgroup>
					<thead>
						<tr>
							<th><input type="button" class="chkBox" name="allCheck" onclick="fnAllCheck(this);"/></th>
							<th>메뉴ID</th>
							<th>메뉴명</th>
							<th>메뉴구분</th>
						</tr>
					</thead>
					<tbody id="tbodyUserMenu">
						<tr th:unless="${userMenuList}">
							<td colspan="4">조회 결과가 없습니다.</td>
						</tr>
						<tr th:each="oneData : ${userMenuList}">
							<td class="aC"><label class="chkBox" th:classappend="${oneData.useYn == 'Y' ? 'checked' :''}"><input type="checkbox" name="chkUseYn" th:checked="${oneData.useYn == 'Y'}" th:readonly="${oneData.menuGb == 'M'}"/></label></td>
							<td style="text-align: left" th:text="${(oneData.menuLvl == 1 ? '&nbsp;&nbsp;&nbsp;' : oneData.menuLvl == 2 ? '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') + oneData.menuLvl + '. ' + oneData.menuId}">A</td>
							<td style="text-align: left" th:text="${oneData.menuNm}">상품</td>
							<td th:text="${oneData.menuGb == 'M' ? '메뉴' : '프로그램'}">메뉴</td>
							<input type="hidden" name="userNo" th:value="${oneData.userNo}"/>
							<input type="hidden" name="menuId" th:value="${oneData.menuId}"/>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<ul class="panelBar" style="padding-top:15px">
			<li class="center">
				<button type="button" class="btn btn-info btn-lg" onclick="fnSaveUserMenu();">저장</button>
				<button type="button" class="btn btn-gray btn-lg" onclick="fnInit();">초기화</button>
			</li>
		</ul>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	// 전체 체크
	var fnAllCheck = function(obj) {
		var $el = $("#userMenuForm input:checkbox[name=chkUseYn]");
		
		$.each($el, function(idx, item) {
			if (gagajf.isNull($(this).attr('readonly'))) {
				if ($(obj).hasClass('checked')) {
					$(this).prop('checked', false);
					$(this).parent('label').removeClass('checked');
				} else {
					$(this).prop('checked', true);
					$(this).parent('label').addClass('checked');
				}
			}
		});
		
		if ($(obj).hasClass('checked')) {
			$(obj).removeClass('checked');
			$(obj).parent('label').removeClass('checked');
		} else {
			$(obj).addClass('checked');
			$(obj).parent('label').addClass('checked');
		}
	}
	
	// 저장
	var fnSaveUserMenu = function() {
		var changedData = [];
		
		$('#tbodyUserMenu tr').each(function(idx) {
			if ($(this).find('input:checkbox[name=chkUseYn]').is(':checked')) {
				var params = new Object();
				params.userNo = $(this).find('input[name=userNo]').val();
				params.menuId = $(this).find('input[name=menuId]').val();
				params.useYn = 'Y';
				changedData.push(params);
			}
		});
		
		if (changedData.length == 0) {
			mcxDialog.alert('저장할 데이터가 없습니다.');
			return;
		}
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify(changedData);
				gagajf.ajaxJsonSubmit($('#userMenuForm').prop('action'), jsonData, function() {
					uifnPopupClose('popupUserMenu');
				});
			}
		});
	}
	
	// 초기화
	var fnInit = function() {
		$('#userMenuForm')[0].reset();
		$("#userMenuForm input[type=checkbox]").removeClass("checked");
		$("#userMenuForm input[type=checkbox]").parent("label").removeClass("checked");
	}
	
	$(document).ready(function() {
		
	});
/*]]>*/
</script>

</html>
