<!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  : MypageCreListFormMob.html
 * @desc    : 마이페이지 > 취소/반품/교환내역 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.26   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- 취소/반품/교환목록조회 -->
<form id="searchForm" name="searchForm" th:action="@{'/mypage/cre/list'}" th:method="post">
	<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="chgStat" 	value="" />
	<input type="hidden" name="stDate" 		value="" />
	<input type="hidden" name="edDate" 		value="" />
	<input type="hidden" name="custNo" 		th:value ="${custNo}"/>
</form>

<main role="" id="" class="container my">
	<section class="content my_return"> <!-- 210409_수정 : class my_return 변경 -->
		<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>
		
		<!-- 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="-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" class="ordDtlStat on" code=""><span>전체상태</span></button>
				<button type="button" class="ordDtlStat" code="G685_91"><span>결제대기</span></button>
				<button type="button" class="ordDtlStat" code="G685_20"><span>교환접수</span></button>
				<button type="button" class="ordDtlStat" code="G685_50"><span>반품접수</span></button>
				<button type="button" class="ordDtlStat" code="G685_30"><span>회수요청</span></button>
				<button type="button" class="ordDtlStat" code="G685_31"><span>상품 검수중</span></button>
				<button type="button" class="ordDtlStat" code="G685_34"><span>교환 진행중</span></button>
				<button type="button" class="ordDtlStat" code="G685_33"><span>환불 진행중</span></button>
				<button type="button" class="ordDtlStat" code="G685_40"><span>교환완료</span></button>
				<button type="button" class="ordDtlStat" code="G685_60"><span>반품완료</span></button>
				<button type="button" class="ordDtlStat" code="G685_92"><span>접수취소</span></button>
				<button type="button" class="ordDtlStat" code="G685_93"><span>주문취소</span></button>
				<button type="button" class="ordDtlStat" code="G685_94"><span>품절취소</span></button>
<!--				<th:block th:each="oneData, status : ${chgStatList}">-->
<!--					<button type="button" class="ordDtlStat" th:code="${oneData.cd}">-->
<!--						<span th:text="${oneData.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">
//AJAX 로드를 위한 변수 설정
let custNo 		= [[${custNo}]];
let totalCnt 	= [[${totalCnt}]];
var isLogin = [[${isLogin}]];
var jsonObj 	= {};
var totalPage	= 0;
var remainList	= 0;
var pageNo		= 0;

/*<![CDATA[*/
$(document).ready(function() {
	// 타이틀명
	$('#htopTitle').text('취소/반품/교환내역');

	jsonObj = {
		"pageNo" 			: 1
		, "pageSize" 		: 10
		, "pageUnit" 		: 10
		, "chgStat" 		: ""
		, "stDate" 			: ""
		, "edDate" 			: ""
	}
	
	// 주문 검색 기간 설정
	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 {
		// 2021.05.28 인피니티스크롤 초기화
		fnMypageCreListInfiniteScrollInit();
	}
	
	// 데이터 조회
	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.chgStat	= $('#searchForm input[name=chgStat]').val();
	
	gagajf.ajaxJsonSubmit('/mypage/cre/list/pre/info', JSON.stringify(jsonObj), function(result) {
		let totalCount 	= result.paging.totalCount;
		totalCnt 		= totalCount;
		
		getTotalPage(totalCount);
		
		gagaInfiniteScroll.pageStatus.totalCount = totalCount;
		
		let ordChgSqArr = [];
		$.each(result.creList, function(idx, item) {
			ordChgSqArr.push(item.ordChgSq);
		});
		
		jsonObj.ordChgSqArr = ordChgSqArr;
		
		if (ordChgSqArr.length > 0) {
			$.ajax({
				type: "POST",
				url: '/mypage/cre/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");
						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);
		}
	}, 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);
	}

	// 인피니티스크롤 초기화
	fnMypageCreListInfiniteScrollInit();
	
	$("#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_return .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=chgStat]').val(code);
	jsonObj.chgStat = 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_return .od_status_btn").text(ordDtlStatNm);
		}
	});
	
	// 인피니티스크롤 초기화
	fnMypageCreListInfiniteScrollInit();
	
	// 데이터 조회
	fnGetInfiniteScrollDataList();
	
	// 팝업닫기
	$(".popup_close").trigger("click");
});

// 2021.04.21 인피니티 스크롤 기능 구현전 추후 수정
var fnMypageCreListInfiniteScrollInit = 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("");
}

// 취반교 상세 페이지 이동
var fnGoToCreDetail = function(param) {
	// 이전 페이지 정보 세션 저장
	fnSetPrePageInfo()
	
	let ordNo = $(param).attr('ordNo');
	let ordChgSq = $(param).attr('ordChgSq');
	let chgGb = $(param).attr('chgGb');
	let url = '';

	if (chgGb == 'G680_20') {
		url = '/mypage/cre/cancel/detail/form';
	} else if (chgGb == 'G680_30') {
		url = '/mypage/cre/return/detail/form';
	} else if (chgGb == 'G680_40') {
		url = '/mypage/cre/exchange/detail/form';
	}

	// 반품/취소/교환 상세페이지 이동
	url += '?ordChgSq=' + ordChgSq;
	url += '&ordNo=' + ordNo;

	cfnGoToPage(_frontUrl + url);
}

var getTotalPage = function(param) {
	// 전체페이지 구하기
	totalPage 	= parseInt(param / 10);
	remainList 	= param % 10;
	
	// 나머지가 있으면 전체 페이지 + 1
	if (remainList > 0) {
		totalPage = totalPage + 1;
	}
}
/*]]>*/
</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"});
	});

	/* 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 모음 */
</script>

</th:block>

</body>
</html>
