<!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/NoMemberLayoutMob">
<!--
 *******************************************************************************
 * @source  : NoMemberOrderListFormMob.html
 * @desc    : 비회원 > 주문확인/배송조회 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.13   card007     최초 작성
 *******************************************************************************
 -->
<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="ordNo" 		th:value ="${ordNo}"/>
	<input type="hidden" name="ordNm" 		th:value ="${ordNm}"/>
	<input type="hidden" name="ordPhnno"	th:value ="${ordPhnno}"/>
</form>
<!-- //주문목록조회 -->

<main role="" id="" class="container my">
	<section class="content my_order">
		<!-- page nav -->
		<nav class="pnb">
			<ul>
				<li>
					<a href="javascript:void(0)" class="on" onclick="cfnGoToPage(_PAGE_NOMEMBER_ORDER_LIST);">주문확인/배송조회</a>
				</li>
				<li>
					<a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_NOMEMBER_CRE_LIST);">취소/반품/교환내역</a>
				</li>
			</ul>
		</nav>
		<!-- //page nav -->

		<div class="inner">
			<div class="order_sort">
				<a href="javascript:void(0);" class="od_date_btn">최근 1주일</a>
				<a href="javascript:void(0);" class="od_status_btn">전체상태</a>
			</div>
		</div>

		<!-- common 주문목록 -->
		<div data-id="layer_infinite_item" >
			<section id="infiniteContainer">
				<div id="listBoxOuter">
					<div class="area_list" id="listBox">
					</div>
				</div>
			</section>
 		</div>
 		<!-- common 주문목록 -->
	</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="3"><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">
// 변수설정
let ordNo			= [[${ordNo}]];
let ordNm			= [[${ordNm}]];
let ordPhnno		= [[${ordPhnno}]];
var totalCnt		= [[${totalCnt}]];
var isLogin			= [[${isLogin}]];
var totalPage		= 0;
var remainList		= 0;
var jsonObj 		= {};

// 초기설정
$(document).ready(function() {
	// 타이틀명
	$('#htopTitle').text('마이페이지');

	// AJAX 로드를 위한 변수 설정
	jsonObj = {
		"pageNo" 			: 1
		, "pageSize" 		: 10
		, "pageUnit" 		: 10
		, "ordDtlStat" 		: ""
		, "stDate" 			: ""
		, "edDate" 			: ""
		, "ordNo"			: ordNo
		, "ordNm"			: ordNm
		, "ordPhnno"		: ordPhnno
	}
	
	// 주문 검색 기간 설정
	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 (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('/noMember/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: '/noMember/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) {
						$("#listBox").css("display", "block");
						gagaInfiniteScroll.draw(result);
					}
				}
			});
		} else if (pageNo == 1) {
			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);
		}
	});
}

//검색기간 버튼 클릭 이벤트 처리
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).ready(function(){
	//	$(document).on('click','.popup_box .button_list button',function(){
	//		$('.popup_box .button_list button').removeClass('on');
	//		$(this).addClass('on');
	//	})
	//});

	//기간 선택 팝업
	$(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"});
	});

	var getTotalPage = function(param) {
		// 전체페이지 구하기
		totalPage 	= parseInt(param / 10);
		remainList 	= param % 10;
		
		// 나머지가 있으면 전체 페이지 + 1
		if (remainList > 0) {
			totalPage = totalPage + 1;
		}
	}
</script>
</th:block>
</body>
</html>
