<!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="920"  id="popupBrandGroup">
	<div class="panelStyle" style="max-height:700px;overflow-y:scroll;">
		<!-- 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'}" >
			
			<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="textareaR2" name="searchBrandGroupNo" id="searchBrandGroupNo"></textarea>
						</td>
						<th>브랜드그룹명<i class="required" title="필수"></i></th>
						<td>
							<textarea class="textareaR2" 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"/>
			<input type="hidden" name="uploadDefaultUrl" id="uploadDefaultUrl" th:value="${@environment.getProperty('upload.default.view')}"/>
			<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코드</th>
					<td  colspan="3">
						<input type="text" class="w100 aR" name="rgbCd" maxlength="6" data-valid-name="REG코드" value="222222"/>
						<span class="marL10 cRed"><i class="fa fa-info-circle" aria-hidden="true"></i> 브랜드메인 GBN 배경색으로 적용, 미 입력시 기본색상(222222)으로 설정됩니다.</span>
					</td>
				</tr>
				<tr>
					<th>카테고리사용</th>
					<td  colspan="3">
						<label class="rdoBtn"><input type="radio" name="defaultCateYn" value="Y" checked="checked">기본카테고리(BY ITEM)</label>
						<label class="rdoBtn"><input type="radio" name="defaultCateYn" value="N">별도카테고리</label><input type="text" class="w100 aL"  name="brandCateNo" readonly="readonly"/><span class="marL10 cRed"><i class="fa fa-info-circle" aria-hidden="true"></i> [전시>카테고리관리] 에서 수동 설정할수 있습니다</span>
					</td>
				</tr>
				<tr style="height:100px">
					<th>브랜드이미지(칼라)</th>
					<td colspan="3">
						<div class="uFile w300">
							<input id="file1" name="file" type="file" class="uFileInput w300"/>
							<label for="file1" class="uFileLabel">파일선택</label>
							<input type="hidden" name="logoFileNm" id="logoFileNm"/>
							<input type="hidden" name="sysFileNm1" id="sysFileNm1"/>
							<input type="hidden" name="newSysFileNm1" id="newSysFileNm1"/>
						</div>
						
						<span id="imgView1" class="off">
							<img id="bannerPreViewUrl1" src="" style="width:100px"/>
						</span>
					</td>
				</tr>
				<tr style="height:100px">
					<th>브랜드이미지(흑백)</th>
					<td colspan="3">
						<div class="uFile w300">
							<input id="file2" name="file" type="file" class="uFileInput w300"/>
							<label for="file2" class="uFileLabel">파일선택</label>
							<input type="hidden" name="bwLogoFileNm" id="bwLogoFileNm"/>
							<input type="hidden" name="sysFileNm2" id="sysFileNm2"/>
							<input type="hidden" name="newSysFileNm2" id="newSysFileNm2"/>
						</div>
						<span id="imgView2" class="off">
							<img id="bannerPreViewUrl2" src="" style="width: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: 200, cellClass: 'text-center'},
		{headerName: "브랜드그룹영문명", field: "brandGroupEnm", width: 200, cellClass: 'text-center'},
		{headerName: "전시브랜드그룹명", field: "brandGroupNm", width: 200, cellClass: 'text-center'},
		{headerName: "브랜드로고파일명", field: "logoFileNm", width: 200, cellClass: 'text-center', hide:true}
	];

	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=defaultCateYn]:input[value=" + event.data.defaultCateYn + "]").click();
		$("#brandGroupForm input[name=brandCateNo]").val(event.data.brandCateNo);
		
		var brandImg1 = event.data.logoFileNm;
		if(!gagajf.isNull(brandImg1)){
			$("#logoFileNm").val(brandImg1);
			$("#bannerPreViewUrl1").attr('src', $("#uploadDefaultUrl").val()+brandImg1);
			$("#imgView1").removeClass("off").addClass("on");
		}else {
			$("#logoFileNm1").val('');
			$("#orgFileNm1").val('');
			$("#bannerPreViewUrl1").attr('src', '');
			$("#imgView1").removeClass("on").addClass("off");
			
		}
		
		var brandImg2 = event.data.bwLogoFileNm;
		if(!gagajf.isNull(brandImg2)){
			$("#bwLogoFileNm").val(brandImg2);
			$("#bannerPreViewUrl2").attr('src', $("#uploadDefaultUrl").val()+brandImg2);
			$("#imgView2").removeClass("off").addClass("on");
		}else {
			$("#logoFileNm2").val('');
			$("#orgFileNm2").val('');
			$("#bannerPreViewUrl2").attr('src', '');
			$("#imgView").removeClass("on").addClass("off");
			
		}
		
		$('#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) {
						(new Function(callbackFn + "(" + jsonData + ");"))();
					} else {
						(new Function(callbackFn(jsonData)))();
					}
				}
			}
			uifnPopupClose('popupBrandGroup');
		}
	});
	
	//이미지 클릭시 미리보기
	$("#bannerPreViewUrl1").click(function(){
		cfnOpenImagePreViewPopup('bannerPreimgView',$('#bannerPreViewUrl1').attr('src'));
	});
	
	$("#bannerPreViewUrl2").click(function(){
		cfnOpenImagePreViewPopup('bannerPreimgView',$('#bannerPreViewUrl2').attr('src'));
	});
	
	// 파일첨부 선택 시
	$('#file1').on('change', function() { fnChooseFile(this, 1); });
	$('#file2').on('change', function() { fnChooseFile(this, 2); });
	
	var fnChooseFile = function(obj, fileNo) {
		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
		var file = obj.files[0];

		// 파일 업로드
		gagajf.ajaxFileUpload('/common/file/upload?subDir=/contents/brand'
			, file
			, function(result) {
				$('#brandGroupForm').find('#newSysFileNm' + fileNo).val(result.newFileName);
				$('#brandGroupForm').find('#sysFileNm' + fileNo).val(result.newFileName);
				$('#bannerPreViewUrl' + fileNo).attr('src', $("#uploadDefaultUrl").val()+"/contents/brand/"+result.newFileName);
				$('#imgView' + fileNo).removeClass("off").addClass("on");
			}
			, 'image'
		);
	}
	
	
	//첨부파일 등록
	/* $('#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=/contents'
				, file
				, function(result) {
					$('#brandGroupForm input[name=newSysFileNm2]').val(result.newFileName);
					$('#brandGroupForm input[name=sysFileNm2]').val(result.newFileName);
					$("#bannerPreViewUrl").attr('src', $("#uploadDefaultUrl").val()+"/contents/brand/"+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]').val()) ){
			
			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;
			}
		}
		
		// 이미지 체크
		if (!gagajf.isNull($("#brandGroupForm input[name=logoFileNm]").val()) || !gagajf.isNull($("#brandGroupForm input[name=sysFileNm1]").val())){
			if (gagajf.isNull($("#brandGroupForm input[name=bwLogoFileNm]").val()) && gagajf.isNull($("#brandGroupForm input[name=sysFileNm2]").val())){
				mcxDialog.alert("브랜드 흑백 이미지를 등록 해주세요.");
				return false;
			}
			
		}
		
		if (!gagajf.isNull($("#brandGroupForm input[name=bwLogoFileNm]").val()) || !gagajf.isNull($("#brandGroupForm input[name=sysFileNm2]").val())){
			if (gagajf.isNull($("#brandGroupForm input[name=logoFileNm]").val()) && gagajf.isNull($("#brandGroupForm input[name=sysFileNm1]").val())){
				mcxDialog.alert("브랜드 칼라이미지를 등록 해주세요.");
				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");
		$("#bannerPreViewUrl1").attr('src', '');
		$("#bannerPreViewUrl2").attr('src', '');
		$('#brandGroupForm input[name=newSysFileNm1]').val('');
		$('#brandGroupForm input[name=sysFileNm1]').val('');
		$('#brandGroupForm input[name=newSysFileNm2]').val('');
		$('#brandGroupForm input[name=sysFileNm2]').val('');
		$('#brandGroupForm input[name=logoFileNm]').val('');
		$('#brandGroupForm input[name=bwLogoFileNm]').val('');
		$("#imgView1").removeClass("on").addClass("off");
		$("#imgView2").removeClass("on").addClass("off");
	});
	
	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridBrandGroupList', gridOptionsBrandGroupList);
	});
/*]]>*/
</script>



</html>
