<%
/**
 * <pre>
 * @Class Name : listFaqs.jsp
 * 
 * @Description : 자주하는질문 목록 화면을 표출한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 9. 15.    KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 9. 15.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">FAQ</c:set>

<script>
 
$( document ).ready(function() {
     
     // 메시지 표출 
     if(!fn_isEmpty('${message}')) {
         alert("${message}");
     }

     // 검색 수행 이벤트  
     $("#btnSearch").on("click", function(e) {
         fn_searchArticle(1);
     });
     $("#searchKeyword").on("keydown", function(e) {
         if(e.keyCode == 13) {
             fn_searchArticle(1);    
         }
     });
     
     //초기 자료 조회 
     fn_searchArticle();
     
 }); // document ready

 // 선택한 글 상세 보기로 이동
 function fn_viewDetail(qObj, articleId) {

     var $qObj = $(qObj);
     if($qObj.hasClass('on')) {
    	 return;
     }
     
     var reqUrl = "${pageContext.request.contextPath}/bbs/selectFaqArticleAjax.do";
     var inputData = { "articleId" : articleId };
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.ajax({
         type: "post",
         contentType: "application/json; charset=utf-8",
         url: reqUrl,
         dataType: "json",
         data: JSON.stringify(inputData),
     }).done(function(response){
         var jsonObj = JSON.parse(response);
         var answerHtml = jsonObj.data.answer;
		      
        $('.list-accordion .answer').html("");
		$qObj.next(".answer").html(answerHtml);
		     
	    // 펼치기 
		$('.list-accordion .answer').stop().slideUp(300);
		$qObj.next('.answer').stop().slideDown(300);
		
		$('.list-accordion .question').removeClass('on');
		$qObj.addClass('on');
		
		$("html, body").animate({
	         scrollTop: $qObj.offset()
	     }, 600);
	     
     });

 }
 

 // 그리드 데이터 조회 호출 
 function fn_searchArticle(pageIndex) {
     
     if(fn_isEmpty(pageIndex)) pageIndex = $("#pageIndex").val();
     if(fn_isEmpty(pageIndex)) pageIndex = "1";
     $("#pageIndex").val(pageIndex);
     
     var reqUrl = "${pageContext.request.contextPath}/bbs/listFaqsAjax.do";
     
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").val()
             , "searchType" : $("#searchType").val()
             , "searchKeyword"      : $("#searchKeyword").val()
             , "searchQuestionType" : $("#searchQuestionType").val()
     };
     
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.ajax({
         type: "post",
         contentType: "application/json; charset=utf-8",
         url: reqUrl,
         dataType: "json",
         data: JSON.stringify(inputData),
     }).done(function(data) {
         <%
         // 그리드 데이터 예시 : 
         // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
         // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
         %>
         
         var jsonObj = JSON.parse(data);
         console.log(jsonObj.itemsCount);
         
         // 건수 
         if(typeof jsonObj.itemsCount == 'undefined') {
             $("#itemsCount").text("0");
             $("#searchItemsCount").text("0");
         }
         else {
             $("#itemsCount").text(jsonObj.itemsCount);
             $("#searchItemsCount").text(jsonObj.itemsCount);
         }
         
         // 검색결과 
         if($("#searchKeyword").val() != "") {
             $("#searchKeywordPrt").text("'" + $("#searchKeyword").val() + "'");
             $("#searchResult").show();
             $("#cntResult").hide();
         }
         else {
             $("#searchResult").hide();
             $("#cntResult").show();
         }
         
         // 기존 데이터 CLEAR
         $( "ul.list-faq li").not('.no-result').remove();
         
         if(!jsonObj.data || jsonObj.data.length <= 0 ) {
             $("ul.list-faq li.no-result").show();
         } else {
             $("ul.list-faq li.no-result").hide();

             // 출력
             $.each(jsonObj.data,function(key,obj) {
                 var li = $(document.createElement('li'));
                 li.attr("articleId", obj.articleId);
                 li.append($('<button type="button"></button>').attr('class', 'question').on("click", function() {
                     fn_viewDetail(this, obj.articleId);
                 }));
                 li.find(".question").append($('<span />').attr("class", "type").html("[" + obj.questionTypeName + "]"));
                 li.find(".question").append($('<span />').html(obj.title));
                 li.append($('<div></div>').attr('class', 'answer').attr('style', 'display: none;'));
                 $( "ul.list-faq").append(li);
             });
         }
         

         pageLoad("fn_searchArticle", jsonObj.pagingPageIndex, jsonObj.pagingTotRecordCount, jsonObj.pagingStartPage, jsonObj.pagingEndPage, jsonObj.pagingLastPage); 

     }).fail(function (jqXHR, textStatus, errorThrown) {
         alert("조회에 실패하였습니다. 관리자에게 문의 바랍니다.");
     });
 }
 
//파일 다운로드
function fn_downloadFile(attachFileId, fileSn) {

  if(attachFileId == null || attachFileId.trim().length < 1) {
      alert("파일정보를 확인해 주시기 바랍니다.[1]");
      return;
  }
  
  if(fileSn == null) {
       alert("파일정보를 확인해 주시기 바랍니다.[3]");
       return;
  }
  
  $("#attachFileId").val(attachFileId);
  $("#fileSn").val(fileSn);
  
  $("#downloadFileForm").submit();
  
}   

function fn_changeQuestionType(searchQuestionType) {
	$("#searchQuestionType").val(searchQuestionType);
	$("#searchKeyword").val("");
	fn_searchArticle(1);
}

</script>

    <!-- FAQ 섹션 -->
    <div class="location faq">
        <h2 class="blind">FAQ 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="location-box">
                    <ul class="loc">
                        <li>HOME</li>
                        <li>고객지원</li>
                        <li class="on">${pageTitle}</li>
                    </ul>
                    <ul class="tit">
                        <li><span>${pageTitle}</span></li>
                    </ul>
                </div>
                <div class="arr"><img src="/images/icon/icon-join-arr2.png" alt="화살표 아이콘"></div>
            </div>
            <div class="contents row-bottom">
                <div class="list-box faq-box">
                    <div class="tab">
                        <ul class="tabs">
                            <li><a href="javascript:void(0);" onclick="fn_changeQuestionType('')">전체</a></li>
					        <c:forEach var="qTypeItem" items="${questionTypeList }">
					            <li><a href="javascript:void(0);" onclick="fn_changeQuestionType('${qTypeItem.sCodeId}')">${qTypeItem.sCodeNm}</a></li>
					        </c:forEach>
                        </ul>
                    
                        <div class="title">
                            <div class="list-search-wrap list-top">
                                <form name="articleForm" id="articleForm" method="post" onsubmit="return false;"> 
							     <input type="hidden" name="pageSize" id="pageSize" value="${searchArticle.pageSize }" />
							     <input type="hidden" name="pageIndex" id="pageIndex" title="페이지번호" value="${searchArticle.pageIndex }" />
							     <input type="hidden" name="articleId" id="articleId" title="게시글번호" value="" />
							     <input type="hidden" name="searchQuestionType" id="searchQuestionType" value="" title="유형코드" />
							     <input type="hidden" name="articleNo" id="articleNo" value="" title="선택글번호" />
							     
                                 <div class="left">
                                     <div class="total-count" id="cntResult"><span class="count">총 <em id="itemsCount">0</em>건</span></div>
                                     <div class="total-count" style="display: none;" id="searchResult">
                                     <span class="count"><em id="searchKeywordPrt"></em>에 대한 겸색결과는 총 <em id="searchItemsCount">4</em>건 입니다.</span>
                                     </div>
                                 </div>
							     
                                <div class="right">
                                    <div class="list-select type">
                                        <label for="searchType">
									     <select name="searchType" id="searchType">
									        <option value="T" <c:if test='${searchArticle.searchType == "T" }'>selected</c:if> >제목</option>
									        <option value="C" <c:if test='${searchArticle.searchType == "C" }'>selected</c:if> >내용</option>
									     </select>
                                        </label>
                                    </div>
                                    <div class="list-input">
                                        <input type="text" name="searchKeyword" id="searchKeyword" title="검색어" placeholder="검색어를 입력하세요" value="${searchArticle.searchKeyword }" maxlength="20" />
                                        <label for="searchKeyword" style="display:none">검색어</label>
                                        <label for="btnSearch">
                                        <button id="btnSearch" name="btnSearch" type="button">검색</button>
                                        </label>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>

                        <div class="tab_content">
                            <div class="tabs_item">
                               
                                <div class="list-accordion">
                                    <ul class="list-faq">
	                                <li class="no-result" style="display:none;">
	                                    <span>검색결과가 없습니다.</span>
	                                </li>                                    
                                    </ul>
                                </div>
                                
                                <ul id="paging" class="paging"></ul>
                                
                            </div>
                        </div>
                    </div>
                            
                </div>
            </div>
        </div>
    </div>

<!-- 첨부파일 다운로드용 폼 -->
<form name="downloadFileForm" id="downloadFileForm"
      action="${pageContext.request.contextPath}/fileupload/downloadAttachFile.do"
      method="post">
      <input type="hidden" name="bdType" id="bdType" value="FAQ" />
      <input type="hidden" name="attachFileId" id="attachFileId" value="" />
      <input type="hidden" name="streFileNm" id="streFileNm" value="" />
      <input type="hidden" name="fileSn" id="fileSn" value="" />
      <input type="hidden" name="orignlFileNm" id="orignlFileNm" value="" />
</form>
    
