<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CustomerDetailForm.html
 * @desc    : 회원 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.18   jsshin     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1820" data-height="750" id="customerDetailForm">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>회원상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupCustomerDetail');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->

		<!-- CONTENT -->
		<div class="panelContent" >
			<table class="frmStyle" aria-describedby="회원정보">
				<colgroup>
					<col style="width:10%;"/>
					<col style="width:15%;"/>
					<col style="width:10%;"/>
					<col style="width:15%;"/>
					<col style="width:10%;"/>
					<col style="width:15%;"/>
				</colgroup>
				<tbody>
				<th>이름</th>
				<td>
					<span id="spanCustNm" name="spanCustNm"></span>
					<span id="managedRsnNm" name="managedRsnNm" class="infoTxt cRed h5"></span>
				</td>
				<th>아이디</th>
				<td>
					<span id="spanCustId" name="spanCustId"></span>
					<th:block th:if="${sessionInfo.userId == 'jsshin'}">
						<button type="button" id="btnLogin" class="btn btnRight btn-success btn-lg">Login</button>
					</th:block>
				</td>
				<th>가입사이트</th>
				<td>
					<span id="siteNm" name="siteNm"></span>
				</td>
				</tbody>
			</table>

			<!-- TABS SPACE -->
			<div class="tabs">
				<!-- TABS NAVI -->
				<div class="tabsNav">
					<ul>
						<li class="on"><a href="#tab1" onclick="fnSearchCustInfo();">기본정보</a></li>
						<li><a href="#tab2" onclick="fnSearchOrder();">주문내역</a></li>
						<li><a href="#tab3" onclick="fnCustSearchDelivery();">배송지정보</a></li>
						<li><a href="#tab4" onclick="fnSearchCoupon();">쿠폰내역</a></li>
						<li><a href="#tab5" onclick="fnSearchPoint();">포인트내역</a></li>
						<li><a href="#tab6" onclick="fnSearchGiftCard()">상품권내역</a></li>
						<li><a href="#tab7" onclick="fnSearchReview();">상품평내역</a></li>
						<li><a href="#tab8" onclick="fnSearchCounsel();">1:1문의내역</a></li>
						<li><a href="#tab9" onclick="fnSearchGoodsQna();">상품문의내역</a></li>
						<li><a href="#tab10" onclick="fnSearchContact();">회원접촉이력</a></li>
						<li><a href="#tab11" onclick="fnSearchChangeGrade();">회원등급변경이력</a></li>
					</ul>
				</div>
				<!-- //TABS NAVI -->

				<!-- TABS CONTENTS -->
				<ul class="tabsCont">
					<!-- TAB1 : 회원정보 -->
					<li class="tab on" id="tab1">
						<!-- TAB1 PANELSTYLE -->
						<div class="panelStyle">
							<form id="custInfoForm" name="custInfoForm" action="#" method="post">
								<input type="hidden" name="custNo" th:value="${custNo}"/>
								<h4>기본정보</h4>
								<table class="frmStyle">
									<colgroup>
										<col style="width:10%;"/>
										<col style="width:40%;"/>
										<col style="width:10%;"/>
										<col/>
									</colgroup>
									<tbody>
									<tr>
										<th class="dashR">회원구분<em class="required" title="필수"></em></th>
										<td class="dashR">
											<select id="custGb" name="custGb">
												<option th:if="${custGbList}" th:each="oneData, status : ${custGbList}" th:value="${oneData.cd}"
														th:text="${'[' + oneData.cd + '] '+oneData.cdNm}"></option>
											</select>
										</td>
										<th class="dashR">회원등급<em class="required" title="필수"></em></th>
										<td class="dashR">
											<select id="custGrade" name="custGrade">
												<option th:if="${custGradeList}" th:each="oneData, status : ${custGradeList}" th:value="${oneData.cd}"
														th:text="${'[' + oneData.cd + '] '+oneData.cdNm}"></option>
											</select>
										</td>
									</tr>
									<tr>
										<th class="dashR">관리대상</th>
										<td class="dashR">
											<select id="managedRsn" name="managedRsn">
												<option value="">일반</option>
												<option th:if="${managedRsnList}" th:each="oneData, status : ${managedRsnList}" th:value="${oneData.cd}"
														th:text="${'[' + oneData.cd + '] '+oneData.cdNm}"></option>
											</select>
											<span class="infoTxt cRed h5" id="managedRsnDp" name="managedRsnDp"></span>
										</td>
										<th class="dashR">관리대상 지정 날짜</th>
										<td class="dashR" id="managedDt" name="managedDt">
										</td>
									</tr>
									<tr>
										<th class="dashR">관리대상 지정 사유</th>
										<td class="dashR" colspan="3">
											<input type="text" id="managedDtlRsn" name="managedDtlRsn" class="w600" />
										</td>
									</tr>
									<tr>
										<th class="dashR">비밀번호</th>
										<td class="dashR">
											*******
											<button type="button" id="btnResetPassword" class="btn btn-info btn-lg">초기화</button>
											<span class="infoTxt cBlue">
												<i class="fa fa-info-circle"></i>회원에게 임시비밀번호를 발송합니다. (이메일, 알림톡)
											</span>
										</td>
										<th class="dashR">내외국인</th>
										<td class="dashR" id="foreignerYn" name="foreignerYn"></td>
									</tr>
									<tr>
										<th class="dashR">생년월일</th>
										<td class="dashR">
											<input type="text" id="birthYmd" name="birthYmd" class="schDate w100" data-valid-name="생년월일"/>
										</td>
										<th class="dashR">성별</th>
										<td class="dashR" id="sexGb" name="sexGb"></td>
									</tr>
									<tr>
										<th class="dashR">자택주소</th>
										<td class="dashR" colspan="3">
											<input type="text" id="homeZipcode" name="homeZipcode" class="w100" readonly="readonly"/>
											<button type="button" class="btn btn-info btn-lg" onclick="fnOpenDaumAddr('custInfoForm');">우편번호찾기</button>
											<br/>
											<input type="text" id="homeBaseAddr" name="homeBaseAddr" class="w300" readonly="readonly"/>
											<input type="text" id="homeDtlAddr" name="homeDtlAddr" class="w300"/>
										</td>
									</tr>
									<tr>
										<th class="dashR">휴대전화번호<em class="required" title="필수"></em></th>
										<td class="dashR">
											<input type="hidden" name="cellPhnno"/>
											<input type="text" name="maskingCellPhnno" class="w130" readonly="readonly"/>
											<button type="button" id="btnCustSendLms" class="btn btn-info btn-lg">LMS전송</button>
											<button type="button" id="btnCustCrtfd" class="btn btn-info btn-lg">번호변경</button>
										</td>
										<th class="dashR">SMS수신여부<em class="required" title="필수"></em></th>
										<td class="dashR">
											<label class="rdoBtn"><input type="radio" name="smsAgreeYn" value="Y"/>수신</label>
											<label class="rdoBtn"><input type="radio" name="smsAgreeYn" value="N"/>미수신</label>
										</td>
									</tr>
									<tr>
										<th class="dashR">이메일<em class="required" title="필수"></em></th>
										<td class="dashR">
											<input type="hidden" name="emailModifyYn"/>
											<input type="hidden" name="maskingEmail"/>
											<input type="hidden" name="orgEmail"/>
											<input type="hidden" name="email" data-valid-name="이메일"/>
											<input type="text" id="emailId" name="emailId" class="w200" maxlength="30"/>
											@
											<input type="text" id="emailDomain" name="emailDomain" class="w150" maxlength="20"/>
											<select id="emailDomainList" name="emailDomainList">
												<option value="">선택하세요</option>
												<option th:if="${emailDomainList}" th:each="oneData, status : ${emailDomainList}" th:value="${oneData.cd}"
														th:text="|${oneData.cdNm}|"></option>
											</select>
											<button type="button" id="btnCustSendEmail" class="btn btn-info btn-lg" >이메일발송</button>
										</td>
										<th class="dashR">EMAIL수신여부<em class="required" title="필수"></em></th>
										<td class="dashR">
											<label class="rdoBtn"><input type="radio" name="emailAgreeYn" value="Y"/>수신</label>
											<label class="rdoBtn"><input type="radio" name="emailAgreeYn" value="N"/>미수신</label>
										</td>
									</tr>
									<tr>
										<th class="dashR">가입일시</th>
										<td class="dashR" id="joinDt" name="joinDt"></td>
										<th class="dashR">APP수신여부<em class="required" title="필수"></em></th>
										<td class="dashR">
											<label class="rdoBtn"><input type="radio" name="appAgreeYn" value="Y"/>수신</label>
											<label class="rdoBtn"><input type="radio" name="appAgreeYn" value="N"/>미수신</label>
										</td>
									</tr>
									<tr>
										<th class="dashR">최종로그인일시</th>
										<td class="dashR" id="loginLdt" name="loginLdt"></td>
										<th class="dashR">마케팅수신여부<em class="required" title="필수"></em></th>
										<td class="dashR">
											<label class="rdoBtn"><input type="radio" name="mkAgreeYn" value="Y"/>수신</label>
											<label class="rdoBtn"><input type="radio" name="mkAgreeYn" value="N"/>미수신</label>
										</td>
									</tr>
									<tr>
										<th class="dashR">SNS가입유형</th>
										<td class="dashR" id="snsType" name="snsType"></td>
										<th class="dashR">탈퇴여부</th>
										<td class="dashR">
											<spna id="secedeRsnYn" name="secedeRsnYn" ></spna>
											<button type="button" id="btnCustSecede" class="btn btn-danger btn-lg marL5" style="display: none">
												회원탈퇴
											</button>
										</td>
									</tr>
									</tbody>
								</table>
								<ul class="panelBar">
									<li class="right">
										<button type="button" id="btnCustInfoSave" class="btn btn-success btn-lg">저장</button>
									</li>
								</ul>
							</form>
						</div>
						<!-- //TAB1 PANELSTYLE -->
					</li>
					<!-- //TAB1 : 회원정보 -->

					<!-- TAB2 : 주문내역 -->
					<li id="tab2" class="tab">
						<!-- TAB2 PANELSTYLE -->
						<div class="panelStyle">
							<form id="custOrderListFrom" name="custOrderListFrom" action="#" th:action="@{'/customer/order/list'}" method="post">
							<input type="hidden" name="custNo" th:value="${custNo}"/>
								<h4>주문내역</h4>
								<ul class="panelBar">
									<li class="right">
										검색결과 : <strong><span id="gridOrderRowTotalCount">0</span> 건</strong>&nbsp;
										쪽번호 <span id="ordPgNo">0</span>/ <strong id="ordEndPgNo">0</strong>&nbsp;&nbsp;
										<select name="pageSize">
											<option value="50" selected="selected">50개씩 보기</option>
											<option value="100">100개씩 보기</option>
											<option value="500">500개씩 보기</option>
											<option value="1000">1000개씩 보기</option>
										</select>
										<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
									</li>
								</ul>
								<div id="custOrderList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
								<ul class="panelBar">
									<li class="center">
										<div class="tablePaging" id="custOrderListPagination"></div>
									</li>
								</ul>
							</form>
						</div>
						<!-- //TAB2 PANELSTYLE -->
					</li>
					<!-- //TAB2 : 주문내역 -->

					<!-- TAB3 : 배송지정보 -->
					<li id="tab3" class="tab">
						<!-- TAB3 PANELSTYLE -->
						<div class="panelStyle">
							<form id="custAddrForm" name="custAddrForm" action="#" method="post">
								<input type="hidden" name="custDelvAddrSq"/>
								<input type="hidden" name="custNo" th:value="${custNo}"/>
								<h4>배송지정보</h4>
								<div id="custAddrList" class="ag-theme-balham" style="width: 100%; height: 300px;" ></div>
								<table class="frmStyle">
									<colgroup>
										<col style="width:5%;"/>
										<col style="width:25%;"/>
										<col style="width:5%;"/>
										<col style="width:25%;"/>
										<col style="width:5%;"/>
										<col style="width:25%;"/>
										<col/>
									</colgroup>
									<tbody>
									<tr>
										<th>배송지명<em class="required" title="필수"></em></th>
										<td>
											<input type="text" class="w200" name="delvAddrNm" maxlength="30" required="required" data-valid-name="배송지명"/>
											<label class="chkBox">
												<input type="checkbox" name="defaultYn" value="Y"/>기본
											</label>
										</td>
										<th>수령인<em class="required" title="필수"></em></th>
										<td>
											<input type="text" class="w200" name="recipNm" maxlength="10" required="required" data-valid-name="수령인"/>
										</td>
										<th>삭제여부</th>
										<td>
											<label class="chkBox">
												<input type="checkbox" name="delYn" value="Y"/>
											</label>
										</td>
									</tr>
									<tr>
										<th>전화번호</th>
										<td >
											<input type="hidden" id="recipTelno" name="recipTelno"/>
											<select class="w100" id="telFirstNo" name="telFirstNo">
												<option value="">선택</option>
												<option th:if="${nationalNumberList}" th:each="oneData, status : ${nationalNumberList}"
														th:value="${oneData.cd}" th:text="|${oneData.cd}|"></option>
											</select> -
											<input type="text" class="w100" name="telMiddleNo" maxlength="4" data-valid-type="numeric"
												   data-valid-name="전화번호"/> -
											<input type="text" class="w100" name="telLastNo" maxlength="4" data-valid-type="numeric"
												   data-valid-name="전화번호"/>
										</td>
										<th>휴대전화번호<em class="required" title="필수"></em></th>
										<td colspan="4">
											<input type="hidden" id="recipPhnno" name="recipPhnno"/>
											<select class="w100" id="recipFirstNo" name="recipFirstNo">
												<option value="">선택</option>
												<option th:if="${nationalHpNumberList}" th:each="oneData, status : ${nationalHpNumberList}"
														th:value="${oneData.cd}" th:text="|${oneData.cd}|"></option>
											</select> -
											<input type="text" class="w100" id="recipMiddleNo" name="recipMiddleNo" maxlength="4" required="required" data-valid-type="numeric"
												   data-valid-name="휴대전화번호"/> -
											<input type="text" class="w100" id="recipLastNo" name="recipLastNo" maxlength="4" required="required" data-valid-type="numeric"
												   data-valid-name="휴대전화번호"/>
										</td>
									</tr>
									<tr>
										<th>주소<em class="required" title="필수"></em></th>
										<td colspan="5">
											<input type="text" id="recipZipcode" name="recipZipcode" class="w100" maxlength="10" required="required" data-valid-name="주소"/>
											<button type="button" class="btn btn-info btn-lg" onclick="fnOpenDaumAddr('custAddrForm');">우편번호찾기</button>
											<br/>
											<input type="text" id="recipBaseAddr" name="recipBaseAddr" class="w300" maxlength="50" required="required" data-valid-name="주소"/>
											<input type="text" id="recipDtlAddr" name="recipDtlAddr" class="w300" maxlength="30" required="required" data-valid-name="상세주소"/>
										</td>
									</tr>
									</tbody>
								</table>
								<ul class="panelBar">
									<li class="right">
										<button type="button" class="btn btn-info btn-lg" id="btnCustAddrNew">신규</button>
										<button type="button" class="btn btn-success btn-lg" id="btnCustAddrSave">저장</button>
									</li>
								</ul>
							</form>
						</div>
						<!-- //TAB3 PANELSTYLE -->
					</li>
					<!-- //TAB3 : 배송지정보 -->

					<!-- TAB4 : 쿠폰 내역 -->
					<li id="tab4" class="tab">
						<!-- TAB4 PANELSTYLE -->
						<div class="panelStyle">
							<h4>쿠폰 내역</h4>
							<div id="custCouponList" class="ag-theme-balham" style="width: 100%; height: 510px;" ></div>
							<ul class="panelBar">
								<li class="right">
									<button type="button" id="btnCustCouponCreate" class="btn btn-info btn-lg" >쿠폰발급</button>
								</li>
							</ul>
						</div>
						<!-- //TAB4 PANELSTYLE -->
					</li>
					<!-- //TAB4 : 쿠폰 내역 -->

					<!-- TAB5 : 포인트 내역 -->
					<li id="tab5" class="tab">
						<!-- TAB5 PANELSTYLE -->
						<div class="panelStyle">
							<form id="custPointForm" name="custPointForm" action="#" method="post">
							<h4>포인트 내역</h4>
							<table class="tableStyle">
								<colgroup>
									<col style="width:15%;"/>
									<col style="width:15%;"/>
									<col style="width:15%;"/>
									<col style="width:20%;"/>
									<col style="width:20%;"/>
									<col style="width:25%;"/>
								</colgroup>
								<tbody>
								<tr>
									<th>가용포인트</th>
									<th>누적포인트</th>
									<th>사용포인트</th>
									<th>소멸포인트</th>
									<th>적립예정포인트</th>
									<th>소멸예정포인트(30일)</th>
								</tr>
								<tr>
									<td name="availPntAmt">0 P</td>
									<td name="accumPntAmt">0 P</td>
									<td name="usePntAmt">0 P</td>
									<td name="expirePntAmt">0 P</td>
									<td name="expectedPntAmt">0 P</td>
									<td name="expectedExpirePntAmt">0 P</td>
								</tr>
								</tbody>
							</table>
							<br/>
							<div id="custPointList" class="ag-theme-balham" style="width: 100%; height: 420px;"></div>
							<ul class="panelBar">
								<li class="right">
									<button type="button" id="btnCustPointCreate" class="btn btn-info btn-lg">포인트부여</button>
								</li>
							</ul>
							</form>
						</div>
						<!-- //TAB5 PANELSTYLE -->
					</li>
					<!-- //TAB5 : 포인트 내역 -->

					<!-- TAB6 : 상품권 내역 -->
					<li id="tab6" class="tab">
						<!-- TAB6 PANELSTYLE -->
						<div class="panelStyle">
							<h4>상품권 내역</h4>
							<div id="custGiftCardList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
						</div>
						<!-- //TAB6 PANELSTYLE -->
					</li>
					<!-- //TAB6 : 상품권 내역 -->

					<!-- TAB7 : 상품평 -->
					<li id="tab7" class="tab">
						<!-- TAB7 PANELSTYLE -->
						<div class="panelStyle">
							<h4>상품평 내역</h4>
							<div id="custReviewList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
						</div>
						<!-- //TAB7 PANELSTYLE -->
					</li>
					<!-- //TAB7 : 상품평 내역 -->

					<!-- TAB8 : 1:1문의 내역 -->
					<li id="tab8" class="tab">
						<!-- TAB8 PANELSTYLE -->
						<div class="panelStyle">
							<h4>1:1문의 내역</h4>
							<div id="custCounselList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
						</div>
						<!-- //TAB8 PANELSTYLE -->
					</li>
					<!-- //TAB8 : 1:1문의 내역 -->

					<!-- TAB9 : 상품문의 내역 -->
					<li id="tab9" class="tab">
						<!-- TAB9 PANELSTYLE -->
						<div class="panelStyle">
							<h4>상품문의 내역</h4>
							<div id="custGoodsQnaList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
						</div>
						<!-- //TAB9 PANELSTYLE -->
					</li>
					<!-- //TAB9 : 상품문의 내역 -->

					<!-- TAB10 : 회원접촉이력 -->
					<li id="tab10" class="tab">
						<!-- TAB10 PANELSTYLE -->
						<div class="panelStyle">
							<form id="custContactHstForm" name="custContactHstForm" action="#" method="post">
							<input type="hidden" name="custNo" th:value="${custNo}"/>
							<h4>회원접촉이력</h4>
							<table class="frmStyle">
								<colgroup>
									<col style="width:3%;"/>
									<col style="width:7%;"/>
									<col style="width:6%;"/>
									<col style="width:5%;"/>
									<col style="width:6%;"/>
									<col style="width:29%;"/>
									<col/>
								</colgroup>
								<tbody>
								<tr>
									<th>접촉유형<em class="required" title="필수"></em></th>
									<td>
										<select name="contactType" class="w150" required="required" data-valid-type="select" data-valid-name="접촉유형">
											<option value="">[선택]</option>
											<option th:if="${contactTypeList}" th:each="oneData, status : ${contactTypeList}" th:value="${oneData.cd}"
													th:text="${'[' + oneData.cd + '] '+oneData.cdNm}"></option>
										</select>
									</td>
									<th>접촉방법<em class="required" title="필수"></em></th>
									<td>
										<select name="contactMethod" class="w150" required="required" data-valid-type="select" data-valid-name="접촉방법">
											<option value="">[선택]</option>
											<option th:if="${contactMethodList}" th:each="oneData, status : ${contactMethodList}" th:value="${oneData.cd}"
													th:text="${'[' + oneData.cd + '] '+oneData.cdNm}"></option>
										</select>
									</td>
									<th>내용<em class="required" title="필수"></em></th>
									<td>
										<textarea class="textareaR2 w600" name="contactContents" required="required" data-valid-name="내용"></textarea>
										<button type="button" id="btnSaveContact" class="btn btn-success btn-lg">저장</button>
									</td>
								</tr>
								</tbody>
							</table>
							<br/>
							<div id="custContactList" class="ag-theme-balham" style="width: 100%; height: 420px;"></div>
							</form>
						</div>
						<!-- //TAB10 PANELSTYLE -->
					</li>
					<!-- //TAB10 : 회원접촉이력 -->

					<!-- TAB11 : 등급변경이력 -->
					<li id="tab11" class="tab">
						<!-- TAB11 PANELSTYLE -->
						<div class="panelStyle">
							<h4>등급변경이력</h4>
							<div id="custGradeList" class="ag-theme-balham" style="width: 100%; height: 510px;"></div>
						</div>
						<!-- //TAB11 PANELSTYLE -->
					</li>
					<!-- //TAB11 : 등급변경이력 -->

				</ul>
				<!-- //TABS CONTENTS -->
			</div>
			<!-- // TABS SPACE -->

		</div>
		<!-- //CONTENT -->

	</div>
</div>

<script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.paging.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/

	const custNo = [[${custNo}]];													//고객번호
	const siteList = gagajf.convertToArray([[${siteList}]]);						//사이트목록
	//const custGbList = gagajf.convertToArray([[${custGbList}]]);					//회원구분
	const custGradeList = gagajf.convertToArray([[${custGradeList}]]);				//회원등급
	//const managedRsnList = gagajf.convertToArray([[${managedRsnList}]]);			//관리대상
	const mallGbList = gagajf.convertToArray([[${mallGbList}]]);					//몰구분
	const orderStatList = gagajf.convertToArray([[${orderStatList}]]);				//주문상태
	const orderDtlStatList = gagajf.convertToArray([[${orderDtlStatList}]]);		//주문상세상태
	const cpnType = gagajf.convertToArray([[${cpnType}]]);							//쿠폰유형
	//const dcWayList = gagajf.convertToArray([[${dcWayList}]]);					//쿠폰할인방식
	const pubReasonList = gagajf.convertToArray([[${pubReasonList}]]);				//쿠폰발행사유
	const pntOccurGbList = gagajf.convertToArray([[${pntOccurGbList}]]);			//포인트반영구분
	const pntUploadStatList = gagajf.convertToArray([[${pntUploadStatList}]]);		//포인트반영상태
	const reviewPntStatList = gagajf.convertToArray([[${reviewPntStatList}]]);		//상품평포인트반영상태
	const giftCardOccurGbList = gagajf.convertToArray([[${giftCardOccurGbList}]]);	//상품권유형
	const counselClsfList = gagajf.convertToArray([[${counselClsfList}]]);			//상담분류
	const contactTypeList = gagajf.convertToArray([[${contactTypeList}]]);			//회원접촉유형
	const contactMethodList = gagajf.convertToArray([[${contactMethodList}]]);		//회원접촉방법
	const genderGbList = gagajf.convertToArray([[${genderGbList}]]);				//성별
	let orgData;

	//구매내역 그리드
	const columnOrderDefs = [
		{
			headerName: "주문번호", field: "ordNo", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{headerName: "주문상세번호", field: "ordDtlNo", width: 100, cellClass: 'text-center'},
		{
			headerName: "몰구분", field: "mallGb", width: 100, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(mallGbList, params.value);
			}
		},
		{
			headerName: "결제일시", field: "payDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "배송완료일시", field: "delvEddt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "주문자전화번호", field: "ordTelno", width: 120, cellClass: 'text-center'},
		{headerName: "주문자휴대폰", field: "ordPhnno", width: 130, cellClass: 'text-center'},
		{
			headerName: "주문상세상태", field: "ordDtlStat", width: 130, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(orderDtlStatList, params.value);
			}
		},
		{headerName: "수령인", field: "recipNm", width: 100, cellClass: 'text-center'},
		{
			headerName: "상품코드", field: "goodsCd", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{headerName: "색상", field: "optCd1", width: 100, cellClass: 'text-center'},
		{headerName: "사이즈", field: "optCd2", width: 100, cellClass: 'text-center'},
		{headerName: "상품명", field: "goodsNm", width: 250, cellClass: 'text-left'},
		{headerName: "주문수량", field: "ordQty", width: 100, cellClass: 'text-center'},
		{headerName: "판매상품가격", field: "currPrice", width: 100, cellClass: 'text-center'},
	];

	// 1:1문의 내역 그리드
	const columnCounselDefs = [
		{
			headerName: "상담분류", field: "counselClsf", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(counselClsfList, params.value);
			}
		},
		{headerName: "상담상세분류", field: "counselDclsf", width: 200, cellClass: 'text-center'},
		{headerName: "주문번호", field: "relOrdNo", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagajf.isNull(params.value)? '' : '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{
			headerName: "질문제목", field: "questTitle", width: 300, cellClass: 'text-center',
			cellRenderer: function (params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{
			headerName: "등록일시", field: "questDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "답변일시", field: "ansDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "확인자", field: "ansNm", width: 100, cellClass: 'text-center'}
	];

	// 상품문의 내역 그리드
	const columnGoodsQnaDefs = [
		{headerName: "상품코드", field: "relGoodsCd", width: 200, cellClass: 'text-center'},
		{
			headerName: "질문제목", field: "questTitle", width: 300, cellClass: 'text-center',
			cellRenderer: function (params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{
			headerName: "등록일시", field: "questDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "답변일시", field: "ansTransDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "확인자", field: "ansNm", width: 100, cellClass: 'text-center'}
	];

	//쿠폰내역 그리드
	const columnCouponDefs = [
		// {width: 40, minWidth: 40, cellClass: 'text-center', pinned: 'left', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: "회원쿠폰SQ", field: "custCpnSq", width: 100, cellClass: 'text-center', hide: true},
		{headerName: "쿠폰ID", field: "cpnId", width: 100, cellClass: 'text-center'},
		{headerName: "쿠폰명", field: "cpnNm", width: 300, cellClass: 'text-center'
			, cellRenderer: function (params) {
				return "<a href=\"javascript:void(0);\" onclick=\"cfnCouponCreatePopup('U','" + params.data.cpnId + "');\">" + params.value + "</a>";
			}
		},
		{
			headerName: "유효기간 시작일시", field: "availStdt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "유효기간 종료일시", field: "availEddt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "주문번호", field: "ordNo", width: 130, cellClass: 'text-center'},
		{
			headerName: "사용일시", field: "usedDt", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "쿠폰발행 사유", field: "pubReason", width: 200, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(pubReasonList, params.value);
			}
		},
		{headerName: "쿠폰발행 상세사유", field: "pubReasonDtl", width: 300, cellClass: 'text-center'},
		{headerName: "만료알림발송여부", field: "endAlimSendYn", width: 150, cellClass: 'text-center'},
		{headerName: "등록자", field: "regNm", width: 100, cellClass: 'text-center'},
		{
			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		}
	];

	//포인트내역 그리드
	const columnPointDefs = [
		{
			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "반영일시", field: "pntUploadDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "주문번호", field: "ordNo", width: 100, cellClass: 'text-center'},
		{
			headerName: "반영상태", field: "pntUploadStat", width: 100, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(pntUploadStatList, params.value); }
		},
		{
			headerName: "포인트", field: "pntAmt", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? params.value.addComma() : '0';
			}
		},
		{
			headerName: "포인트사유", field: "occurGb", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(pntOccurGbList, params.value);
			}
		},
		{headerName: "포인트상세사유", field: "occurDtlDesc", width: 300, cellClass: 'text-center'},
		{
			headerName: "만료예정일시", field: "expBeDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return params.data.pntAmt > 0 ? gagaAgGrid.toDateTimeFormat(params.value) : gagaAgGrid.toDateTimeFormat(params.data.pntUploadDt);
			}
		},
		{
			headerName: "만료완료일시", field: "expCmpDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "등록자", field: "regNm", width: 100, cellClass: 'text-center'}
	];

	//상품권내역 그리드
	const columnGiftCardDefs = [
		{
			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "주문번호", field: "ordNo", width: 100, cellClass: 'text-center'},
		{
			headerName: "금액", field: "gfcdAmt", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? params.value.addComma() : '0';
			}
		},
		{
			headerName: "발생구분", field: "occurGb", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(giftCardOccurGbList, params.value); }
		},
		{
			headerName: "발생상세설명", field: "occurDtlDesc", width: 300, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(pntOccurGbList, params.value);
			}
		},
		{headerName: "등록자", field: "regNm", width: 100, cellClass: 'text-center'}
	];

	//상품평 그리드
	const columnReviewDefs = [
		{headerName: "상품코드", field: "goodsCd", width: 100, cellClass: 'text-center'},
		{
			headerName: "내용", field: "reviewContent", width: 300, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? '<a href="javascript:void(0);">' + params.value + '</a>' : '';
			}
		},
		{headerName: "만족도", field: "score", width: 100, cellClass: 'text-center'},
		{
			headerName: "작성일시", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{
			headerName: "지급일시", field: "confirmDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "지급자", field: "confirmUnm", width: 130, cellClass: 'text-center'},
		{headerName: "게시여부", field: "dispYn", width: 100, cellClass: 'text-center'},
		{
			headerName: "지급예정포인트", field: "giveDuePnt", width: 120, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? params.value.addComma() : '0';
			}
		},
		{
			headerName: "포인트지급상태", field: "pntGiveStat", width: 120, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(reviewPntStatList, params.value);
			}
		}
	];

	//등급변경 그리드
	const columnGradeDefs = [
		{headerName: "적용연월일", field: "applyYmd", width: 150, cellClass: 'text-center'},
		{headerName: "고객ID", field: "custId", width: 100, cellClass: 'text-center'},
		{
			headerName: "이전회원등급", field: "gradeBcd", width: 100, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(custGradeList, params.value);
			}
		},
		{
			headerName: "변경회원등급", field: "gradeAcd", width: 100, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(custGradeList, params.value);
			}
		},
		{
			headerName: "3개월간 총 주문건수", field: "ordCnt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? params.value.addComma() : '0';
			}
		},
		{
			headerName: "3개월간 총 결제금액", field: "realOrdAmt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return !gagajf.isNull(params.value) ? params.value.addComma() : '0';
			}
		}
	];

	//주소정보 그리드
	const columnAddrDefs = [
		{
			headerName: "배송지명", field: "delvAddrNm", width: 100, cellClass: 'text-center',
			cellRenderer: function (params) {
				return '<a href="javascript:void(0);">' + params.value + '</a>';
			}
		},
		{headerName: "수령자", field: "recipNm", width: 100, cellClass: 'text-center'},
		{headerName: "전화번호", field: "recipTelno", width: 130, cellClass: 'text-center'},
		{headerName: "휴대전화번호", field: "recipPhnno", width: 130, cellClass: 'text-center'},
		{headerName: "우편번호", field: "recipZipcode", width: 100, cellClass: 'text-center'},
		{headerName: "기본주소", field: "recipBaseAddr", width: 300, cellClass: 'text-left'},
		{headerName: "상세주소", field: "recipDtlAddr", width: 150, cellClass: 'text-left'},
		{headerName: "총알배송", field: "shotDelvUseYn", width: 90, cellClass: 'text-center'},
		{
			headerName: "등록일시", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "수정자", field: "regNm", width: 100, cellClass: 'text-center'},
		{
			headerName: "수정일시", field: "updDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		},
		{headerName: "기본배송지", field: "defaultYn", width: 90, cellClass: 'text-center'}
	];

	//회원접촉이력 그리드
	const columnContactDefs = [
		{
			headerName: "접촉유형", field: "contactType", width: 180, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(contactTypeList, params.value);
			}
		},
		{
			headerName: "접촉방법", field: "contactMethod", width: 120, cellClass: 'text-center',
			valueFormatter: function (params) {
				return gagaAgGrid.lookupValue(contactMethodList, params.value);
			}
		},
		{headerName: "내용", field: "contactContents", width: 1000, cellClass: 'text-center'},
		{headerName: "등록자", field: "regNm", width: 100, cellClass: 'text-center'},
		{
			headerName: "등록일", field: "regDt", width: 150, cellClass: 'text-center',
			cellRenderer: function (params) {
				return gagaAgGrid.toDateTimeFormat(params.value);
			}
		}
	];

	let gridOrderOptions = gagaAgGrid.getGridOptions(columnOrderDefs);		//구매내역 그리드
	let gridCounselOptions = gagaAgGrid.getGridOptions(columnCounselDefs);	//1:1문의내역 그리드
	let gridGoodsQnaOptions = gagaAgGrid.getGridOptions(columnGoodsQnaDefs);//상품문의내역 그리드
	let gridCouponOptions = gagaAgGrid.getGridOptions(columnCouponDefs);	//쿠폰내역 그리드
	let gridPointOptions = gagaAgGrid.getGridOptions(columnPointDefs);		//포인트내역 그리드
	let gridGiftCardOptions = gagaAgGrid.getGridOptions(columnGiftCardDefs);//상품권내역 그리드
	let gridReviewOptions = gagaAgGrid.getGridOptions(columnReviewDefs);	//상품평 그리드
	let gridGradeOptions = gagaAgGrid.getGridOptions(columnGradeDefs);		//등급변경 그리드
	let gridAddrOptions = gagaAgGrid.getGridOptions(columnAddrDefs);		//주소정보 그리드
	let gridContactOptions = gagaAgGrid.getGridOptions(columnContactDefs);	//회원접촉이력 그리드

	gridOrderOptions.suppressRowClickSelection = true;
	gridCounselOptions.suppressRowClickSelection = true;
	gridGoodsQnaOptions.suppressRowClickSelection = true;
	gridCouponOptions.suppressRowClickSelection = true;
	gridPointOptions.suppressRowClickSelection = true;
	gridGiftCardOptions.suppressRowClickSelection = true;
	gridReviewOptions.suppressRowClickSelection = true;
	gridGradeOptions.suppressRowClickSelection = true;
	gridAddrOptions.suppressRowClickSelection = true;
	gridContactOptions.suppressRowClickSelection = true;

	// 기본정보 - 비밀번호 초기화 버튼
	$('#btnResetPassword').on('click', function () {
		mcxDialog.confirm("초기화 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				let orgEamil = $('#custInfoForm input[name=orgEmail]').val();
				$('#custInfoForm input[name=email]').val(orgEamil);
				let jsonData = JSON.stringify($('#custInfoForm').serializeObject());
				gagajf.ajaxJsonSubmit('/customer/password/reset', jsonData, fnSearchCustInfo);
			}
		});

	});

	// 기본정보 - LMS발송 버튼
	$('#btnCustSendLms').on('click', function () {

		if (!fnCheckValidationPhnno('#custInfoForm')) {
			return false;
		}

		let param = {};
		param.elementCellPhnno = '#custInfoForm input[name=cellPhnno]';
		param.elementCustNo = '#custInfoForm input[name=custNo]';
		param.elementMaskingCellPhnno = '#custInfoForm input[name=maskingCellPhnno]';

		cfnOpenLmsPopup(param);
	});

	// 기본정보 -  번호변경
	$('#btnCustCrtfd').on('click', function () {
		if (!fnCheckValidationPhnno('#custInfoForm')) {
			return false;
		}
		let elementCellPhnno = '#custInfoForm input[name=cellPhnno]';
		let elementCustNo = '#custInfoForm input[name=custNo]';

		const actionUrl = '/customer/cellphone/change/popup/form?elementCellPhnno=' + encodeURIComponent(elementCellPhnno)
						+ '&elementCustNo=' + encodeURIComponent(elementCustNo);

		cfnOpenModalPopup(actionUrl, 'popupCellphoneForm');
	});

	// 기본정보 - 이메일발송 버튼
	$('#btnCustSendEmail').on('click', function () {

		let param = {};
		param.elementEmail = '#custInfoForm input[name=orgEmail]';
		param.elementCustNo ='#custInfoForm input[name=custNo]';
		param.elementMaskingEmail = '#custInfoForm input[name=maskingEmail]';

		cfnOpenEmailPopup(param);
	});

	// 기본정보 - 이메일 도메인 선택 이벤트
	$('#emailDomainList').on('change', function () {
		let domain = $(this).val();
		let $emailDomain = $('#emailDomain');

		if (domain === '99') {  //기타(직접입력)
			$emailDomain.val('');
		} else if (domain !== '99' && !gagajf.isNull(domain)) {
			$emailDomain.val(domain);
		}

	});

	// 기본정보 - 탈퇴버튼
	$('#btnCustSecede').on('click', function () {
		let custNo = $('#custInfoForm input[name=custNo]').val();
		if (gagajf.isNull(custNo)) {
			mcxDialog.alert("탈퇴시킬 회원번호가 없습니다.");
			return;
		}

		let elementCustNo ='#custInfoForm input[name=custNo]';

		const actionUrl = '/customer/secede/popup/form?elementCustNo='+ encodeURIComponent(elementCustNo)

		cfnOpenModalPopup(actionUrl, 'popupCustSecedeForm');
	});


	// 기본정보 - 저장버튼
	$('#btnCustInfoSave').on('click', function () {

		//휴대폰번호
		if (!fnCheckValidationPhnno('#custInfoForm'))
			return false;

		//이메일
		if (!fnCheckValidationEmail('#custInfoForm'))
			return false;

		let customer = $('#custInfoForm').serializeObject();

		if (!gagajf.isNull(customer.managedRsn) && gagajf.isNull(customer.managedDtlRsn)) {
			mcxDialog.alert("관리대상 지정 사유를 입력해주세요");
			return;
		}

		// 마케팅 수신여부가 기존하고 바꼈는지 확인
		// 데이터 변경 없으면 공배처리
		if (customer.emailAgreeYn === orgData.emailAgreeYn) {
			delete customer.emailAgreeYn;
		}

		// 데이터 변경 없으면 공배처리
		if (customer.smsAgreeYn === orgData.smsAgreeYn) {
			delete customer.smsAgreeYn;
		}

		customer.birthYmd = customer.birthYmd.replaceAll('-', '');

		let jsonData = JSON.stringify(customer);
		//console.log(jsonData);
		mcxDialog.confirm("기본정보를 수정 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				gagajf.ajaxJsonSubmit('/customer/info/save', jsonData , function () {
					uifnPopupClose('customerDetailForm');
					$('#btnSearch').trigger('click');
				});
			}
		});

	});

	// 배송지정보 - 신규버튼
	$('#btnCustAddrNew').on('click', function () {
		$('#custAddrForm')[0].reset();
		$('#custAddrForm input[name=custDelvAddrSq]').val('');
		$('#custAddrForm input[name=recipPhnno]').val('');
		$('#custAddrForm input[name=recipTelno]').val('');
		fnDisplayDeliveryCheckBox('N', 'N');
	});

	// 배송지정보 - 저장버튼
	$('#btnCustAddrSave').on('click', function () {
		if (!gagajf.validation('#custAddrForm'))
			return false;

		// 전화번호
		let telFirstNo = $('#custAddrForm select[name=telFirstNo]').val();
		let telMiddleNo = $('#custAddrForm input[name=telMiddleNo]').val();
		let telLastNo = $('#custAddrForm input[name=telLastNo]').val();
		if (!gagajf.isNull(telFirstNo) && !gagajf.isNull(telMiddleNo) && !gagajf.isNull(telLastNo)) {
			$('#custAddrForm input[name=recipTelno]').val(telFirstNo + '-' + telMiddleNo + '-' + telLastNo);
		}

		// 핸드폰번호 필수값 validation 함수에서 null 체크
		let recipFirstNo = $('#custAddrForm select[name=recipFirstNo]').val();
		let recipMiddleNo = $('#custAddrForm input[name=recipMiddleNo]').val();
		let recipLastNo = $('#custAddrForm input[name=recipLastNo]').val();
		$('#custAddrForm input[name=recipPhnno]').val(recipFirstNo + '-' + recipMiddleNo + '-' + recipLastNo);

		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				gagajf.removeCommaAtNumberFormattedInput('#custAddrForm');
				let jsonData = JSON.stringify($('#custAddrForm').serializeObject());
				gagajf.ajaxJsonSubmit('/customer/delivery/addr/save', jsonData, fnCustSearchDelivery);
			}
		});

	});

	// 쿠폰삭제 버튼
	$('#btnCustCouponDelete').on('click', function () {
		let removedData = gagaAgGrid.removeRowData(gridCouponOptions);

		if (removedData.length < 1) {
			mcxDialog.alert("선택된 데이터가 없습니다.");
			return;
		}
		mcxDialog.confirm("삭제 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				let updatedData = [];

				$.each(removedData, function (idx, item) {
					let param = {};
					param.custCpnSq = item.custCpnSq;
					param.custNo = item.custNo;
					updatedData.push(param);
				});

				let jsonData = JSON.stringify(updatedData);
				gagajf.ajaxJsonSubmit('/marketing/coupon/cust/delete', jsonData, fnSearchCoupon);
			}
		});
	});

	// 포인트부여 버튼
	$('#btnCustPointCreate').on('click', function () {
		let elementCustNo ='#custInfoForm input[name=custNo]';
		const actionUrl = '/marketing/point/grant/popup/form?elementCustNo=' + encodeURIComponent(elementCustNo);

		cfnOpenModalPopup(actionUrl, 'popupPointGrantForm');
	});

	// 쿠폰발급 버튼
	$('#btnCustCouponCreate').on('click', function () {
		let elementCustNo ='#custInfoForm input[name=custNo]';
		const actionUrl = '/marketing/coupon/issue/popup/form?elementCustNo=' + encodeURIComponent(elementCustNo);
		cfnOpenModalPopup(actionUrl, 'popupCouponIssue');
	});


	// 회원접촉이력 저장
	$('#btnSaveContact').on('click', function () {
		if (!gagajf.validation('#custContactHstForm')) {
			return;
		}
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				var jsonData = JSON.stringify($('#custContactHstForm').serializeObject());
				gagajf.ajaxJsonSubmit('/customer/contact/create', jsonData, fnSearchContact);
			}
		});
	});

	// 주문내역 셀 클릭 이벤트
	gridOrderOptions.onCellClicked = function (event) {
		if (event.colDef.field === 'goodsCd') {
			let goodsCd = event.data.goodsCd;
			cfnOpenGoodsDetailPopup('U', goodsCd);
		}
		if (event.colDef.field === 'ordNo') {
			let ordNo = event.data.ordNo;
			cfnOpenOrderDetailPopup(ordNo);
		}
	};

	// 상품평내역 셀 클릭 이벤트
	gridReviewOptions.onCellClicked = function (event) {
		if (event.colDef.field === 'reviewContent') {
			let reviewSq = event.data.reviewSq;
			cfnOpenReviewDetailPopup(reviewSq);
		}
	};

	// 1:1문의 내역 셀 클릭 이벤트
	gridCounselOptions.onCellClicked = function (event) {
		if (event.colDef.field === 'questTitle') {
			let counselSq = event.data.counselSq;
			cfnOpenOneToOneQnaDetailPopup(counselSq);
		}
		if (event.colDef.field === 'relOrdNo') {
			let ordNo = event.data.relOrdNo;
			cfnOpenOrderDetailPopup(ordNo);
		}
	};

	// 상품문의 내역 셀 클릭 이벤트
	gridGoodsQnaOptions.onCellClicked = function (event) {
		if (event.colDef.field === 'questTitle') {
			let counselSq = event.data.counselSq;
			cfnOpenGoodsQnaDetailPopup(counselSq);
		}
	};


	// 주소지 셀 클릭 이벤트
	gridAddrOptions.onCellClicked = function (event) {
		if (event.colDef.field !== 'delvAddrNm')
			return;

		if (!gagajf.isNull(event.data)) {
			$('#custAddrForm input[name=custDelvAddrSq]').val(event.data.custDelvAddrSq);
			$('#custAddrForm input[name=delvAddrNm]').val(event.data.delvAddrNm);
			$('#custAddrForm input[name=recipNm]').val(event.data.recipNm);

			if (!gagajf.isNull(event.data.recipPhnno)) {
				let phnNoSplit = event.data.recipPhnno.split("-");
				$('#custAddrForm select[name=recipFirstNo]').val(phnNoSplit[0]);
				$('#custAddrForm input[name=recipMiddleNo]').val(phnNoSplit[1]);
				$('#custAddrForm input[name=recipLastNo]').val(phnNoSplit[2]);
			}

			if (!gagajf.isNull(event.data.recipTelno)) {
				let telNoSplit = event.data.recipTelno.split("-");
				$('#custAddrForm select[name=telFirstNo]').val(telNoSplit[0]);
				$('#custAddrForm input[name=telMiddleNo]').val(telNoSplit[1]);
				$('#custAddrForm input[name=telLastNo]').val(telNoSplit[2]);
			}

			$('#custAddrForm input[name=recipZipcode]').val(event.data.recipZipcode);
			$('#custAddrForm input[name=recipBaseAddr]').val(event.data.recipBaseAddr);
			$('#custAddrForm input[name=recipDtlAddr]').val(event.data.recipDtlAddr);

			fnDisplayDeliveryCheckBox(event.data.defaultYn, event.data.delYn);
		}
	};

	// 회원정보 조회
	var fnSearchCustInfo = function () {
		$.get('/customer/info/' + custNo
			, function (data) {
				if (!gagajf.isNull(data)) {
					$('#spanCustNm').text(data.maskingCustNm);
					$('#spanCustId').text(data.maskingCustId);
					$('#siteNm').text(gagaAgGrid.lookupValue(siteList, data.siteCd));
					$('#custGrade').val(data.custGrade);
					$('#custGb').val(data.custGb);
					$('#managedRsn').val(data.managedRsn);
					$('#managedDtlRsn').val(data.managedDtlRsn);
					$('#managedDt').text(gagaAgGrid.toDateTimeFormat(data.managedDt));
					$('#joinDt').text(gagaAgGrid.toDateTimeFormat(data.joinDt));

					let loginLdt = fnGetloginLdt(data.loginLdt);
					$('#loginLdt').text(loginLdt);

					let foreignerYn = data.foreignerYn === 'Y' ? '외국인' : '내국인';
					$('#foreignerYn').text(foreignerYn);

					fnGetSecedeRsnYn(data.custStat, data.secedeRsn);	// 탈퇴여부

					let snsType = fnGetSnsType(data.snsType);
					$('#snsType').text(snsType);

					$('#homeZipcode').val(data.homeZipcode);
					$('#homeBaseAddr').val(data.homeBaseAddr);
					$('#homeDtlAddr').val(data.homeDtlAddr);
					$('#sexGb').text(gagaAgGrid.lookupValue(genderGbList, data.sexGb));
					$('#birthYmd').val(gagaAgGrid.toDateFormat(data.birthYmd));
					fnDisplayEmailAgree(data.emailAgreeYn);
					fnDisplaySmsAgree(data.smsAgreeYn);
					fnDisplayAppAgree(data.appAgreeYn);
					fnDisplayMarketingAgree(data.mkAgreeYn);
					fnDisplayEmail(data.email, data.maskingEmail);
					fnDisplayCellPhnno(data.cellPhnno, data.maskingCellPhnno);
					fnDisplayManaged(data.managedRsn);

					orgData = data;									// 기존 데이터

				}
			});
	};


	$('#custOrderListFrom select[name=pageSize]').on('click', function () {
		fnSearchOrder();
	});

	// 구매내역 조회
	var fnSearchOrder = function () {
		gagaPaging.init('custOrderListFrom', fnCustOrderListCallBack, 'custOrderListPagination', $('#custOrderListFrom select[name=pageSize]').val());
		gagaPaging.load($('#custOrderListFrom input[name=pageNo]').val());
	};

	var fnCustOrderListCallBack = function (result) {
		$('#gridOrderRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
		$('#custOrderListFrom input[name=pageNo]').val(result.pageing.pageable.pageNo.addComma());
		$('#ordPgNo').html(result.pageing.pageable.pageNo.addComma());
		$('#ordEndPgNo').html(result.pageing.pageable.totalPage.addComma());

		gridOrderOptions.api.setRowData(result.custOrderList);
		gagaPaging.createPagination(result.pageing.pageable);
	}

	// 배송지 조회
	var fnCustSearchDelivery = function () {
		const actionUrl = "/customer/delivery/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridAddrOptions);
		$('#btnCustAddrNew').trigger('click');
	};

	//	쿠폰내역 조회
	var fnSearchCoupon = function () {
		const actionUrl = "/customer/coupon/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridCouponOptions);
	};

	// 	포인트내역 조회
	var fnSearchPoint = function () {
		$.get('/customer/point/' + custNo
			, function (data) {
				if (!gagajf.isNull(data)) {
					$('#custPointForm td[name=availPntAmt]').text(data.rmPntAmt.addComma() + ' P');
					$('#custPointForm td[name=accumPntAmt]').text(data.gvPntAmt.addComma() + ' P');
					$('#custPointForm td[name=usePntAmt]').text(data.usPntAmt.addComma() + ' P');
					$('#custPointForm td[name=expirePntAmt]').text(data.expirePntAmt.addComma() + ' P');
					$('#custPointForm td[name=expectedPntAmt]').text(data.expectedPntAmt.addComma() + ' P');
					$('#custPointForm td[name=expectedExpirePntAmt]').text(data.expectedExpirePntAmt.addComma() + ' P');
				}
			});
		const actionUrl = "/customer/point/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridPointOptions);
	};

	// 상품권 조회
	var fnSearchGiftCard = function () {
		const actionUrl = "/customer/giftcard/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridGiftCardOptions);
	};

	// 상품평내역 조회
	var fnSearchReview = function () {
		const actionUrl = "/customer/review/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridReviewOptions);
	};

	//	1:1문의 내역 조회
	var fnSearchCounsel = function () {
		const actionUrl = "/customer/counsel/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridCounselOptions);
	};

	//	상품문의 내역 조회
	var fnSearchGoodsQna = function () {
		const actionUrl = "/customer/goodsQna/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridGoodsQnaOptions);
	};

	// 회원접촉이력 조회
	var fnSearchContact = function () {
		$('#custContactHstForm')[0].reset();
		const actionUrl = "/customer/contact/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridContactOptions);
	};

	// 회원등급변경이력 조회
	var fnSearchChangeGrade = function () {
		const actionUrl = "/customer/change/grade/list/" + custNo;
		gagaAgGrid.fetch(actionUrl, gridGradeOptions);
	};


	/**
	 * DAUM을 이용한 우편번호 팝업 레이어
	 */
	var fnOpenDaumAddr = function(id) {
		let daumZip = new daum.Postcode({
			oncomplete: function(data) {
				// 우편번호와 주소 정보를 해당 필드에 넣는다.
				if (id === 'custInfoForm') {
					$('#homeZipcode').val(data.zonecode);
					$('#homeBaseAddr').val(cfnGetDaumRoadAddr(data));
					$('#homeDtlAddr').focus();
				}

				if (id === 'custAddrForm') {
					$('#recipZipcode').val(data.zonecode);
					$('#recipBaseAddr').val(cfnGetDaumRoadAddr(data));
					$('#recipDtlAddr').focus();
				}

				cfnCloseDaumAddr();
			},
			width: '100%'
		});

		cfnOpenDaumAddr(daumZip);
	}

	// 휴대전화 유효성 체크 및 데이터 셋팅
	var fnCheckValidationPhnno = function (formId) {
		let result = true;
		if (!gagajf.testRegexp($(formId + ' input[name=cellPhnno]'), /^(01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4})$/)) {
			result = false;
		}

		return result;
	};

	// 이메일 체크 및 데이터 셋팅
	var fnCheckValidationEmail = function (formId) {
		let result = true;
		let emailId = $(formId + ' input[name=emailId]').val();
		let emailDomain = $(formId + ' input[name=emailDomain]').val();
		$(formId + ' input[name=email]').val(emailId + '@' + emailDomain);

		if (orgData.maskingEmail === $(formId + ' input[name=email]').val()) {
			$(formId + ' input[name=emailModifyYn]').val('N');
			return true;
		} else {
			if (!gagajf.testRegexp($(formId + ' input[name=email]'), /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/)) {
				result = false;
			}
			// 수정되었으면 Y로 변경
			if (result) {
				$(formId + ' input[name=emailModifyYn]').val('Y');
			}
		}
		return result;
	};


	// 관리대상
	var fnDisplayManaged = function (managedRsn) {
		const $managedRsnNm = $('#managedRsnNm');
		const $managedRsnDp = $('#managedRsnDp');
		$managedRsnNm.text('');
		$managedRsnNm.hide();
		$managedRsnDp.text('');
		$managedRsnDp.hide();
		if (!gagajf.isNull(managedRsn)) {
			let html = '<i class="fa fa-info-circle"></i>';
			$managedRsnNm.html(html);
			$managedRsnNm.show();
			$managedRsnDp.html(html);
			$managedRsnDp.show();
		}

	};

	// 탈퇴여부
	var fnGetSecedeRsnYn = function (custStat, secedeRsn) {
		const activeCustomer = 'G104_10';
		let secedeRsnYn = gagajf.isNull(secedeRsn) ? '아니요' : '예';
		$('#secedeRsnYn').text(secedeRsnYn);
		if (custStat === activeCustomer) {
			$('#btnCustSecede').show();
		}
	}

	// 휴대전화번호
	var fnDisplayCellPhnno = function (cellPhnno, maskingCellPhnno) {
		$('#custInfoForm input[name=cellPhnno]').val(cellPhnno);
		$('#custInfoForm input[name=maskingCellPhnno]').val(maskingCellPhnno);
	};

	// 이메일
	var fnDisplayEmail = function (email, maskingEmail) {
		if (!gagajf.isNull(maskingEmail)) {
			let emailSplit = maskingEmail.split("@");
			$('#emailId').val(emailSplit[0]);
			$('#emailDomain').val(emailSplit[1]);
			$('#custInfoForm input[name=maskingEmail]').val(maskingEmail);
		}
		$('#custInfoForm input[name=orgEmail]').val(email);
	};

	// 이메일 수신동의
	var fnDisplayEmailAgree = function (emailAgreeYn) {
		let emailEq = emailAgreeYn === 'Y' ? 0 : 1;
		const $emailAgreeYn = $('#custInfoForm input:radio[name=emailAgreeYn]');
		$emailAgreeYn.eq(emailEq).prop('checked', true);
		$emailAgreeYn.eq(emailEq).parent().addClass('checked');
	};

	// SMS 수신동의
	var fnDisplaySmsAgree = function (smsAgreeYn) {
		let smsEq = smsAgreeYn === 'Y' ? 0 : 1;
		const $smsAgreeYn = $('#custInfoForm input:radio[name=smsAgreeYn]');
		$smsAgreeYn.eq(smsEq).prop('checked', true);
		$smsAgreeYn.eq(smsEq).parent().addClass('checked');
	};

	// APP 수신동의
	var fnDisplayAppAgree = function (appAgreeYn) {
		let appEq = appAgreeYn === 'Y' ? 0 :1 ;
		const $appAgreeYn = $('#custInfoForm input:radio[name=appAgreeYn]');
		$appAgreeYn.eq(appEq).prop('checked', true);
		$appAgreeYn.eq(appEq).parent().addClass('checked');
		$appAgreeYn.attr('disabled', true);
	};

	// 마케팅 수신동의
	var fnDisplayMarketingAgree = function (mkAgreeYn) {
		let mkEq = mkAgreeYn === 'Y' ? 0 :1 ;
		const $mkAgreeYn = $('#custInfoForm input:radio[name=mkAgreeYn]');
		$mkAgreeYn.eq(mkEq).prop('checked', true);
		$mkAgreeYn.eq(mkEq).parent().addClass('checked');
		$mkAgreeYn.attr('disabled', true);
	};


	// 최종로그인 일시
	var fnGetloginLdt = function (loginLdt) {
		let result = '로그인 이력이 없습니다.';
		if (!gagajf.isNull(loginLdt)) {
			result = gagaAgGrid.toDateTimeFormat(loginLdt);
		}
		return result;
	};

	// SNS가입유형
	var fnGetSnsType = function (snsType) {
		let snsText = '';
		if (snsType === 'NV') {
			snsText = '네이버'
		}
		if (snsType === 'KK') {
			snsType = '카카오';
		}
		if (snsType === 'YS') {
			snsText = 'YES24';
		}
		return snsText;
	};

	// 생년월일 달력 설정
	var fnDisplayBirthYmd = function () {
		const $birthYmd = $('#birthYmd');
		let currentYear = new Date().format('YYYY');
		$birthYmd.datepicker("destroy");
		$birthYmd.datepicker({
			changeMonth: true,
			changeYear: true,
			yearRange: (currentYear - 100) + ' : ' + (currentYear - 14),
			defaultDate: $birthYmd.val()
		});
	};

	// 배송지 기본,삭제 체크박스 설정
	var fnDisplayDeliveryCheckBox = function (defaultYn, delYn) {
		let $defaultYn = $('#custAddrForm input:checkbox[name=defaultYn]');
		let $delYn = $('#custAddrForm input:checkbox[name=delYn]');
		let defaultBoolean;
		let delBoolean;

		if (defaultYn === 'Y') {
			defaultBoolean = true;
			$defaultYn.parent().addClass('checked');
		} else {
			defaultBoolean = false;
			$defaultYn.parent().removeClass('checked');
		}

		if (delYn === 'Y') {
			delBoolean = true;
			$delYn.parent().addClass('checked');
		} else {
			delBoolean = false;
			$delYn.parent().removeClass('checked');
		}

		$defaultYn.prop('checked', defaultBoolean);
		$delYn.prop('checked', delBoolean);
	}


	$('#btnLogin').on('click', function () {
		let custId = $('#spanCustId').text();
		const actionUrl = _frontUrl + '/customer/front/login?custId=' + custId;
		let popupWidth = window.screen.width;
		let popupHeight = window.screen.height;
		window.open(actionUrl);
	})

	$(document).ready(function () {

		fnDisplayBirthYmd(); //생년월일 달력 설정

		fnSearchCustInfo();	//회원정보 조회

		gagaAgGrid.createGrid('custOrderList', gridOrderOptions);		// 주문내역

		gagaAgGrid.createGrid('custAddrList', gridAddrOptions);			// 주소정보 그리드

		gagaAgGrid.createGrid('custCouponList', gridCouponOptions);		// 쿠폰내역

		gagaAgGrid.createGrid('custPointList', gridPointOptions);		// 포인트내역 그리드

		gagaAgGrid.createGrid('custGiftCardList', gridGiftCardOptions);	// 상품권내역 그리드

		gagaAgGrid.createGrid('custCounselList', gridCounselOptions);	// 1:1문의 내역

		gagaAgGrid.createGrid('custGoodsQnaList', gridGoodsQnaOptions);	// 상품문의 내역

		gagaAgGrid.createGrid('custReviewList', gridReviewOptions);		// 상품평 그리드

		gagaAgGrid.createGrid('custGradeList', gridGradeOptions);		// 등급변경 그리드

		gagaAgGrid.createGrid('custContactList', gridContactOptions);	// 회원접촉이력 그리드
	});


	/*]]>*/
</script>

</html>