<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : AssignListForm.html
 * @desc    : 출고처지정 목록 Page
 *============================================================================
 * ISTYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.16   moon       최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
	
		<!-- 검색조건 영역 -->
		<form id="searchForm" name="searchForm" action="#" th:action="@{'/delivery/assign/list/'}" onsubmit="fnSearchList(); return false;">
			<div class="panelStyle">
			<!-- TITLE -->
			<div class="panelTitle">
				<h3><i class="fa fa-info-circle"></i>아래 검색조건 중 <font color="red">기간, 키워드</font>중 하나를 꼭 입력해 주세요.</h3>
				<span class="panelControl">
					<i class="fa fa-chevron-up"></i>
				</span>
			</div>
			<!-- //TITLE -->
			<div class="panelContent">			

					<table class="frmStyle">
						<colgroup>
							<col style="width:10%;"/>
							<col style="width:15%;"/>
							<col style="width:10%;"/>
							<col style="width:15%;"/>
							<col style="width:10%;"/>
							<col style="width:15%;"/>
							<col style="width:10%;"/>
							<col style="width:15%;"/>
						</colgroup>
						<tr>
							<th>주문자명</th>
							<td>
								<input type="text" class="" name="orderNm" placeholder="" maxlength="20" />
							</td>
							<th>주문번호</th>
							<td>
								<input type="text" class="" name="ordNo" placeholder="" maxlength="20" />
							</td>
							<th>주문상세번호</th>
							<td>
								<input type="text" class="" name="ordDtlNo" placeholder="" maxlength="20" />
							</td>
							<th>외부몰주문번호</th>
							<td>
								<input type="text" class="" name="extmallOrderId" placeholder="" maxlength="100" />
							</td>
						</tr>
						<tr>
							<th>사이트</th>
							<td>
								<select name="siteCd" id="siteCd">
									<option value="">[전체]</option>
									<option th:if="${siteCdList}" th:each="oneData, status : ${siteCdList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
								</select>
							</td>
							<th>몰구분</th>
							<td>
								<select name="mallGb" id="mallGb">
									<option value="">[전체]</option>
									<option th:if="${mallGbList}" th:each="oneData, status : ${mallGbList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
								</select>
							</td>
							<th>상품코드</th>
							<td>
								<input type="text" class="" name="goodsCd" placeholder="" maxlength="20" />
							</td>
							<th>주문교환</th>
							<td>
								<select name="ordExchGb" id="ordExchGb">
									<option value="">[전체]</option>
									<option value="Y">교환</option>
									<option value="N">주문</option>
								</select>
							</td>
						</tr>
						<tr>
							<th>출고처지정상태</th>
							<td>
								<select name="delvAssignStat" id="delvAssignStat">
									<option value="">[전체]</option>
									<option value="Y">출고처 지정</option>
									<option value="N" selected>출고처 미지정</option>
								</select>
							</td>
							<th>출고처</th>
							<td>
								<select name="delvLocCd" id="delvLocCd">
									<option value="">[전체]</option>
									<option th:if="${deliveryLocList}" th:each="oneData, status : ${deliveryLocList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
								</select>
							</td>
							<th>주문등록일</th>
							<td colspan="3">
								<span id="terms"></span>
							</td>
						</tr>
					</table>
					<ul class="panelBar">
						<li class="center">
							<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
							<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset(); fnInitCalendar();">초기화</button>
							<button type="button" id="btnExcel" class="btn btn-info btn-lg" >엑셀다운로드</button>
						</li>
					</ul>

				</div>
			</div>
			<!-- //검색조건 영역 -->
			
			<!-- 리스트 영역 -->
			<div class="panelStyle">
				<ul class="panelBar">
					<li class="right">
						검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
						쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
						<select id="pageSize" name="pageSize">
							<option value="50" selected="selected">50개씩 보기</option>
							<option value="100">100개씩 보기</option>
							<option value="500">500개씩 보기</option>
							<option value="1000">1000개씩 보기</option>
						</select>
						<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
					</li>
				</ul>
				<div id="gridAssignList" style="width:100%; height: 700px;" class="ag-theme-balham"></div>
				<ul class="panelBar">
					<li class="center">
						<div class="tablePaging" id="assignListPagination"></div>
					</li>
				</ul>
		</div>
		</form>
		<!-- //리스트 영역 -->
	</div>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=20210114"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var columnDefs = [
		// group cell renderer needed for expand / collapse icons
		{headerName: "사이트", 		field: "siteNm", 		width: 120,	cellClass: 'text-center'},
		{headerName: "주문번호", 		field: "ordNo", 	width: 85,	cellClass: 'text-center'
			, cellRenderer: function(params) {
				return "<a href=\"javascript:void(0);\" onclick=\"cfnOpenOrderDetailPopup('" + params.value + "');\">" + params.value + "</a>";
			}
		},
		{headerName: "주문상세번호", 	field: "ordDtlNo", 			width: 100,	cellClass: 'text-center'},
		{headerName: "출고처지정취소", 	field: "delvLocCd", 		width: 140,	cellClass: 'text-center',
			cellRenderer: function(params) {
				return gagajf.isNull(params.value) ? "" : '<button type="button" class="btn btn-danger btn-sm" onclick="fnCancelAssignDelvLoc(\'' + params.data.ordNo + '\',\'' + params.data.ordDtlNo + '\',\''+params.data.delvLocClsf+'\');">&nbsp;출고처지정취소&nbsp;</button>';
			}
		},		
		{headerName: "출고처", 		field: "delvLocNm",			width: 200, cellClass: 'text-center'
			, cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value : "<a href=\"javascript:void(0);\" onclick=\"fnOpenDeliveryAssignPopup('" + params.data.ordDtlNo + "');\">[출고처 지정]</a>";
			}},
		{headerName: "주문일시", 		field: "ordDt", 			width: 150, cellClass: 'text-center',
				cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "결제일시", 		field: "ordDt", 			width: 150, cellClass: 'text-center',
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "몰구분", 		field: "mallNm", 			width: 70, cellClass: 'text-center'},
		{headerName: "외부몰", 		field: "extmallNm",			width: 150,	cellClass: 'text-center'},
		{headerName: "주문자", 		field: "ordNm",				width: 100, cellClass: 'text-center'},
		{headerName: "상품코드", 		field: "goodsCd", 			width: 120, cellClass: 'text-center'},
		{headerName: "구성유형", field: "goodsTypeNm", 			width: 130, cellClass: 'text-center',
			cellRenderer: function (params) {
				var option;
				if (params.data.goodsType == 'G056_S') {
					option = "<a href=\"javascript:void(0);\" onclick=\"fnOrderDetailItemForm('" + params.data.ordDtlNo + "');\">" + params.value + "</a>";
				} else {
					option = params.value
				}
				return option;
			}
		},
		{headerName: "옵션", 			field: "optCd",				width: 100,	cellClass: 'text-center'},
		{headerName: "색상", 			field: "optCd1",			width: 70, 	cellClass: 'text-center'},
		{headerName: "사이즈", 		field: "optCd2",			width: 70, 	cellClass: 'text-center'},
		{headerName: "주문수량",		field: "ordQty", 			width: 80,	cellClass: 'text-center'},
		{headerName: "현재고",		field: "currStockQty", 		width: 80,	cellClass: 'text-center',
			cellRenderer: function (params) {
				var option;
				if (params.data.goodsType == 'G056_S') {
					option = "-";
				} else {
					option = params.value
				}
				return option;
			}		
		},
		{headerName: "안전재고",		field: "baseStockQty", 		width: 80,	cellClass: 'text-center',
			cellRenderer: function (params) {
				var option;
				if (params.data.goodsType == 'G056_S') {
					option = "-";
				} else {
					option = params.value
				}
				return option;
			}				
		},
		{headerName: "주문금액", 		field: "ordAmt", 			width: 80, 	cellClass: 'text-center', valueFormatter: function (params) { return params.value.addComma(); }	},
		{headerName: "주문상세상태", 	field: "ordDtlStatNm",		width: 100, cellClass: 'text-center'},
		{headerName: "주문교환", 		field: "ordExchNm",			width: 80,  cellClass: 'text-center'}
	];
	
	//Get GridOptions
	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
	
	//Grid editable
	//gridOptions.defaultColDef.editable = true;
	
	gridOptions.suppressRowClickSelection = true;
	gridOptions.rowSelection = 'multiple';
	
	/*************************************************************************
	* init
	**************************************************************************/		
	$(document).ready(function() {
	    gagaAgGrid.createGrid('gridAssignList', gridOptions);
	    var hideList = ["btnThisWeek", "btnYesterWeek", "btnRecentMonth", "btnThisMonth", "btnYesterMonth", "btnRecent3Month"];
		cfnCreateCalendar('#terms', 'stDate', 'edDate', true, '주문', '', hideList);
		$(".btnToday").trigger('click');

		
	});

	/*************************************************************************
	* 초기화 
	**************************************************************************/		
	var fnInitCalendar = function() {
		$(".btnToday").trigger('click');
	}
	
	/*************************************************************************
	* 조회 클릭
	**************************************************************************/
	$('#btnSearch').on('click', function() {
		fnSearchList();
	});
	
	/*************************************************************************
	* 조회 
	**************************************************************************/		
	var fnSearchList = function() {
		if($('#searchForm input[name=ordNo]').val() == '' && $('#searchForm input[name=ordDtlNo]').val() == '') {
			if($('#stDate').val() == ''){
				mcxDialog.alert('시작 기간을 입력하세요.');
				return;
			}

			if($('#edDate').val() == ''){
				mcxDialog.alert('종료 기간을 입력하세요.');
				return;
			}
		}
		
		gagaPaging.init('searchForm', fnSearchCallBack, 'assignListPagination', $('#searchForm').find('#pageSize').val());
	    gagaPaging.load($("#searchForm input[name=pageNo]").val());
	    


	}
	
	/*************************************************************************
	* 조회 콜백
	**************************************************************************/	
	var fnSearchCallBack = function(result){

		$('#searchForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
		$('#searchForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
		$('#searchForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
		$('#searchForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
		gridOptions.api.setRowData(result.assignList);
		gagaPaging.createPagination(result.pageing.pageable);
		
	}
	
	/*************************************************************************
	* 구성상품 내역 팝업 호출 
	**************************************************************************/	
	var fnOrderDetailItemForm = function (ordDtlNo) {
		var actionUrl = "/delivery/detail/item/form/" + ordDtlNo;
		cfnOpenModalPopup(actionUrl, 'popupDeliveryDetailItemForm');
	}
	
	
	/*************************************************************************
	* 엑셀다운로드 
	**************************************************************************/	
	$('#btnExcel').on('click', function() {
		var totalRows = gridOptions.api.getDisplayedRowCount();
		if(totalRows==0){
			mcxDialog.alert('조회된 내역이 없습니다.');
			return;	
		}
	
		
		var date = new Date().format("YYYYMMDDHHmmss");
		var params = {
			
			fileName : "출고처목록_"+ date,
			sheetName: "DATA"
		}
		gridOptions.excelStyles = [
			{
				id: 'dateFormat',
				dataType: 'dateTime',
				numberFormat: {
					format: 'YYYY-MM-DD;@'
				}
			},
			{
				id: 'textFormat',
				dataType: 'string'
			}
		]
		
		gridOptions.api.exportDataAsExcel(params);
	});
	
	/*************************************************************************
	* 수동출고처지정 팝업호출
	**************************************************************************/		
	var fnOpenDeliveryAssignPopup = function(ordDtlNo) {
		var actionUrl = "/delivery/assign/popup/form/";
		if (typeof(ordDtlNo) != 'undefined') actionUrl += ordDtlNo;
		cfnOpenModalPopup(actionUrl, "popupAssignForm");
	}
	
	/*************************************************************************
	* 출고처 지정 취소
	**************************************************************************/			
	var fnCancelAssignDelvLoc = function(ordNo, ordDtlNo, delvLocClsf){
		mcxDialog.confirm("출고처 지정 취소 하시겠습니까?", {
		    cancelBtnText: "취소",
		    sureBtnText: "확인",
		    sureBtnClick: function() {
	            var param = new Object;
	            param.ordNo    = ordNo;
	            param.ordDtlNo = ordDtlNo;
	            param.delvLocClsf = delvLocClsf;
	            var jsonData = JSON.stringify(param);
	            gagajf.ajaxJsonSubmit('/delivery/cancel/assignDelvLoc', jsonData, fnSearchList);
	        }
		});
	}
	
	
	
/*]]>*/
</script>
</html>
