<!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/CallcenterLayoutWeb">
<!--
 *******************************************************************************
 * @source  : GoodsQnaFormWeb.html
 * @desc    : 상품문의 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.19   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container cs"> 
		<div class="breadcrumb"> 
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터</a></li>
				<li class="bread_3depth">상품문의</li>
			</ul> 
		</div>
		<div class="wrap">
			<div class="content product">
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb" id="callcenterLnb">
					</div>
					<div class="cont">
						<div>
							<div class="sec_head">
								<h3>상품문의</h3>
							</div>
							<div class="sec_body">
								<div class="history_wrap clear">
									<div class="hist_status">
										<ul>
											<li>
												<span>총 문의</span>
												<a href="javascript:void(0);" onclick="" th:text="${qnaCountInfo.totCnt}" id="qnaTotCnt">12</a>
											</li>
											<li>
												<span>답변 완료</span>
												<a href="javascript:void(0);" onclick="" th:text="${qnaCountInfo.ansCnt}" id="qnaAnsCnt">8</a>
											</li>
											<li>
												<span>처리 중</span>
												<a href="javascript:void(0);" onclick="" th:text="${qnaCountInfo.ingCnt}" class="doing" id="qnaIngCnt">0</a>
											</li>
										</ul>
									</div>
									<div class="txt">
										<p>상품에 관련된 문의 내용을 확인할 수 있습니다.<br/>상품별 문의는 해당 상품 페이지에서 등록 가능하며 답변이 달린<br/>내용은 고객센터 또는 해당 상품페이지에서 확인 가능합니다.</p>
									</div>
								</div>
								<div class="ui_row" id="divQna"> <!-- 데이터 없을시 클래스 nodata 추가 -->
									<!-- list -->
									<div class="foldGroup case1">
										<ul id="ulQna">
										</ul>
									</div>
									<!-- //list -->
								</div>
								<div class="ui_foot">
									<div class="ui_row">
										<ul class="pageNav" id="pageNav">
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->
	
	<form id="qnaForm" name="qnaForm" action="#" th:action="@{'/callcenter/goods/qna/list'}">
		<input type="hidden" name="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="10"/>
	</form>

<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 고객센터 LNB 설정
		fnSetCallcenterLnb(3);
		
		fnGetList();
	});
	
	let fnGetList = function() {
		// Initialize a pagination
		gagaPaging.init('qnaForm', fnGetListCallback, 'pageNav', 10);

		// Load data
		gagaPaging.load(1);
	}
	
	var idx = 1;
	var fnGetListCallback = function(result) {
		$('#ulQna').html('');

		// 목록
		if (result.dataList != null && result.dataList.length > 0) {
			$.each(result.dataList, function(idx, item) {
				let tag = '<li>\n';
				tag += '	<div class="fold_head">\n';
				tag += '		<a href="javascript:void(0)">\n';
				tag += '			<div>\n';
				tag += '				<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
				tag += '				<div class="fold_tit">\n';
				tag += '					<span class="prod">' + item.goodsNm + ' ' + item.relGoodsCd + '</span>\n';
				tag += '					<span>' + item.questContent+ '</span>\n';
				tag += '				</div>\n';
				tag += '				<span class="data">' + item.questDt + '</span>\n';
				tag += '			</div>\n';
				tag += '		</a>\n';
				tag += '	</div>\n';
				tag += '	<div class="fold_cont" style="display: none;">\n';
				tag += '		<div class="fold_detail">\n'; //문의 내용
				tag += '			<div>\n';
				tag += '				<p>' + item.questContent.replace(/(\r\n)/g, '<br/>') + '</p>\n';
				tag += '			</div>\n';
				
				if (item.ansStat == 'G060_20') { // 답변완료일 때
					tag += '			<button type="button" class="btn btn_default btn_del" onclick="fnDeleteQna(' + item.counselSq + ');"><span><i class="ico ico_trash"></i>삭제</span></button>\n';
				}
				
				tag += '		</div>\n';
				
				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
					tag += '		<div class="fold_answer">\n'; //문의 답변
					tag += '			<div class="answer_head">답변이 등록되었습니다.</div>\n';
					tag += '			<div class="answer_body">' + item.ansContent.replace(/(\r\n)/g, '<br/>') + '</div>\n';
					tag += '			<span class="data">' + item.ansDt + '</span>\n';
					tag += '		</div>\n';
				}
				
				tag += '	</div>\n';
				tag += '</li>\n';
				
				$('#ulQna').append(tag);
				$('#divQna').removeClass('nodata');
				if(idx>1){
					document.getElementById('container').scrollIntoView();
				}
				idx++;
			});
		} else {
			let tag = '<li>내역이 없습니다.</li>\n';
			$('#ulQna').append(tag);
			$('#divQna').addClass('nodata');
		}

		// Create pagination
		gagaPaging.createPagination(result.paging.pageable);
	}
	
	// 삭제
	let fnDeleteQna = function(counselSq) {
		mcxDialog.confirm("등록된 내용을 삭제하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				let params = new Object();
				params.counselSq = counselSq;
				
				var jsonData = JSON.stringify(params);
				gagajf.ajaxJsonSubmit('/callcenter/goods/qna/delete'
						, jsonData
						, function() {
							fnGetList();
							
							$.get('/callcenter/goods/qna/count/info'
									, function(result) {
										$('#qnaTotCnt').html(result.totCnt);
										$('#qnaAnsCnt').html(result.ansCnt);
										$('#qnaIngCnt').html(result.ingCnt);
									}
								);
						});
			}
		});
	}
/*]]>*/
</script>

</th:block>

</body>
</html>
