<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : ExtmallOrderRegisterForm.html
 * @desc    : 제휴몰 주문업로드 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.20   jmh     	 최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title">
		</div>
		<!-- //메인타이틀 영역 -->

		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc">
		</div>
		<!-- //메뉴 설명 -->

		<!-- <form id="searchForm" name="searchForm" action="#" th:action="@{'/shoplinker/order/collection/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;"> -->
		<form id="extmallOrderForm" name="extmallOrderForm" >
			<!-- 검색조건 영역 -->
			<div class="panelStyle">
				<ul class="lrStyle">
					<li>
						<p class="dot">주문등록샘플 엑셀파일을 다운로드 할 경우 <font color="red">[샘플다운로드]</font> 버튼을 클릭한다.</p>
						<p class="dot"><font color="red">[엑셀업로드]</font> 버튼을 눌러 데이터를 업로드 한다. 업로드 된 데이터가 목록에 나타난다.(※ 미매핑이 표시될경우 주문등록이 실패처리된다.)</p>
						<p class="dot"><font color="red">[주문등록]</font> 버튼을 눌러 주문등록을 완료한다.</p>
						<p class="dot"><font color="red">주문등록 처리는 몇 분이 소요되기도 하며</font> 결과는 <font color="red">[결과확인]</font> 버튼을 눌러 확인할 수 있다.</p>
					</li>
				</ul>

				<ul class="panelBar padT20">
					<li class="center">
						<input type="button" class="btn btn-default btn-lg" id="btnExcelDown" onclick="cfnDownloadSampleFile('SF023');" value="제휴몰 주문등록양식 다운로드" />
						<input type="button" class="btn btn-primary btn-lg" id="btnExcelUpload" value="엑셀업로드"/>
						<input type="button" class="btn btn-success btn-lg" id="btnSaveExtmallOrderUpload" value="주문등록"/>
						<input type="button" class="btn btn-danger btn-lg" id="btnSearchExtmallOrderUpload" value="결과확인"/>
					</li>
				</ul>
			</div>
			<!-- 검색조건 영역 -->

			<!-- 리스트 영역 -->
			<div class="panelStyle">

				<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
			</div>
			<!-- //리스트 영역 -->

		</form>

	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	var click_bool = true;
	var columnDefs = [
		{headerName: "업로드상태",			field: "uploadStatNm",			width: 150, cellClass: 'text-center'},
		{headerName: "업로드실패사유",		field: "uploadFailNm",			width: 150, cellClass: 'text-center'},
		{headerName: "업로드실패사유상세",	field: "uploadFailReason",		width: 200, cellClass: 'text-center'},
		{headerName: "주문번호",			field: "ordNo",					width: 130, cellClass: 'text-center'},
		{headerName: "제휴몰ID",			field: "extmallId",				width: 130, cellClass: 'text-center'},
		{headerName: "제휴몰명",			field: "extmallNm",				width: 130, cellClass: 'text-center'},
		{headerName: "쇼핑몰주문번호",		field: "extmallOrderId",		width: 150, cellClass: 'text-center'},
		{headerName: "샵링커주문번호",		field: "agentOrderId", 			width: 150, cellClass: 'text-center'},
		{headerName: "제휴상품코드",		field: "extmallProdId",			width: 150, cellClass: 'text-center'},
		{headerName: "상품코드",			field: "goodsCd",				width: 150, cellClass: 'text-center'},
		{headerName: "상품명",			field: "sku",					width: 150, cellClass: 'text-center'},
		{headerName: "옵션코드",			field: "optCd",					width: 150, cellClass: 'text-center'},
		{headerName: "판매금액", 			field: "currPrice",				width: 100, cellClass: 'text-center'
			,valueFormatter: function(params) {return params.value.addComma();},
			cellEditor: 'textCellEditor',
			cellEditorParams: { maxlength: 14, validType: 'numeric'}
		},
		{headerName: "주문수량",			field: "ordQty",				width: 100, cellClass: 'text-center'},
		{headerName: "주문금액", 			field: "ordAmt", 				width: 100, cellClass: 'text-center'
			,valueFormatter: function(params) {return params.value.addComma();},
			cellEditor: 'textCellEditor',
			cellEditorParams: { maxlength: 14, validType: 'numeric'}
		},
		{headerName: "배송비", 			field: "delvFee", 				width: 100, cellClass: 'text-center'
			,valueFormatter: function(params) {return params.value.addComma();},
			cellEditor: 'textCellEditor',
			cellEditorParams: { maxlength: 14, validType: 'numeric'}
		},
		{headerName: "주문자",			field: "ordNm",					width: 100, cellClass: 'text-center'},
		{headerName: "주문자전화번호",		field: "ordTelno",				width: 130, cellClass: 'text-center'},
		{headerName: "주문자핸드폰번호",		field: "ordPhnno",				width: 130, cellClass: 'text-center'},
		{headerName: "주문자이메일",		field: "ordEmail",				width: 130, cellClass: 'text-center'},
		{headerName: "수령자",			field: "recipNm",				width: 100, cellClass: 'text-center'},
		{headerName: "수령자전화번호",		field: "recipTelno",			width: 130, cellClass: 'text-center'},
		{headerName: "수령자핸드폰번호",		field: "recipPhnno",			width: 130, cellClass: 'text-center'},
		{headerName: "수령자우편번호",		field: "recipZipcode",			width: 130, cellClass: 'text-center'},
		{headerName: "수령자기본주소",		field: "recipBaseAddr",			width: 300, cellClass: 'text-center'},
		{headerName: "수령자상세주소",		field: "recipDtlAddr",			width: 200, cellClass: 'text-center'},
		{headerName: "배송메모",			field: "delvMemo",				width: 200, cellClass: 'text-center'}
		// {headerName: "수집일시",		field: "regDt",					width: 150, cellClass: 'text-center'},
		// {headerName: "주문일시",		field: "ordDt",					width: 150, cellClass: 'text-center'},
		// {headerName: "결제일시",		field: "payDt",					width: 150, cellClass: 'text-center'},
	];


	let gridOptions = gagaAgGrid.getGridOptions(columnDefs);

	gridOptions.getRowStyle = function(params) {
		if ("Y" == params.data.warningYn) {
			return { background: '#FF8383' };
		}
	}

	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);

	});

	//엑셀업로드 클릭 시
	$('#btnExcelUpload').on('click', function() {

		var alertMsg = "<span style='color:red'>※ 테스트 주의 ※ <br>품절시 알림톡이 발송되오니, <br>연락처는 자신의 핸드폰번호 또는 010-0000-000으로 넣어주세요.</span>";
		mcxDialog.confirm(alertMsg, {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {

				if( click_bool ){
					cfnExcelUploadPopup('createExtmallOrder', 'createExtmallOrder');
				}else{
					mcxDialog.alert("주문등록 처리중입니다. 잠시후 시도해주세요.");
				}

			}
		});


	});

	//주문등록 클릭 시
	$('#btnSaveExtmallOrderUpload').on('click', function() {
		if( click_bool ){
			click_bool = false;
			var jsonData = JSON.stringify($('#extmallOrderForm').serializeObject());
			gagajf.ajaxJsonSubmit('/ocm/extmallorder/save', jsonData, fnExtmallOrderSaveCallBack);
			// gagajf.ajaxJsonSubmit('/ocm/extmallorder/save', jsonData);
		}else{
			mcxDialog.alert("주문등록 처리중입니다. 잠시후 시도해주세요.");
		}
	});

	$('#btnSearchExtmallOrderUpload').on('click', function() {
		if( click_bool ){
			var url = '/ocm/extmallorder/upload/second/list';
			gagaAgGrid.fetch(url, gridOptions, 'extmallOrderForm');
			gridOptions.columnApi.setColumnsVisible(['uploadStatNm','uploadFailNm','uploadFailReason','ordAmt','ordNo'], true);
		}else{
			mcxDialog.alert("주문등록 처리중입니다. 잠시후 시도해주세요.");
		}
	});

	var fnExtmallOrderSaveCallBack = function(result){
		click_bool = true;
	}

	var createExtmallOrder = function(result){
		var data = {procJob : result.procJob
					,excelFileNm : result.excelFileNm
					};
		var jsonData = JSON.stringify(data);
		gagajf.ajaxJsonSubmit('/ocm/extmallorder/excelupload/save', jsonData, fnExtmallOrderCreateCallBack);
	}

	var fnExtmallOrderCreateCallBack = function(result){
		var url = '/ocm/extmallorder/upload/tmp/list';
		gagaAgGrid.fetch(url, gridOptions, 'extmallOrderForm');
		gridOptions.columnApi.setColumnsVisible(['uploadStatNm','uploadFailNm','uploadFailReason','ordAmt','ordNo'], false);
	}

/*]]>*/
</script>

</html>
