<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : DeliveryWithdrawDirectiveListForm.html
 * @desc    : 배송/회수지시 목록 Page
 *=============================================================
 * ISTYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *=============================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  ==================================
 * 1.0  2020.11.11   moon        최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->
		<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">	
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/delivery/dwdirect/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>지시구분</th>
							<td>
								<select name="delvGb">
									<option value="">전체</option>
									<option value="D">배송지시</option>
									<option value="W">회수지시</option>
								</select>
							</td>
							<th>택배사 전송여부</th>
							<td>
								<select name="sendYn">
									<option value="">전체</option>
									<option value="N">미전송</option>
									<option value="Y">전송</option>
								</select>
							</td>
							<th>사이트</th>
							<td>
								<select name="siteCd">
									<option value="">전체</option>
									<option th:if="${siteCdList}" th:each="oneData, status : ${siteCdList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>주문일/회수요청일</th>
							<td colspan="5" id="terms">
							</td>
						</tr>
					</tbody>
				</table>
				<!-- <div class="panelBtnB">  -->
				<ul class="panelBar">
					<li class="center">
					<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
					<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
					</li>
				</ul>
			
			</form>
			</div>
		</div>

		<div class="panelStyle">
			<ul class="panelBar">
				<li class="left">
					<button type="button" class="btn btn-default btn-lg" id="btnExcel">엑셀다운로드</button>
				</li>
			</ul>

			<div class="panelContent" style="overflow: hidden;">
				<div id="gridList" style="width: 100%; height: 600px;"  class="ag-theme-balham"></div>
			</div>
		</div>
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	// 사이트목록
	var siteList = gagajf.convertToArray([[${siteCdList}]]);

	var columnDefs = [
		{headerName: "지시구분", field: "delvGbNm", width: 80, cellClass: "text-center"},
		{
			headerName: "택배사전송", field: "sendYn", width: 80, cellClass: "text-center",
			cellRenderer: function (params) { return params.value == 'Y' ? '전송' : '미전송'; }
		},
		{
			headerName: "사이트", field: "siteCd", width: 80, cellClass: "text-center",
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{
			headerName: "주문번호", field: "ordNo", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return gagajf.isNull(params.value) ? '' : '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{headerName: "주문상세번호", field: "ordDtlNo", width: 100, cellClass: "text-center"},
		{
			headerName: "상품코드", field: "goodsCd", width: 120, cellClass: "text-center",
			cellRenderer: function(params) { return gagajf.isNull(params.value) ? '' : '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{headerName: "상품명", field: "goodsNm", width: 200},
		{headerName: "수취인명", field: "recipNm", width: 120, cellClass: "text-center"},
		{headerName: "수취인휴대전화", field: "recipPhnno", width: 120, cellClass: "text-center"},
		{headerName: "수취인전화번호", field: "recipTelno", width: 120, cellClass: "text-center"},
		{headerName: "수취인이메일", field: "recipEmail", width: 120},
		{headerName: "수취인우편번호", field: "recipPostNo", width: 120, cellClass: "text-center"},
		{headerName: "수취인기본주소", field: "recipBaseAddr", width: 300},
		{headerName: "수취인상세주소", field: "recipDtlAddr", width: 200},
		{headerName: "주문자명", field: "orderNm", width: 100, cellClass: "text-center"},
		{headerName: "주문자휴대전화", field: "orderPhnno", width: 120, cellClass: "text-center"},
		{headerName: "주문자전화번호", field: "orderPhnno", width: 120, cellClass: "text-center"},
		{headerName: "주문자이메일", field: "orderEmail", width: 120}
	];

	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);

	// 셀 클릭 이벤트
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field == 'ordNo') {
			// 주문 상세
			cfnOpenOrderDetailPopup(event.data.ordNo);
		} else if (event.colDef.field == 'goodsCd') {
			// 상품 상세
			cfnOpenGoodsDetailPopup('U', event.data.goodsCd);
		}
	};

	// 조회
	$('#btnSearch').on('click', function() {
		// Fetch data
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
	});

// 	// 택배사 전송여부 변경시 처리
// 	$('#sendYn').on('change',function(){
// 		var sendVal = $('#searchForm select[name=sendYn]').val();
// 		fnDatepickerDisabled(sendVal);
// 	});

// 	// 날짜선택 활성화/비활성화
// 	var fnDatepickerDisabled = function(flag) {
// 		if(flag == 'Y'){

// 			$('#stDate').attr('disabled', false);
// 			$('#edDate').attr('disabled', false);
// 			$('.btn-default').attr('disabled', false);
// 			$('.ui-datepicker-trigger').attr('disabled', false);
// 			$('.btnToday').trigger('click');

// 		} else {

// 			$('#stDate').val('');
// 			$('#edDate').val('');
// 			$('#stDate').attr('disabled', true);
// 			$('#edDate').attr('disabled', true);
// 			$('.btn-default').attr('disabled', true);
// 			$('.ui-datepicker-trigger').attr('disabled', true);
// 		}
// 	}

	//엑셀다운로드
	$('#btnExcel').on('click', function() {
		gagaAgGrid.exportToExcel('배송/회수지시 목록', gridOptions);
// 		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);
	});

	$(document).ready(function() {
		

		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);
		cfnCreateCalendar('#terms', 'stDate', 'edDate', false);
		// grid 높이 조절
		//uifnFitGrid('auto');

		gagajf.setDate('#terms', 'stDate', 'edDate', 't');

		//fnDatepickerDisabled();
	});

/*]]>*/
</script>

</html>