<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : BrandGroupPopupForm.html
 * @desc    : 브랜드 그룹 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.19   eskim       최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="900" id="popupBrandGroup">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>브랜드 그룹 목록</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupBrandGroup');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- 검색 조건 -->
		<div class="panelContent" >
		<form id="searchBrandGroupForm" name="searchBrandGroupForm" action="#" th:action="@{'/business/brand/group/list'}" onsubmit="$('#btnSearchBrandGroup').trigger('click'); return false;">
			
			<table class="frmStyle" aria-describedby="검색조건">
				<colgroup>
					<col style="width:15%;"/>
					<col style="width:35%;"/>
					<col style="width:15%;"/>
					<col/>
				</colgroup>
				<tbody>
					<tr>
						<th>브랜드그룹코드<i class="required" title="필수"></i></th>
						<td>
							<textarea class="textareaR3" name="searchBrandGroupNo" id="searchBrandGroupNo"></textarea>
						</td>
						<th>브랜드그룹명<i class="required" title="필수"></i></th>
						<td>
							<textarea class="textareaR3" name="searchBrandGroupNm" id="searchBrandGroupNm"></textarea>
						</td>
					</tr>
				</tbody>
			</table>
			<ul class="panelBar">
				<li class="center">
					<button type="button" class="btn btn-base btn-lg" id="btnSearchBrandGroup">조회</button>
				</li>
			</ul>
		</form>
		<!-- //검색 조건 -->
		<!-- 리스트 영역 -->
		<div id="gridBrandGroupList" style="width: 100%; height: 250px" class="ag-theme-balham"></div>
		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnConfirmBrandGroup">확인</button>
			</li>
		</ul>
		<!-- //리스트 영역 -->
		<th:block th:if="${params.type == 'C'}">
		<div class="panelContent">
			<form id="brandGroupForm" name="searchBrandGroupForm" action="#" th:action="@{'/business/brand/group/save'}">
			<input type="hidden" name="mode" value="N"/>
			<table class="frmStyle" aria-describedby="등록/수정 폼">
				<colgroup>
					<col style="width:10%;"/>
					<col style="width:40%;"/>
					<col style="width:10%;"/>
					<col/>
				</colgroup>
				<tr>
					<th>브랜드그룹코드</th>
					<td>
						<input type="text" class="w100" name="brandGroupNo" placeholder="자동생성" maxlength="5" readonly="readonly"/>
					</td>
					<th>브랜드 그룹명노출언어<i class="required" title="필수"></i></th>
						<td>
							<label class="rdoBtn"><input type="radio" name="dispNmLang" value="KR" checked="checked">국문</label>
							<label class="rdoBtn"><input type="radio" name="dispNmLang" value="EN">영문</label>
						</td>
				</tr>
				<tr>	
					<th>브랜드그룹 국문명<i class="required" title="필수"></i></th>
					<td>
						<input type="text" class="w200" name="brandGroupKnm" placeholder="브랜드그룹국문명" maxlength="50" required="required" data-valid-name="브랜드그룹국문명"/>
					</td>
					<th>브랜드그룹 영문명</th>
					<td>
						<input type="text" class="w200" name="brandGroupEnm" placeholder="브랜드그룹영문명" maxlength="50" required="required" data-valid-name="브랜드그룹영문명"/> 
					</td>
				</tr>
				<tr>
					<th>RGB코드<i class="required" title="필수"></i></th>
					<td  colspan="3">
						<input type="text" class="w100 aR" name="rgbCd" maxlength="6" data-valid-name="REG코드" />
						<!-- <span class="marL10 cRed"><i class="fa fa-info-circle" aria-hidden="true"></i> 브랜드메인 GBN 배경색으로 적용, 미 입력시 기본색상으로 설정됩니다.</span> -->
					</td>
				</tr>
				<tr style="height:100px">
					<th>브랜드이미지</th>
					<td colspan="3">
						<div class="uFile w300">
							<input id="file" name="file" type="file" class="uFileInput w300"/>
							<label for="file" class="uFileLabel">파일선택</label>
							<input type="hidden" name="logoFileNm" id="logoFileNm"/>
							<input type="hidden" name="sysFileNm" id="sysFileNm"/>
							<input type="hidden" name="newSysFileNm" id="newSysFileNm"/>
						</div>
						<input type="hidden" name="uploadDefaultUrl" id="uploadDefaultUrl" th:value="${@environment.getProperty('upload.default.view') + '/display/'}"/>
						<span id="imgView" class="off">
							<img id="bannerPreViewUrl" src="" style="height:100px"/>
						</span>
					</td>
				</tr>
			</table>
			</form>
		</div>	
		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnBrandGroupNew">신규</button>
				<button type="button" class="btn btn-success btn-lg" id="btnBrandGroupSave">저장</button>
			</li>
		</ul>
		</th:block>
		</div>
	</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
	let headerSelection = false;
	let columnDefsMdList = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: headerSelection, checkboxSelection: true, filter: false},
		{headerName: "브랜드그룹번호", field: "brandGroupNo", width: 120, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{headerName: "브랜드그룹국문명", field: "brandGroupKnm", width: 150, cellClass: 'text-center'},
		{headerName: "브랜드그룹영문명", field: "brandGroupEnm", width: 150, cellClass: 'text-center'},
		{headerName: "전시브랜드그룹명", field: "brandGroupNm", width: 150, cellClass: 'text-center'}
	];

	let gridOptionsBrandGroupList = gagaAgGrid.getGridOptions(columnDefsMdList);
	if(headerSelection) {	gridOptionsBrandGroupList.rowSelection = "multiple";	}

	// Row double click
	gridOptionsBrandGroupList.onRowDoubleClicked = function(event) {
		$('#btnConfirmBrandGroup').trigger('click');
	}

	// Cell click
	gridOptionsBrandGroupList.onCellClicked = function(event) {
		if (event.colDef.field != 'brandGroupNo')
			return;
		
		$("#brandGroupForm input[name=mode]").val("U");
		$("#brandGroupForm input[name=brandGroupNo]").val(event.data.brandGroupNo);
		$("#brandGroupForm input[name=brandGroupEnm]").val(event.data.brandGroupEnm);
		$("#brandGroupForm input[name=brandGroupKnm]").val(event.data.brandGroupKnm);
		$("#brandGroupForm input:radio[name=dispNmLang]:input[value=" + event.data.dispNmLang + "]").click();
		$("#brandGroupForm input[name=rgbCd]").val(event.data.rgbCd);
		//$("#brandGroupForm input:radio[name=useYn]:input[value=" + event.data.useYn + "]").click();
		//$("#brandGroupForm input[name=dispOrd]").val(event.data.dispOrd);
		
		 var brandImg = event.data.logoFileNm;
		if(!gagajf.isNull(brandImg)){
			$("#logoFileNm").val(brandImg);
			$("#bannerPreViewUrl").attr('src', $("#uploadDefaultUrl").val()+brandImg);
			$("#imgView").removeClass("off").addClass("on");
		}else {
			$("#logoFileNm").val('');
			$("#orgFileNm").val('');
			$("#bannerPreViewUrl").attr('src', '');
		}
		$('#brandGroupForm input[name=file]').closest('div').find('label').text('파일선택'); 
		
	}
	
	// 조회
	$('#btnSearchBrandGroup').on('click', function() {
		
		if (gagajf.isNull($('#searchBrandGroupForm textarea[name=searchBrandGroupNo]').val())  && gagajf.isNull($('#searchBrandGroupForm textarea[name=searchBrandGroupNm]').val())){
			mcxDialog.alert('검색조건을 입력하세요.');
			return false;
		}
		
		// Fetch data
		gagaAgGrid.fetch($('#searchBrandGroupForm').prop('action'), gridOptionsBrandGroupList, '#searchBrandGroupForm');
	});
	
	// 확인
	$('#btnConfirmBrandGroup').on('click', function() {
		var selectedData = gagaAgGrid.selectedRowData(gridOptionsBrandGroupList);
		
		if (selectedData.length == 0) {
			mcxDialog.alert('선택된 그룹브랜드가 없습니다.');
			return false;
		}
		
		var callbackFn = [[${params.callbackFn}]];

		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('popupBrandGroup');
		}
	});
	
	//이미지 클릭시 미리보기
	$("#bannerPreViewUrl").click(function(){
		cfnOpenImagePreViewPopup('bannerPreimgView',$('#bannerPreViewUrl').attr('src'));
	});
	
	//첨부파일 등록
	$('#brandGroupForm input[name=file]').on('change', function() {
		var file = this.files[0];
		file.name = 'test';
		if (typeof(file) == 'undefined'){
			return;
		}
		
		gagajf.ajaxFileUpload('/common/file/upload?subDir=/display'
				, file
				, function(result) {
					$('#brandGroupForm input[name=newSysFileNm]').val(result.newFileName);
					$('#brandGroupForm input[name=sysFileNm]').val(result.newFileName);
					$("#bannerPreViewUrl").attr('src', $("#uploadDefaultUrl").val()+result.newFileName);
					$("#imgView").removeClass("off").addClass("on");
				}
				, 'image'
		);
	});
	
	// 저장
	$("#btnBrandGroupSave").on("click", function() {
		// 입력 값 체크
		if (!gagajf.validation('#brandGroupForm'))
			return false;
		
		// RGB 체크
		if (!gagajf.isNull($('#brandGroupForm input[name=rgbCd]')) ){
			
			var rgbCd = $('#brandGroupForm input[name=rgbCd]').val();
			if (rgbCd.indexOf('#') >= 0){
				
				mcxDialog.alertC("'#은 입력하지 마세요.", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$("#brandGroupForm input[name=rgbCd]").focus();
					}
				});
				return false;
			}
			
			if (rgbCd.length != 6){
				mcxDialog.alertC("6자리로 입력해 주세요", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$("#brandGroupForm input[name=rgbCd]").focus();
					}
				});
				return false;
			}
		}
		
		
		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#brandGroupForm').prop('action'), '#brandGroupForm', function() {
				});
			}
		});
	});
	
	
	// 신규 버튼 클릭
	$("#btnBrandGroupNew").on("click", function() {
		$("#brandGroupForm")[0].reset();
		$("#brandGroupForm input[name=mode]").val("N");
		$("#orgFileNm").val('');
		$("#bannerPreViewUrl").attr('src', '');
		$("#logoFileNm").val('');
	});
	
	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridBrandGroupList', gridOptionsBrandGroupList);
	});
/*]]>*/
</script>



</html>
