<!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  : MypageCustDeliveryAddrFormMob.html
 * @desc    : 마이페이지 > 배송지관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.03   jsshin      최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<main class="container my">
	<section class="content my_delivery">
		<div class="inner">
			<div class="inner wide">
				<div id="custDeliveryList" class="delivery_list"></div>
				<div id="nodata" class="nodata" style="display: none;">
					<div class="txt_box">
						<p>
							등록된 배송지가 없습니다.<br/>
						</p>
					</div>
				</div>
				<!-- 
				<div class="inner wide">
					<div class="btn_group btn_group_flex">
						<button type="button" class="btn btn_dark" id="btnAdrsaddPop">
							<span>배송지 추가</span>
						</button>
					</div>
				</div>
				 -->
			</div>
		</div>
	</section>
</main>

<!-- 210813_ 위치 이동 및 추가 -->
<nav id="tabbar" class="tabbar fixed">
	<div class="tabbar-btn">
		<a href="#none" id="btnAdrsaddPop" class=""><p>배송지 추가</p></a>
	</div>
	<div class="tabbar-inner">
		<a href="javascript:menu;" class="btn-menu" data-popup-trigger="" data-target="#menu">Menu</a>
		<a href="javascript:myPage" class="btn-my">Mypage</a>
		<a href="javascript:home" class="btn-home">Home</a>
		<a href="javascript:wish" class="btn-wish">Wish</a>
		<a href="javascript:history" class="btn-history">History</a>
	</div>
</nav>

<script th:inline="javascript">
	/*<![CDATA[*/
	
	// 2021.08.11 배송지갯수체크 20개이하
	var deliveryAddrCnt = [[${deliveryAddrCnt}]];

	var fnCustDeliveryAddList = function () {
		$.get('/mypage/customer/delivery/addr/list', fnCustDeliveryAddListCallback);
	}

	var fnCustDeliveryAddListCallback = function (result) {
		let html = '';
		if (result.length < 1) {
			$('#nodata').show();
		} else {
			$('#nodata').hide();
			$.each(result, function (idx, custDeliveryAddr){
				if (custDeliveryAddr.defaultYn  === 'Y') {
					html += '<div class="ship_info active">\n';
				} else {
					html += '<div class="ship_info">\n';
				}
				html +=	'        <dl>\n';
				html +=	'            <div class="name">\n';
				html +=	'                <dt><span class="sr-only">배송지명</span></dt>\n';
				html +=	'                    <dd>\n';
				html +=	'                       '+custDeliveryAddr.recipNm +'\n';
				html +=	'                       <div class="badge_wrap">\n';
				if (custDeliveryAddr.defaultYn  === 'Y') {
					html += '                       <em class="order_badge">기본배송지</em>\n';
				}
				if (custDeliveryAddr.shotDelvUseYn  === 'Y') {
					html += '                       <em class="order_badge order_bullet_badge">총알배송</em>\n';
				}
				html +=	'                       </div>\n';
				html +=	'                    </dd>\n';
				html +=	'            </div>\n';
				html +=	'            <div class="phone">\n';
				html +=	'                <dt><span class="sr-only">휴대폰 번호</span></dt>\n';
				html +=	'                <dd>'+custDeliveryAddr.recipPhnno+'</dd>\n';
				html +=	'            </div>\n';
				html +=	'            <div class="addr">\n';
				html +=	'               <dt><span class="sr-only">배송주소</span></dt>\n';
				html +=	'               <dd>'+custDeliveryAddr.recipBaseAddr + custDeliveryAddr.recipDtlAddr +'</dd>\n';
				html +=	'            </div>\n';
				html +=	'            <div class="ship_request">\n';
				html +=	'                <dl>\n';
				html +=	'                    <dt>배송요청 사항</dt>\n';
				// 2021.08.24 null 처리
				if (custDeliveryAddr.delvMemo == null || custDeliveryAddr.delvMemo == '') {
					html +=	'                    <dd></dd>\n';
				} else {
					html +=	'                    <dd>'+custDeliveryAddr.delvMemo+'</dd>\n';
				}
				html +=	'                </dl>\n';
				html +=	'            </div>\n';
				html +=	'        </dl>\n';
				html +=	'        <div class="btn_group btn_group_flex">\n';
				html +=	'            <div>\n';
				html +=	'                <button type="button" class="btn btn_gost" onclick="fnModiFyCustDelvAddr(\''+custDeliveryAddr.custDelvAddrSq+'\')">\n';
				html +=	'                    <span>수정</span>\n';
				html +=	'                </button>\n';
				html +=	'            </div>\n';
				html +=	'            <div>\n';
				html +=	'                <button type="button" class="btn btn_dark" onclick="fnDeleteCustDelvAddr(\''+custDeliveryAddr.custDelvAddrSq+'\')">\n';
				html +=	'                   <span>삭제</span>\n';
				html +=	'                </button>\n';
				html +=	'            </div>\n';
				html +=	'        </div>\n';
				html +=	'   </div>\n';
			});
		}
		$('#custDeliveryList').html(html);
	}

	// 배송지 추가
	$('#btnAdrsaddPop').on('click', function () {
		// 2021.08.11 배송지갯수체크 20개이하
		$.ajax( {
			type		: "POST",
			url 		: '/common/addDelvAddrCnt',
			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 (parseInt(result) >= 20) {
					mcxDialog.alert("배송지는 최대 20개까지 등록 가능합니다.");
					return false;
				} else {
					$.ajax( {
						type		: "POST",
						url 		: '/common/delvAddrAddPop',
						dataType 	: 'html',
						beforeSend : function(xhr, settings) {
							xhr.setRequestHeader("AJAX"			, "true");
							xhr.setRequestHeader('Accept'		, 'application/json');
							xhr.setRequestHeader('Content-Type'	, 'application/json');
						},
						success 	: function(result) {
							$("#adrsAddPop .modal-dialog .modal-content").html(result);
							$("#adrsAddPop").modal("show");
						}
					});
				}
			}
		});
	});

	var delvAddrSet = function (delvObj) {
		if (!gagajf.isNull(delvObj.custDelvAddrSq)) {
			fnCustDeliveryAddList();
		}
	};

	var fnModiFyCustDelvAddr = function (custDelvAddrSq) {
		let params = {}
		params.custDelvAddrSq = custDelvAddrSq;

		$.ajax( {
			type		: "POST",
			url 		: '/common/delvAddrModifyPop',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				$("#adrsModifyPop .modal-dialog .modal-content").html(result);
				$("#adrsModifyPop").modal("show");
			}
		});
	};

	var fnDeleteCustDelvAddr = function (custDelvAddrSq) {
		mcxDialog.confirm("배송지를 삭제하시겠습니까?", {
		cancelBtnText : "취소",
		sureBtnText : "확인",
		sureBtnClick : function() {
				let params = {}
				params.custDelvAddrSq = custDelvAddrSq;
				let jsonData = JSON.stringify(params);
				gagajf.ajaxJsonSubmit("/mypage/customer/delivery/addr/delete", jsonData, function (result) {
					if (result.isSuccess) {
						fnCustDeliveryAddList();
					} else {
						mcxDialog.alert("배송지 삭제를 실패 하였습니다.");
						return;
					}
				});
			}
		});
	};


	$(document).ready(function() {
		$('footer').hide();
		$('#htopTitle').text('배송지 관리');
		
		// 배송목록 조회
		fnCustDeliveryAddList();

		// $(document).on("scroll",function(){
		// 	if($(".tabbar").hasClass("fixed")) {
		// 		$(".my .my_delivery .inner > .btn_group").addClass('active');
		// 	}else{
		// 		$(".my .my_delivery .inner > .btn_group").removeClass('active');
		// 	}
		// });
	});

	/*]]>*/
</script>
</th:block>
</body>
</html>