<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="mob/common/layout/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageOrderListFormMob.html
 * @desc    : 마이페이지 > 주문확인/배송조회 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.19   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">

<!-- 주문목록조회 -->
<form id="searchForm" name="searchForm">
	<input type="hidden" name="pageNo" 		value=1 />
	<input type="hidden" name="pageSize" 	value=5 />
	<input type="hidden" name="pageUnit" 	value=10 />
	<input type="hidden" name="ordDtlStat" 	value="" />
	<input type="hidden" name="stDate" 		value="" />
	<input type="hidden" name="edDate" 		value="" />
	<input type="hidden" name="custNo" 		th:value ="${customerInfo.custNo}"/>
</form>
<!-- //주문목록조회 -->

<main role="" id="" class="container my">
	<section class="content my_order">
		
		<!-- only 마이페이지메인 -->
		<th:block th:if="${mypageMainYn} == 'Y'">
			<div class="inner bg_gray">
				<div class="mem_info clear">
					<div class="mem_rank">
						<div th:class="|rank_icon ${#strings.toLowerCase(customerInfo.custGradeNm)}|" th:text="${custGradeNm1Str}"></div>
						<div class="mem_name"><strong th:text="${customerInfo.custNm}"></strong>님</div>
						<a href="javascript:void(0);" class="rank_txt" th:text="${customerInfo.custGradeNm}" onclick="fnGoToCustomerBenefit();"></a> <!-- 210408_a태그 변경 | 회원등급혜택 페이지 링크 이동-->
						<button type="button" id="btn_coupon_down" class="btn cou_btn" onclick="fnDownloadCoupon();">등급 쿠폰 다운로드</button> <!-- 210409_추가 : btn_coupon_down id 추가 -->
					</div>
					<div class="mem_box">
						<div class="mem_point">
							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_POINT)">
							<p class="tit">STYLE포인트</p>
							<em th:text="${#numbers.formatInteger(rmPntAmt, 1, 'COMMA')}"></em>P
							</a>
						</div>
						<div class="mem_gift">
							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_GIFTCARD)">
							<p class="tit">상품권</p>
							<span>
								<em th:text="${#numbers.formatInteger(rmGfcdAmt, 1, 'COMMA')}"></em>원
							</span>
							</a>
						</div>
						<div class="mem_coupon">
							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_COUPON)">
							<p class="tit">쿠폰</p>
							<span>
								<em id="couponCnt" th:text="${couponCnt}"></em>장
							</span>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="inner">
				<div class="order_info clear">
					<ul class="clear">
						<li>
							<div class="count"><span id="shippingCount" th:text="${orderCount.shippingCount}"></span></div>
							<div class="or_p">배송 중</div>
						</li>
						<li>
							<div class="count"><span id="shipCompleteCount" th:text="${orderCount.shipCompleteCount}"></span></div>
							<div class="or_p">배송 완료</div>
						</li>
						<li>
							<div class="count"><span id="orderCreCount" th:text="${orderCount.cancelCount + orderCount.returnCount + orderCount.exchangeCount + orderCount.confirmCount}">7</span></div>
							<div class="or_p">취소/교환/반품</div>
						</li>
					</ul>
				</div>
			</div>
		</th:block>
		<!-- //only 마이페이지메인 -->
		
		<!-- only 주문목록 -->
		<th:block th:if="${mypageMainYn} == 'N'">
			<div class="inner">
				<div class="order_sort">
					<a href="javascript:void(0);" class="od_date_btn" id="od_date_btn">최근 1주일</a>
					<a href="javascript:void(0);" class="od_status_btn" id="od_status_btn">전체상태</a>
				</div>
			</div>
		</th:block>
		<!-- only 주문목록 -->
		
		<section id="infiniteContainer">
			<div id="listBoxOuter">
				<ul class="area_list" id="listBox">
				</ul>
			</div>
		</section>
 		
 		<!-- only 마이페이지메인 -->
 		<th:block th:if="${mypageMainYn} == 'Y'">
	 		<div class="inner wide">
				<div class="lnb_list">
					<ul>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_ORDER_LIST);">주문확인/배송조회</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);">취소/반품/교환내역</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_RESTOCK);">재입고 알림내역</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_COUPON);">쿠폰</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_POINT);">STYLE 포인트</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_GIFTCARD);">상품권</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_REVIEW);">리뷰</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_DELIVERY_ADDR);">배송지 관리</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_WISHLIST);">위시리스트</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_CUSTOMER);">내 정보 관리</a></li>
						<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE_SECEDE);">회원 탈퇴</a></li>
					</ul>
				</div>
			</div>
		</th:block>
		<!-- //only 마이페이지메인 -->
 		
	</section>
</main>

<!-- 기간 선택 팝업 -->
<div id="odDatePop" class="popup_box odDatePop">
	<div class="lap">
		<div class="popup_close">카테고리닫기</div>
		<div class="popup_head sr-only">
			<h2 class="">기간 선택 팝업</h2>
		</div>
		<div class="popup_con">
			<div class="button_list clear">
				<button type="button" class="on" onclick="fnSetSearchPeriod(-1);" period="-1"><span>최근 1주일</span></button>
				<button type="button" onclick="fnSetSearchPeriod(1);" period="1"><span>최근 1개월</span></button>
				<button type="button" onclick="fnSetSearchPeriod(3);" period="3"><span>최근 3개월</span></button>
				<button type="button" onclick="fnSetSearchPeriod(6);" period="6"><span>최근 6개월</span></button>
				<button type="button" onclick="fnSetSearchPeriod(9);" period="9"><span>최근 9개월</span></button>
				<button type="button" onclick="fnSetSearchPeriod(12);" period="12"><span>최근 12개월</span></button>
			</div>
		</div>
	</div>
</div>
<!-- //기간 선택 팝업 -->
<!-- 주문상태 선택 팝업 -->
<div id="odStatusPop" class="popup_box odStatusPop">
	<div class="lap">
		<div class="popup_close">카테고리닫기</div>
		<div class="popup_head sr-only">
			<h2 class="">주문상태 선택 팝업</h2>
		</div>
		<div class="popup_con">
			<div class="button_list clear">
				<button type="button" code="" class="ordDtlStat on"><span>전체상태</span></button>
				<th:block th:each="ordDtlStat , i : ${ordDtlStatList}">
					<button type="button" class="ordDtlStat" th:code="${ordDtlStat.cd}">
						<span th:text="${ordDtlStat.cdNm}"></span>
					</button>
				</th:block>
			</div>
		</div>
	</div>
</div>
<!-- //주문상태 선택 팝업 -->

<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
<script src="/ux/plugins/jquery/jquery.history.min.js"></script>

<script th:inline="javascript">
// 변수설정
var custNo 			= [[${customerInfo.custNo}]];
var totalCnt		= [[${totalCnt}]];
var totalPage		= 0;
var remainList		= 0;
var jsonObj 		= {};
var mypageMainYn	= [[${mypageMainYn}]];
let customerInfo 	= [[${customerInfo}]];
var isLogin			= [[${isLogin}]];
var pageNo			= 0;

// 초기설정
$(document).ready(function() {

	// AJAX 로드를 위한 변수 설정
	jsonObj = {
		"pageNo" 			: 1
		, "pageSize" 		: 10
		, "pageUnit" 		: 10
		, "ordDtlStat" 		: ""
		, "stDate" 			: ""
		, "edDate" 			: ""
		, "custNo"			: custNo
	}
	
	// 마이페이지 메인화면일때 초기 1개월 조회
	if (mypageMainYn == 'Y') {
		// 타이틀명
		$('#htopTitle').text('마이페이지');
	}
	// 마이페이지 주문목록화면일때
	else {
		// 타이틀명
		$('#htopTitle').text('주문확인/배송조회');
	}
	
	// GNB Background Color 변경
	if (mypageMainYn == 'Y') {
		$('#htopSub').addClass('my_main');
	}

	// 주문 검색 기간 설정
	fnSetInitPeriod();
});

//사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
$(window).on("pageshow", function(event) {
	if ((event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
		// 캐쉬페이징
		fnGetPrePageInfo();
	} else {
		// 인피니티스크롤 초기화
		fnMypageOrderListInfiniteScrollInit();
	}

	gagaInfiniteScroll.getHistory();
});

// 주문 목록 조회
var fnGetInfiniteScrollDataList = function() {
	// 2021.05.28 마이페이지메인 주문목록 확인
	if (mypageMainYn == 'Y') {
		jsonObj.pageSize = 1;
		jsonObj.pageUnit = 1;
	}
	
	// 2021.05.28 페이지 기능 수정
	if (pageNo <= totalPage) {
		pageNo++;
	} else {
		return false;
	}

	// 페이지설정
	$("#searchForm input[name=pageNo]").val(pageNo);
	
	jsonObj.pageNo = pageNo;
	jsonObj.stDate = $("#searchForm input[name=stDate]").val();
	jsonObj.edDate = $("#searchForm input[name=edDate]").val();
	jsonObj.ordDtlStat = $('#searchForm input[name=ordDtlStat]').val();
	
	gagajf.ajaxJsonSubmit('/mypage/order/list/pre/info', JSON.stringify(jsonObj), function(result) {
		let totalCount 	= result.paging.totalCount;
		totalCnt 		= totalCount;

		getTotalPage(totalCount);

		gagaInfiniteScroll.pageStatus.totalCount = totalCount;

		let ordNoList = []; 
		$.each(result.ordNoList, function(idx, item) {
			ordNoList.push(item.ordNo);
		});

		jsonObj.ordNoList = ordNoList;

		if (ordNoList.length > 0) {
			$.ajax({
				type: "POST",
				url: '/mypage/order/list/info',
				data: JSON.stringify(jsonObj),
				dataType: 'html',
				beforeSend: function (xhr, settings) {
					xhr.setRequestHeader("AJAX", "true");
					xhr.setRequestHeader('Accept', 'application/json');
					xhr.setRequestHeader('Content-Type', 'application/json');
				},
				success: function (result) {
					if (result != null) {
						// 2021.05.28
						$("#listBox").css("display", "block");
						if (mypageMainYn == 'Y') {
							$("#listBox").append(result);
						} else {
							gagaInfiniteScroll.draw(result);
							
							// 2021.06.03 첫페이지 버튼 클래스 처리가 안되어 여기서 처리 진행
							if (pageNo == 1) {
								$.each($('.btn_count'), function(idx, item) {
									if ($(item).children().length > 3 && !$(item).hasClass('col2')) {
										$(item).addClass('col2');
									}
								});
							}
						}
					}
				}
			});
		} else if (pageNo == 1 && mypageMainYn != 'Y') {
			let html = '<div class="inner">';
			html += '	<div class="part_goods">';
			html += '		<div class="nodata">';
			html += '			<div class="txt_box">';
			html += '				<p>주문내역이 없습니다.<br/></p>';
			html += '			</div>';
			html += '		</div>';
			html += '	</div>';
			html += '</div>';
			
			$("#listBox").css("display", "block");
			$("#listBox").append(html);
		}
	}, true);
}

// 검색기간 버튼 클릭 이벤트 처리
var fnSetSearchPeriod = function(period) {
	if (period == -1) {
		fnSetInitPeriod();
	} else {
		let date = new Date();
		let edDate = getFormatDate(date);
		
		let day = date.getDate();
		let lastDay = (new Date(date.getFullYear(), (date.getMonth() + 1) - period, 0)).getDate();
		
		if (day - lastDay > 0) {
			date.setDate(date.getDate() - (day - lastDay));
		}
		
		date.setMonth(date.getMonth() - period);
		let stDate = getFormatDate(date);
		
		$('#searchForm input[name=edDate]').val(edDate);
		$('#searchForm input[name=stDate]').val(stDate);
	}

	// 인피니티스크롤 초기화
	fnMypageOrderListInfiniteScrollInit();
	
	$("#odDatePop .popup_con button").removeClass("on");
	
	// 기간설정
	$("#odDatePop .popup_con button").each(function() {
		var tempPeriod = $(this).attr("period");
		if (tempPeriod == period) {
			$(this).addClass("on");
			
			// 텍스트설정
			var periodStr = $(this).find("span").text();
			$(".container .my_order .od_date_btn").text(periodStr);
		}
	});
	
	// 데이터 조회
	fnGetInfiniteScrollDataList();
	
	// 팝업닫기
	$(".popup_close").trigger("click");
}

// 주문상세상태코드 셀렉트박스 변경 이벤트
$('#odStatusPop .popup_con .button_list .ordDtlStat').on('click', function() {
	let code = $(this).attr('code');
	$('#searchForm input[name=ordDtlStat]').val(code);
	jsonObj.ordDtlStat = code;
	
	$("#odStatusPop .popup_con button").removeClass("on");
	
	// 상태값설정
	$("#odStatusPop .popup_con button").each(function() {
		var tempCode = $(this).attr("code");
		if (tempCode == code) {
			$(this).addClass("on");
			
			// 상태값 명칭
			var ordDtlStatNm = $(this).find("span").text();
			$(".container .my_order .od_status_btn").text(ordDtlStatNm);
		}
	});
	
	// 인피니티스크롤 초기화
	fnMypageOrderListInfiniteScrollInit();
	
	// 데이터 조회
	fnGetInfiniteScrollDataList();
	
	// 팝업닫기
	$(".popup_close").trigger("click");
});

// 인피니티 스크롤 초기화
var fnMypageOrderListInfiniteScrollInit = function(){
	sessionStorage.removeItem(document.location.href);
	localStorage.setItem('scrollpos', '0');
	localStorage.setItem('pageNo', '0');
	localStorage.setItem('period', '');
	localStorage.setItem('code', '');
	pageNo = 0;
	
	// History 초기화
	$("#listBox").html("");
}
</script>

<script>
	//기간 선택 팝업
	$(document).on("click", ".order_sort .od_date_btn", function(){
		$('#odDatePop').show().addClass("active");
		$("body").css({"overflow":"hidden"});
	});

	//주문상태 선택 팝업
	$(document).on("click", ".order_sort .od_status_btn", function(){
		$('#odStatusPop').show().addClass("active");
		$("body").css({"overflow":"hidden"});
	});

	//팝업_닫기
	$('.popup_close').on("click",function(){
		$('.popup_box').hide().removeClass('active');
		$("body").css({"overflow":"visible"});
	});

	/* 210409_추가 : alert 모음 */
	//$(document).on("click", "#btn_purchase_confirm", function(){
	//	mcxDialog.confirm("구매확정 후에는 반품/교환이 불가합니다. 구매확정하시겠습니까?", {
	//		cancelBtnText: "취소",
	//		sureBtnText: "확인",  // Confirmation button text
	//		sureBtnClick: function() {  // Confirm button click callback
	//			alert("9,999P가 적립되었습니다.");
	//		}
	//	});
	//});

	$(document).on("click", "#btn_sms_alert", function(){
		mcxDialog.alert("SMS로 선물내역을 다시 전송하였습니다.", { 
				//alert("선물하기 SMS를 조금 전 다시 발송하였습니다. 잠시 후 다시 시도해주세요."); : SMS 발송한지 10분이 지나지 않았을 경우
			sureBtnText: "닫기",  
		});
	});
	/* //210409_추가 : alert 모음 */
	
	// 등급쿠폰 다운 클릭 이벤트
	var fnDownloadCoupon = function() {
		let url = '/planning/event/custgrade/coupon/down';
		
		let params = JSON.stringify({});
		gagajf.ajaxJsonSubmit(url, params, function(result) {
			let message = '받을 쿠폰이 없습니다. 1건 구매 하시고 다음달 등급 쿠폰을 받아보세요!';
			if (result.isDownload) {
				message = '총 ' + result.downloadCnt + '장의 쿠폰을 다운로드 하였습니다.';
			}
			
			mcxDialog.alertC(message, {
				sureBtnText: "확인",
				sureBtnClick: function () {
					fnReloadCouponCount();
				}
			});
		});
	}
	
	// 보유쿠폰 수량 업데이트 처리
	var fnReloadCouponCount = function() {
		let url = '/mypage/coupon/count';
		
		let data = {};
		data.custNo = customerInfo.custNo;
		
		let jsonData = JSON.stringify(data);
		
		gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
			$('#couponCnt').text(result.couponCnt);
			$('#expiredSoonCouponCnt').text(result.expiredSoonCouponCnt);
		});
	}

	// 등급혜택 보기 클릭 이벤트
	var fnGoToCustomerBenefit = function() {
		cfnGoToPage(_PAGE_CUSTOMER_GRADE_BENEFIT);
	}
	
	var getTotalPage = function(param) {
		// 전체페이지 구하기
		totalPage 	= parseInt(param / 10);
		remainList 	= param % 10;
		
		// 나머지가 있으면 전체 페이지 + 1
		if (remainList > 0) {
			totalPage = totalPage + 1;
		}
	}
	
	// 상태값 별 수량 업데이트 처리
	var fnReloadStatusCount = function() {
		if (mypageMainYn == 'Y') {
			let url = '/mypage/status/count';
			
			let data = {};
			
			let jsonData = JSON.stringify(data);
			
			gagajf.ajaxJsonSubmit(url, jsonData, function (result) {
				$('#orderReceiptCount').text(result.orderCount.depositWaitingCount);
				$('#paymentCompleteCount').text(result.orderCount.paymentCompleteCount);
				$('#goodsPrepareCount').text(result.orderCount.goodsPrepareCount);
				$('#shipPrepareCount').text(result.orderCount.shipPrepareCount);
				$('#shippingCount').text(result.orderCount.shippingCount);
				$('#shipCompleteCount').text(result.orderCount.shipCompleteCount);
				$('#orderCreCount').text(result.orderCount.cancelCount + result.orderCount.returnCount + result.orderCount.exchangeCount);
			});
		}
		// 인피니티스크롤 초기화
		fnMypageOrderListInfiniteScrollInit();

		// 데이터 조회
		fnGetInfiniteScrollDataList();
	}
</script>
</th:block>
</body>
</html>
