<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CategorySearchForm.html
 * @desc    : 카테고리 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.11   xyzp1539    최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1100" id="popupCategory">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>카테고리 목록</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupCategory');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->

		<!-- 검색 조건 -->
		<div class="panelContent">
			<form id="searchCategoryListForm" name="searchCategoryListForm" action="#" th:action="@{'/display/category/list'}" onsubmit="$('#btnSearchCategoryList').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>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg" id="btnSearchCategoryList">조회</button>
					</li>
				</ul>
			</form>
		</div>
		<!-- //검색 조건 -->

		<!-- 리스트 영역 -->
		<div class="panelContent">
			<div id="gridCategoryList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnConfirmCategory">확인</button>
			</li>
		</ul>
	</div>

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

		let columnDefs = [
			{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
			{
				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'},
			{
				headerName: "정상이월구분", field: "formalGb", width: 150, cellClass: 'text-center',
				cellRenderer: function (params) { return gagaAgGrid.lookupValue(formalGbList, params.value); }
			},
			{headerName: "노출여부", field: "dispYn", width: 80, cellClass: 'text-center'},
			{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'}
		];

		let categoryGridOptions = gagaAgGrid.getGridOptions(columnDefs);
		categoryGridOptions.rowSelection = "multiple";

		// 조회
		$('#btnSearchCategoryList').on('click', function() {
			// Fetch data
			gagaAgGrid.fetch($('#searchCategoryListForm').prop('action'), categoryGridOptions, '#searchCategoryListForm');
		});

		// 확인
		$('#btnConfirmCategory').on('click', function() {
			var selectedData = gagaAgGrid.selectedRowData(categoryGridOptions);

			if (selectedData.length == 0) {
				mcxDialog.alert('선택된 카테고리가 없습니다.');
				return false;
			}

			var callbackFn = [[${params.callBackFun}]];

			var jsonData = JSON.stringify(selectedData);

			if (typeof callbackFn != 'undefined' && callbackFn) {
				if (typeof callbackFn == 'function') {
					callbackFn(jsonData);
				} else {
					if (callbackFn) {
						if (callbackFn.indexOf("(") == -1) {
							eval(callbackFn + "(" + jsonData + ")");
						} else {
							eval(callbackFn(jsonData));
						}
					}
				}
				uifnPopupClose('popupCategory');
			}
		});

		$(document).ready(function() {
			// Create a agGrid
			gagaAgGrid.createGrid('gridCategoryList', categoryGridOptions);
		});

		/**
		 * 검색폼의 카테고리 선택 시
		 */
		var fnChangeSearchCondition = function(val, selLvl) {
			if (gagajf.isNull(val)) {
				if (selLvl > 1) {
					selLvl = selLvl - 1;
				} else {
					selLvl = 1;
				}
			}
			$('#searchCategoryListForm input[name=selLvl]').val(selLvl);

			// Fetch data
			gagaAgGrid.fetch($('#searchCategoryListForm').prop('action'), categoryGridOptions, '#searchCategoryListForm', function(data) {
				let selLvl = Number($('#searchCategoryListForm input[name=selLvl]').val()) + 1;

				for (let i = 2; i <= 5; i++) {
					if (i >= selLvl) {
						$('#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" + selLvl).append(tag);
				$("#btnNew").click();
			});
		}
		/*]]>*/
	</script>

</div>

</html>
