<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsSetForm.html
 * @desc    : 세트상품 구성 관리
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.04   eskim       최초 작성
 *******************************************************************************
 -->	
	<div class="modalPopup" data-width="1100" >
		<div class="panelStyle">
			<div class="panelTitle">
				<h2>세트 상품 구성</h2>
				<button type="button" class="close" onclick="fnGoodsSetFormClose()"><i class="fa fa-times"></i></button>
			</div>
			<form id="goodsSetForm" name="goodsSetForm" th:method="post">
			<input type="hidden" id="goodsComposeList" name="goodsComposeList" />
			<div class="panelContent">
				<ul class="notice">
					<li>구성상품 등록시 기본값&nbsp;
						<!-- 아이콘 툴팁 -->
						<div class="iconTooltip">
							<i class="fa fa-info" aria-hidden="true"></i>
							<span class="left" style="width:400px; text-align:left;">
							<!-- class="left" 또는 class="right" -->
								- 상품상태 : 정보부족<br/>
								- 정상가 : 구성상품의 정상가 합<br/>
								- 판매가 : 구성상품 판매가 입력값의 합<br/>
								- 브랜드코드 : 구성상품의 기준여부 'Y'상품의 브랜드코드<br/>
								- 품목코드 : 구성상품의 기준여부 'Y'상품의 품목코드<br/>
								- 포인트 : 구성상품의 기준여부 'Y'상품의 브랜드 포인트<br/>
								- 배송비정책 : 구성상품의 기준여부 'Y'상품의 브랜드 배송비정책<br/>
							</span>
						</div>
						<!-- //아이콘 툴팁 --> 
					</li>
				</ul>
				<table class="frmStyle">
					<colgroup>
						<col width="10%"/>
						<col width="15%"/>
						<col width="10%"/>
						<col width="15%"/>
						<col width="10%"/>
						<col width="15%"/>
						<col width="10%"/>
						<col/>
					</colgroup>
					<tr>
						<th>상품명<em class="required" title="필수"></em></th>
						<td colspan="3"><input class="w50p" type="text" id="goodsNm" name="goodsNm" maxlength="60"/></td>
						<th>성별<em class="required" title="필수"></em></th>
						<td><select  name="sexGb" id="sexGb">
								<option value="">[전체]</option>
								<option th:if="${sexGbList}" th:each="oneData, status : ${sexGbList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>제조년월일<em class="required" title="필수"></em></th>
						<td><input type="text" class="w100" id="makeYmd" name="makeYmd" maxlength="8" data-valid-type="date"/></td>
					</tr>
					<tr>
						<th>년도/시즌<em class="required" title="필수"></em></th>
						<td colspan="3">
							<select  name="styleYear" id="styleYear">
								<option value="">[전체]</option>
								<option th:if="${styleYearList}" th:each="oneData, status : ${styleYearList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<select  name="seasonCd" id="seasonCd">
								<option value="">[전체]</option>
								<option th:if="${seasonList}" th:each="oneData, status : ${seasonList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>원산지<em class="required" title="필수"></em></th>
						<td colspan="3">
							<select name="originCd" id="originCd">
								<option value="">[전체]</option>
								<option th:if="${originCdList}" th:each="oneData, status : ${originCdList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
							<input type="hidden" id="makeNm" name="makeNm" />
						</td>
					</tr>
				</table>
			</div>	
			<ul class="panelBar">
				<li class="left">
					<button type="button" class="btn btn-danger btn-lg" onclick="fnGoodsSetDeleteRow();">행삭제</button>
				</li>
				<li class="right">
					<button type="button" class="btn btnRight btn-base btn-lg" onclick="fnOpenGoodsSetPopup();">구상상품추가</button>
				</li>
			</ul>
			<div id="gridGoodsSetList" style="height: 390px;" class="ag-theme-balham lh60"></div>
			</form>
			<ul class="panelBar">
				<li  class="right">
					<th:block th:if="${sessionInfo.roleCd == 'G001_0000' OR sessionInfo.roleCd == 'G001_A000' OR sessionInfo.roleCd == 'G001_A101' OR sessionInfo.roleCd == 'G001_A100' OR sessionInfo.roleCd == 'G001_A001'}">
					<button type="button" class="btn btnRight btn-success btn-lg" id="btnGoodsSetSave">저장</button>
					</th:block>
				</li>
			</ul>
		</div>	
	</div>
<script th:inline="javascript">
/*<![CDATA[*/
	var useYnList = gagajf.convertToArray([[${useYnList}]]);
	var goodsStatList = gagajf.convertToArray([[${goodsStatList}]]);
	// specify the columns
	var columnGoodsSetDefs = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: "정렬", field: "dispOrd", width: 70 ,hide: false, cellClass: 'text-center',  rowDrag: true },
		//{headerName: 'No', width: 60, cellClass: 'text-center', valueGetter: function(params) { return params.node.rowIndex + 1 }},
		{headerName: "이미지", field: "sysImgNm", width: 100, height: 60, cellClass: 'text-center'
			,cellRenderer: function(params) {
				return '<img width="60" src="'+ _goodsUrl+ "/" + params.value + '" alt="" onerror="this.src=\'/image/no.gif\';"/>';
			}
		},
		{headerName: "구성상품코드", field: "compsGoodsCd" , width: 130, cellClass: 'text-center'},
		{headerName: "구성상품명", field: "goodsNm" , width: 250, cellClass: 'text-left'},
		//{headerName: "순서", field: "dispOrd" , width: 100, cellClass: 'text-center',editable: true, required: true},
		{headerName: "수량", field: "qty" , width: 80, cellClass: 'text-right',editable: true, required: true},
		{headerName: "상품판매가", field: "compsCurrPrice" , width: 120, cellClass: 'text-right', editable: true, required: true,
			cellEditor: 'textCellEditor',
			cellEditorParams: { maxlength: 14, validType: 'numeric'}
		},
		{headerName: "기준여부(품목/전시카테)", field: "baseYn" , width: 160, cellClass: 'text-center',editable: true, required: true,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(useYnList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(useYnList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(useYnList, params.newValue); }
		},
		{headerName: "상품상태", field: "goodsStat" , width: 100, cellClass: 'text-center',
			cellEditorParams: { values: gagaAgGrid.extractValues(goodsStatList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(goodsStatList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(goodsStatList, params.newValue); }
		},
		{headerName: "업체", field: "supplyCompCd" , width: 80, cellClass: 'text-right',hide: true}
		
	];

	// Get GridOptions
	var gridGoodsSetOptions = gagaAgGrid.getGridOptions(columnGoodsSetDefs);
	gridGoodsSetOptions.rowSelection = 'multiple';
	gridGoodsSetOptions.suppressRowClickSelection = true;
	gridGoodsSetOptions.stopEditingWhenGridLosesFocus = true;	//그리드 에디터 값 저장가능
	
	// 드래그
	gridGoodsSetOptions.rowDragManaged = true;
	gridGoodsSetOptions.rowHeight = 60; //이미지가 있을경우 높이 지정해야함.
 	
	//기준여부 표시
	gridGoodsSetOptions.getRowStyle = function(params) {
		if ("Y" == params.data.baseYn) {
			return { background: '#1ab394' };
		}
	}
	
	// Row 
	gridGoodsSetOptions.onCellValueChanged = function(event) {
		var rowIdx = null;
		var isChangColor = true;
		if (event.colDef.field == "baseYn"){
			if (event.data.baseYn == "Y"){
				rowIdx = event.rowIndex;
				
				//다른 기준여부 'Y'가 존재하는지 확인
				gridGoodsSetOptions.api.forEachNode(function(rowNode, index) {
					if (rowNode.data.baseYn == "Y" && index != rowIdx){
						event.data.baseYn = event.oldValue;
						gridGoodsSetOptions.api.updateRowData({update: [event.data]});
						isChangColor = false;
						return;
					}
				});
				
				if (!isChangColor){ 
					mcxDialog.alert('다른 구성상품에 기준여부가 선택되어 있습니다.');
					return;
				}
			}	
		}
	}
	
	//창종료
	var fnGoodsSetFormClose = function(){
		uifnPopupClose('popupGoodsSet');
	}
	
	$(document).ready(function() {
		gagaAgGrid.createGrid('gridGoodsSetList', gridGoodsSetOptions);
	});
	
	//상품조회 팝업
	var fnOpenGoodsSetPopup = function() {
		cfnOpenGoodsPopup('fnCreateGoodsSet');
	}

	// 상품추가
	var fnCreateGoodsSet = function(goodsData) {
		if (goodsData.length < 1) return;
		
		// 기존상품
		var oldGoodsSetList = gagaAgGrid.getAllRowData(gridGoodsSetOptions);
		var idx = oldGoodsSetList.length+1; 
		
		var isExist = false;
		goodsData.forEach(function(goods){
			isExist = false;
			
			gridGoodsSetOptions.api.forEachNode(function(rowNode, index) {
				//중복상품 여부 확인
				if (goods.goodsCd == rowNode.data.compsGoodsCd){
					isExist = true;
				}
				debugger;
				//같은 업체만 가능
				if (goods.supplyCompCd != rowNode.data.supplyCompCd){
					isExist = true;
				}
			});

			if (goods.goodsType != "G056_N"){
				isExist = true;
			}
			
			if(!isExist){
				
				var data = { 
						  compsGoodsCd: goods.goodsCd
						, goodsType: 'G056_S'
						, dispOrd: idx
						, qty: 1
						, compsCurrPrice: goods.currPrice
						, baseYn: 'N'
						, goodsStat : goods.goodsStat
						, useYn: 'Y'
						, goodsNm : goods.goodsNm
						, selfGoodsYn : goods.selfGoodsYn
						, supplyCompCd : goods.supplyCompCd
						, sysImgNm : goods.sysImgNm
						};
				//그리드 마지막에 추가해야함
				gridGoodsSetOptions.api.updateRowData({add: [data], addIndex: idx});
				gridGoodsSetOptions.api.refreshCells();
				idx++;
			
			}
		});
	}
	
	// 저장클릭시
	$('#btnGoodsSetSave').on('click', function() {

		if(!fnGoodsSetConditionCheck()) return;
		
		mcxDialog.confirm('세트상품을 등록 하시겠습니까?',  {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var goodsComposeList = gagaAgGrid.getAllRowData(gridGoodsSetOptions);
				$("#goodsSetForm input[name=goodsComposeList]").val(JSON.stringify(goodsComposeList));
				gagajf.ajaxFormSubmit("/goods/set/save", "#goodsSetForm", fnGoodsSetFormClose);
			}
		});
	});

	//저장 조건 확인
	var fnGoodsSetConditionCheck = function(){
		var optCheck = false;
		
		if(gagajf.isNull($("#goodsSetForm input[name=goodsNm]").val())){
			mcxDialog.alertC('상품명을 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm input[name=goodsNm]").focus();
				}
			});	
			return false;
		}
		
		if(gagajf.isNull($("#goodsSetForm select[name=styleYear]").val())){
			mcxDialog.alertC('년도을 선택해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm select[name=styleYear]").focus();
				}
			});	
			return false;
		}
		
		if(gagajf.isNull($("#goodsSetForm select[name=seasonCd]").val())){
			mcxDialog.alertC('시즌을 선택해주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm select[name=seasonCd]").focus();
				}
			});	
			return false;
		}
		
		if(gagajf.isNull($("#goodsSetForm select[name=sexGb]").val())){
			mcxDialog.alertC('성별을 선택해주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm select[name=sexGb]").focus();
				}
			});	
			return false;
		}
		
		if(gagajf.isNull($("#goodsSetForm select[name=originCd]").val())){
			mcxDialog.alertC('원산지를 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm select[name=originCd]").focus();
				}
			});	
			return false;
		}
		
		var makeYmd = $("#goodsSetForm input[name=makeYmd]").val();
		
		if(gagajf.isNull(makeYmd)){
			mcxDialog.alertC('제조년월일를 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm input[name=makeYmd]").focus();
				}
			});	
			return;
		}
		
		if(makeYmd.length < 8){
			mcxDialog.alertC('제조년월일를 바르게 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm input[name=makeYmd]").focus();
				}
			});	
			return false;
		}
		
		if(isNaN(Date.parse(makeYmd.substr(0, 4) +'-'+ makeYmd.substr(4, 2) +'-'+ makeYmd.substr(6, 2)))){
			mcxDialog.alertC('날짜형식이 아닙니다.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("#goodsSetForm input[name=makeYmd]").focus();
				}
			});	
			return false;
		}
		
		var allData = gagaAgGrid.getAllRowData(gridGoodsSetOptions);
		// Validation
		if (!gagaAgGrid.validation(gridGoodsSetOptions, allData))
			return false;
		
		var comSupplyCompCd = '';
		var comSelfGoodsYn = '';
		//기준여부 Y  존재하는지 확인
		var checkBaseYn = false;
		optCheck = false;
		$.each(allData, function(index, item) {
			if (index == 0){
				comSelfGoodsYn = item.selfGoodsYn;
				comSupplyCompCd = item.supplyCompCd;
			}
			
			if (item.baseYn == "Y"){
				checkBaseYn = true;
			}
			
			if(item.goodsStat != "G008_90"){
				optCheck = true;
				mcxDialog.alertC("상품상태를 확인해 주세요.", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						gridGoodsSetOptions.api.setFocusedCell(index, "goodsStat", null);
					}
				});	
				return false;
			}
			
			if(Number(item.qty)  ==  0){
				optCheck = true;
				mcxDialog.alertC("수량을 입력해 주세요.", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						gridGoodsSetOptions.api.setFocusedCell(index, "qty", null);
					}
				});	
				return false;
			}
			
			if (comSelfGoodsYn != item.selfGoodsYn){
				optCheck = true;
				mcxDialog.alertC("구상상품중 자사/입점상품 구분값이 다릅니다.\n확인해 주세요", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						gridGoodsSetOptions.api.setFocusedCell(index, "goodsCd", null);
					}
				});	
				return false;
			}else{
				if (comSelfGoodsYn == "N" && (comSupplyCompCd != item.supplyCompCd)){
					optCheck = true;
					mcxDialog.alertC("구상상품중 입점은 같은 업체 상품만 가능합니다.\n확인해 주세요", {
						sureBtnText: "확인",
						sureBtnClick: function() {
							gridGoodsSetOptions.api.setFocusedCell(index, "goodsCd", null);
						}
					});	
					return false;
				}
			}
			
			
		});
		
		if(optCheck) {
			return false;
		}
		
		if (!checkBaseYn){
			mcxDialog.alert('구성상품중 기준여부를 선택해 주세요.');
			return false;
		}
		
		return true;
	}
	
	//상품삭제
	var fnGoodsSetDeleteRow = function() {
		var selectedData = gagaAgGrid.selectedRowData(gridGoodsSetOptions);
		
		if (selectedData.length == 0) {
			mcxDialog.alert('선택된 행이 없습니다.');
			return;
		}
		
		//화면에서 삭제
		var removedData = gagaAgGrid.removeRowData(gridGoodsSetOptions, false);
	}
	
/*]]>*/
</script>
</html>