<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/MypageLayoutWeb">
<!--
 *******************************************************************************
 * @source  : MypagePointForm.html
 * @desc    : 마이페이지 > STYLE24포인트 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.26   csh9191     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
<div class="content myPoint"> <!-- 페이지특정 클래스 = myPoint -->
		<div class="cont_body">
			<!-- CONT-BODY -->
			<div class="lnb">
				<div class="lnb_tit">
				<h2>마이페이지</h2>
				</div>
				<div class="lnb_list">
					<ul id="mypageLnbList"></ul>
				</div>
			</div>
			<div class="cont">
				<div class="sec_head">
					<h3 class="subH1">STYLE 포인트</h3>
				</div>
				<div class="sec_body">
					<div class="highlight_area">
						<div class="have_amount">
							<div class="total_amount">
								나의 보유 포인트&nbsp;<span><em th:text="${#numbers.formatDecimal(rmPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</span>
							</div>
							<dl>
								<div>
									<dt>적립 예정 포인트</dt>
									<dd><em th:text="${#numbers.formatDecimal(expectedPntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</dd>
								</div>
								<div>
									<dt><span class="tag primary_line">D-<em >30</em></span>한 달 이내 소멸 예정</dt>
									<dd><em th:text="${#numbers.formatDecimal(expectedExpirePntAmt, 0, 'COMMA', 0, 'POINT')}"></em>P</dd>
								</div>
							</dl>
						</div>
					</div>
					<div class="content_area">
						<div class="taps">
							<div>
								<ul>
									<li id="allPointList"><a href="javascript:void(0);">전체내역</a></li>
									<li id="accumulatePointList"><a href="javascript:void(0);">적립내역</a></li>
									<li id="usePointList"><a href="javascript:void(0);">사용내역</a></li>
								</ul>
							</div>
						</div>
						<div class="select_box">
							<div class="form_field">
								<div class="select_custom month">
									<div class="combo">
										<input type="hidden" name="pointDate" value="0" id="pointDate"/>
										<div class="select"></div>
										<ul id="searchDt" class="list">
											
										</ul>
									</div>
								</div>
							</div>
						</div>
						<!-- 데이터 있을 시 -->
						<div class="list_box">
							<div class="tbl type5">
								<table>
									<colgroup>
										<col width="10%">
										<col width="12%">
										<col width="42%">
										<col width="18%">
										<col width="18%">
									</colgroup>
									<thead>
										<tr>
											<th scope="col"><span class="sr-only">증감여부</span></th>
											<th scope="col">사유</th>
											<th scope="col">내용</th>
											<th scope="col">포인트</th>
											<th scope="col">일자</th>
										</tr>
									</thead>
									<tbody id="pointAjaxList">
															
									</tbody>
								</table>
							</div>
						</div>
						<!-- //데이터 있을 시 -->
						<!-- 데이터 없을 시 -->
						 <div class="nodata">
							<div class="txt_box">
								<p>
									STYLE 포인트 적립/사용내역이 없습니다.<br>
	
								</p>
							</div>
						</div> 
						<!-- //데이터 없을 시 -->	
					</div>
				</div>
			</div>
		</div>
	</div>
<script th:inline="javascript">
	let accumulatePointList = [[${accumulatePointList}]];
	let usePointList = [[${usePointList}]];
	let allPointList = [[${allPointList}]];
	let date = [[${date}]];
	var year = date[0].year;
	var month = date[0].month;
	// TODO - 퍼블확정시
	
	// 이번년도
	//동적으로 날짜 년도 append
	function appendYear() {
		for (var i = 0; i < date.length; i++) {
			$("#searchDt").append(	"<li onclick='fnChangeDate(this.value)' value='"+ date[i].year + "" + date[i].month + "'>" + date[i].year	+ "년" +  "  " + date[i].month + "월 </li>")
		}
		$(".select").html(date[0].year + "년"  +  "  " + date[0].month + "월"); // 현재년도 선택 */ 
	}
	appendYear($("#searchDt"));

	// 날짜변경 이벤트
	var fnChangeDate = function(param) {
		let url = '/mypage/allpoint/list';
		
		
 		//$(param).parent().parent().find('input[name=pointDate]').val($(param).val());
 		//var pointData = $(param).parent().parent().find('input[name=pointDate]').val();
 		
 		// 포인트화면 로딩시 이번달 설정 리스트 표시하기 위함
 		var data = {};
 		if(typeof param == 'undefined'){
 			data.searchDt = year.toString() + "" + month.toString();
 		}else{
 			data.searchDt = param;
 		}
		var jsonData = JSON.stringify(data);
		
		gagajf.ajaxJsonSubmit('/mypage/allpoint/list', jsonData, function(result){

						accumulatePointList = result.accumulatePointList;
						usePointList = result.usePointList;
						allPointList = result.allPointList;
						// 클릭상태 확인
						if($("#accumulatePointList").hasClass("active")){
							$("#accumulatePointList").click();
							// 첫화면 전체내역 조회
							fnGetPointTableInfo(result.accumulatePointList);
						}else if($("#usePointList").hasClass("active")){
							$("#usePointList").click();
							fnGetPointTableInfo(usePointList);
						}else if($("#allPointList").hasClass("active")) {
							$("#allPointList").click();
							fnGetPointTableInfo(allPointList);
						}
						
		});
	}
	
	// HTML 그리기
	var fnGetPointTableInfo = function(param) {
		$('.nodata').hide();
		let tag = "";
		if(param != null && param.length > 0){
			$.each(param, function(idx,item){
				tag += '<tr>\n';
				tag += '	<td>\n';
				if(item.pntAmt > 0){
					tag += '		<span class="tag primary">적립</span>\n';
				}else{
					tag += '		<span class="tag deepgray">차감</span>\n';
				}
				
				tag += '	</td>\n';
				tag += '	<td>'+item.occurGb+'</td>\n';
				tag += '	<td>\n';
				tag += '		<div class="txt_content">'+ item.occurDtlDesc + '</div>\n';
				tag += '	</td>\n';
				tag += '	<td>\n';
				if(item.pntAmt > 0){
					tag += '		<span class="amount_plus">\n';
					tag += '			<em>+'+item.pntAmt.addComma()+'</em>P';
					tag += '		</span>\n';
				}else{
					tag += '		<span class="amount_minus">\n';
					tag += '			<em>'+item.pntAmt.addComma()+'</em>P';
					tag += '		</span>\n';
				}
				
				tag += '	</td>\n';
				tag += '	<td>'+item.pntUploadDt;
				tag += '	</td>\n';
			});
		}else{
			$('.nodata').show();
			
		}
		
		$("#pointAjaxList").html(tag);
	}
	
	// 전체내역 조회
	$("#allPointList").click(function(){

 		$("#accumulatePointList").removeClass("active");
 		$("#usePointList").removeClass("active");
 		
 		$("#allPointList").addClass("active");
 		//$("#plusMinus").text("증감/차감");
 		
 		fnGetPointTableInfo(allPointList);
	});
	
	// 적립내역 조회
	$("#accumulatePointList").click(function(){

 		$("#allPointList").removeClass("active");
 		$("#usePointList").removeClass("active");
 		
 		$("#accumulatePointList").addClass("active");
 		//$("#plusMinus").text("증감");
		
 		fnGetPointTableInfo(accumulatePointList);
	});
	
	// 사용내역 조회
	$("#usePointList").click(function(){
		
		$("#accumulatePointList").removeClass("active");
		$("#allPointList").removeClass("active");
		
		$("#usePointList").addClass("active");
		//$("#plusMinus").text("차감");
		
		fnGetPointTableInfo(usePointList);
	});
	
	$(document).ready(function() {
		// 전체내역 표시
 		$("#allPointList").trigger("click");
		// 마이페이지 LNB 설정
		fnSetMypageLnbList(5);
		
		// 마이페이지 location 설정
		fnSetMypageLocation('STYLE24 포인트', '_PAGE_MYPAGE_POINT');

		// 셀렉트박스 활성화
		$('.select_custom').each(function(index) {
			var selecter01 = new sCombo($(this));
		});
		// 셀렉트박스 데이터 설정
		fnChangeDate();
		
	});

</script>
</th:block>

</body>
</html>
