<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CategoryForm.html
 * @desc    : 카테고리관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.30   gagamel     최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->
		
		<!-- 검색조건 영역 -->
		<div class="panelStyle">
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/display/category/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<table class="frmStyle" aria-describedby="검색조건">
					<colgroup>
						<col width="10%"/>
						<col/>
					</colgroup>
					<tr>
						<th>카테고리</th>
						<td>
							<input type="hidden" name="selLvl"/>
							<select name="siteCd">
<!-- 								<option value="">[사이트]</option> -->
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<select name="cateGb" id="selCate1" onchange="fnChangeSearchCondition($(this).val(), 1);">
								<option value="">[카테고리구분]</option>
								<option th:if="${cateGbList}" th:each="oneData, status : ${cateGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<select name="cate1No" id="selCate2" onchange="fnChangeSearchCondition($(this).val(), 2);">
								<option value="">[카테고리1]</option>
							</select>
							<select name="cate2No" id="selCate3" onchange="fnChangeSearchCondition($(this).val(), 3);">
								<option value="">[카테고리2]</option>
							</select>
							<select name="cate3No" id="selCate4" onchange="fnChangeSearchCondition($(this).val(), 4);">
								<option value="">[카테고리3]</option>
							</select>
							<select name="cate4No" id="selCate5" onchange="fnChangeSearchCondition($(this).val(), 5);">
								<option value="">[카테고리4]</option>
							</select>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<!-- 검색조건 영역 -->

		<!-- 리스트 영역 -->
		<div class="panelStyle">
			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->
		
		<!-- 등록/수정 -->
		<div class="panelStyle">
			<form id="detailForm" name="detailForm" action="#" th:action="@{'/display/category/save'}">
				<table class="frmStyle" aria-describedby="등록/수정 폼">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>카테고리번호</th>
						<td>
							<input type="text" class="w200" name="cateNo" placeholder="자동생성" readonly="readonly"/>
						</td>
						<th>카테고리명<i class="required" title="필수"></i></th>
						<td class="infoTxt">
							<input type="text" class="w200" name="cateNm" maxlength="50" required="required" data-valid-name="카테고리명"/>
						</td>
						<th>카테고리유형<i class="required" title="필수"></i></th>
						<td>
							<select name="cateType" data-valid-name="카테고리유형">
								<option th:if="${cateTypeList}" th:each="oneData, status : ${cateTypeList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
					</tr>
					<tr>
						<th>상위카테고리<i class="required" title="필수"></i></th>
						<td colspan="5">
							<input type="hidden" name="selLvl"/>
							<select name="siteCd" data-valid-name="사이트">
<!-- 								<option value="">[사이트]</option> -->
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<select name="cateGb" id="cateLvl1" data-valid-name="카테고리구분" onchange="fnChangeUpperCategory($(this).val(), 1);">
								<option value="">[카테고리구분]</option>
								<option th:if="${cateGbList}" th:each="oneData, status : ${cateGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<select name="cate1No" id="cateLvl2" data-valid-name="카테고리1" onchange="fnChangeUpperCategory($(this).val(), 2);">
								<option value="">[카테고리1]</option>
							</select>
							<select name="cate2No" id="cateLvl3" data-valid-name="카테고리2" onchange="fnChangeUpperCategory($(this).val(), 3);">
								<option value="">[카테고리2]</option>
							</select>
							<select name="cate3No" id="cateLvl4" data-valid-name="카테고리3" onchange="fnChangeUpperCategory($(this).val(), 4);">
								<option value="">[카테고리3]</option>
							</select>
							<select name="cate4No" id="cateLvl5" data-valid-name="카테고리4" onchange="fnChangeUpperCategory($(this).val(), 5);">
								<option value="">[카테고리4]</option>
							</select>
						</td>
					</tr>
					<tr>
						<th>노출순서<i class="required" title="필수"></i></th>
						<td>
							<input type="text" class="aR w100" name="dispOrd" maxlength="5" required="required" data-valid-type="integer" data-valid-name="노출순서"/>
						</td>
						<th>정상이월구분</th>
						<td>
							<select name="formalGb">
								<option value="">[선택]</option>
								<option th:if="${formalGbList}" th:each="oneData, status : ${formalGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>컨텐츠위치</th>
						<td>
							<select name="contentsLoc">
								<option value="">[선택]</option>
								<option th:if="${contentsLocList}" th:each="oneData, status : ${contentsLocList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
					</tr>
					<tr>
						<th>노출여부<i class="required" title="필수"></i></th>
						<td>
<!-- 							<input type="hidden" name="useYn"/> -->
<!-- 							<label class="chkBox checked"><input type="checkbox" name="chkUseYn" value="Y" checked="checked"/>사용</label> -->
							<label class="rdoBtn"><input type="radio" name="dispYn" value="Y" checked="checked">노출</label>
							<label class="rdoBtn"><input type="radio" name="dispYn" value="N">미노출</label>
						</td>
						<th>사용여부<i class="required" title="필수"></i></th>
						<td colspan="3">
							<label class="rdoBtn"><input type="radio" name="useYn" value="Y" checked="checked">사용</label>
							<label class="rdoBtn"><input type="radio" name="useYn" value="N">미사용</label>
						</td>
					</tr>
				</table>
			</form>
			
			<!-- 버튼 배치 영역 -->
			<ul class="panelBar">
				<li class="right">
					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
					<button type="button" class="btn btn-base btn-lg" id="btnRefresh4Srch" th:if="${sessionInfo.roleCd == 'G001_0000'}">4SRCH 갱신</button>
				</li>
			</ul>
			<!-- //버튼 배치 영역 -->
		</div>
		<!-- 등록/수정 -->
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	let siteList = gagajf.convertToArray([[${siteList}]]);
	let cateGbList = gagajf.convertToArray([[${cateGbList}]]);
	let cateTypeList = gagajf.convertToArray([[${cateTypeList}]]);
	let formalGbList = gagajf.convertToArray([[${formalGbList}]]);
	let contentsLocList = gagajf.convertToArray([[${contentsLocList}]]);

	let columnDefs = [
		{
			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{
			headerName: "카테고리구분", field: "cateGb", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.lookupValue(cateGbList, params.value); }
		},
		{headerName: "카테고리번호", field: "cateNo", width: 150, cellClass: 'text-center'},
		{
			headerName: "카테고리명", field: "cateNm", width: 150, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{
			headerName: "카테고리유형", field: "cateType", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.lookupValue(cateTypeList, params.value); }
		},
		{headerName: "말단여부", field: "leafYn", width: 80, cellClass: 'text-center'},
		{headerName: "노출순서", field: "dispOrd", width: 100, cellClass: 'text-center'},
		{
			headerName: "정상이월구분", field: "formalGb", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.lookupValue(formalGbList, params.value); }
		},
		{
			headerName: "컨텐츠위치", field: "contentsLoc", width: 200, cellClass: 'text-center',
			cellRenderer: function (params) { return gagaAgGrid.lookupValue(contentsLocList, params.value); }
		},
		{headerName: "노출여부", field: "dispYn", width: 80, cellClass: 'text-center'},
		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
	];
	
	let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
	
	// Cell click
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field != 'cateNm')
			return;
		
		$("#btnNew").click();
		$('#detailForm input[name=siteCd]').val(event.data.siteCd);
		$('#detailForm input[name=cateNo]').val(event.data.cateNo);
		$('#detailForm input[name=cateNm]').val(event.data.cateNm);
		$('#detailForm select[name=cateType]').val(event.data.cateType);
		
		// 상위카테고리
		var selLvl = $("#searchForm input[name=selLvl]").val();
		for (let i = 1; i <= 5; i++) {
			$("#cateLvl" + i).html($("#selCate" + i).html());
			$("#cateLvl" + i).val($("#selCate" + i).val());
			if (i > selLvl) {
				$("#cateLvl" + i).hide();
			} else {
				$("#cateLvl" + i).show();
			}
		}
		$('#detailForm input[name=selLvl]').val(selLvl);
		
		$('#detailForm input[name=dispOrd]').val(event.data.dispOrd);
		$('#detailForm select[name=formalGb]').val(event.data.formalGb);
		$('#detailForm select[name=contentsLoc]').val(event.data.contentsLoc);
		
		// 카테고리유형에 따른 컨텐츠위치 설정 변경
		if (event.data.cateType == 'G031_10') {
			$('#detailForm select[name=contentsLoc]').prop('disabled', true);
		} else if (event.data.cateType == 'G031_20') {
			$('#detailForm select[name=contentsLoc]').prop('disabled', false);
		}
		
		$('#detailForm input:radio[name=dispYn]:input[value=' + event.data.dispYn + ']').click();
		$('#detailForm input:radio[name=useYn]:input[value=' + event.data.useYn + ']').click();
	}

	/**
	 * 검색폼의 카테고리 선택 시
	 */
	var gVal;
	var gSelLvl;
	var fnChangeSearchCondition = function(val, selLvl) {
		if (gagajf.isNull(val)) {
			val = gVal;
		}
		
		if (gagajf.isNull(selLvl)) {
			selLvl = gSelLvl;
		}
		
		if (gagajf.isNull(val)) {
			if (selLvl > 1) {
				selLvl = selLvl - 1;
			} else {
				selLvl = 1;
			}
		}
		
		gVal = val;
		gSelLvl = selLvl;
		
		$('#searchForm input[name=selLvl]').val(selLvl);
		
		// Fetch data
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm', function(data) {
			let tSelLvl = Number($('#searchForm input[name=selLvl]').val()) + 1;
			
			for (let i = 2; i <= 5; i++) {
				if (i >= tSelLvl) {
					$('#selCate' + i).html('<option value="">[카테고리' + (i - 1) + ']</option>');
				}
			}
			
			let tag = '';
			for (let i = 0; i < data.length; i++) {
				if (data[i].useYn == 'Y') {
					tag += '<option value="' + data[i].cateNo + '">[' + data[i].cateNo + '] ' + data[i].cateNm + '</option>';
				}
			}
			
			$("#selCate" + tSelLvl).append(tag);
			$("#btnNew").click();
		});
	}
	
	// 카테고리유형 변경 시
	$('#detailForm select[name=cateType]').on('change', function() {
		if ($(this).val() == 'G031_10') { // 상품분류카테고리
			$("#detailForm select[name=contentsLoc]").prop('disabled', true);
		} else if ($(this).val() == 'G031_20') { // 컨텐츠카테고리
			$("#detailForm select[name=contentsLoc]").prop('disabled', false);
		}
	});
	
	// 등록/수정폼의 상위카테고리 선택 시
	var fnChangeUpperCategory = function(val, selLvl) {
		if (gagajf.isNull(val)) {
			if (selLvl > 1) {
				selLvl = selLvl - 1;
			} else {
				selLvl = 1;
			}
		}
		$('#detailForm input[name=selLvl]').val(selLvl);
		
		gagajf.ajaxFormSubmit($('#searchForm').prop('action'), "#detailForm", function(data) {
			let selLvl = Number($('#detailForm input[name=selLvl]').val()) + 1;
			
			for (let i = 2; i <= 5; i++) {
				if (i >= selLvl) {
					$('#cateLvl' + i).html('<option value="">[카테고리' + (i - 1) + ']</option>');
				}
			}
			
			let tag = '';
			for (let i = 0; i < data.length; i++) {
				if (data[i].useYn == 'Y') {
					tag += '<option value="' + data[i].cateNo + '">[' + data[i].cateNo + '] ' + data[i].cateNm + '</option>';
				}
			}
			
			$("#cateLvl" + selLvl).append(tag);
		});
	}
	
	// 신규
	$('#btnNew').on('click', function(){
		$("#detailForm")[0].reset();
// 		$("#detailForm input[name=selLvl]").val('');
		for (let i = 2; i <= 5; i++) {
			$("#cateLvl" + i).show();
		}
	});
	
	// 저장
	$('#btnSave').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#detailForm'))
			return false;
		
		let selLvl = Number($('#detailForm input[name=selLvl]').val());
		if (gagajf.isNull($('#detailForm select[name=cateGb]').val())) {
			mcxDialog.alertC('카테고리구분을 선택해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#detailForm select[name=cateGb]').focus();
				}
			});
			return;
		}

		if (gagajf.isNull($('#detailForm select[name=cate1No]').val())) {
			if (selLvl > 2) {
				mcxDialog.alertC('카테고리1을 선택해 주세요.', {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#detailForm select[name=cate1No]').focus();
					}
				});
				return;
			}
		}
		
		if (gagajf.isNull($('#detailForm select[name=cate2No]').val())) {
			if (selLvl > 3) {
				mcxDialog.alertC('카테고리2를 선택해 주세요.', {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#detailForm select[name=cate2No]').focus();
					}
				});
				return;
			}
		}
		
		if (gagajf.isNull($('#detailForm select[name=cate3No]').val())) {
			if (selLvl > 4) {
				mcxDialog.alertC('카테고리3을 선택해 주세요.', {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#detailForm select[name=cate3No]').focus();
					}
				});
				return;
			}
		}
		
		if (gagajf.isNull($('#detailForm select[name=cate4No]').val())) {
			if (selLvl > 5) {
				mcxDialog.alertC('카테고리4를 선택해 주세요.', {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#detailForm select[name=cate4No]').focus();
					}
				});
				return;
			}
		}
		
		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				$("#detailForm select[name=contentsLoc]").prop('disabled', false);
				
				var jsonData = JSON.stringify($('#detailForm').serializeObject());
				gagajf.ajaxFormSubmit($('#detailForm').prop('action'), '#detailForm', function() {
					$('#btnNew').trigger('click');
					fnChangeSearchCondition();
				});
			}
		});
	});
	
	// 카테고리 갱신
	$("#btnRefresh4Srch").on("click", function() {
		mcxDialog.confirm('갱신하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxJsonSubmit('/display/category/refresh', null);
			}
		});
	});
	
	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);
		
		$("#detailForm select[name=contentsLoc]").prop('disabled', false);
	});
/*]]>*/
</script>

</html>
