<%
/**
 * <pre>
 * @Class Name : lisNotifications.jsp
 * 
 * @Description : 알림 목록을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 9. 6.     KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 9. 6.
 * @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">알림</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, notiId) {

     var $qObj = $(qObj);
     if($qObj.hasClass('on')) {
         return;
     }
     
     var reqUrl = "${pageContext.request.contextPath}/cmm/selectNotificationAjax.do";
     var inputData = { "notiId" : notiId };
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.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.content;
              
        $('.list-accordion .answer').html("");
        $qObj.next(".answer").html("<p>" + answerHtml + "<p>&nbsp;</p>");
             
        // 펼치기 
        $('.list-accordion .answer').stop().slideUp(300);
        $qObj.next('.answer').stop().slideDown(300);
        
        $('.list-accordion .question').removeClass('on');
        $qObj.addClass('on');
        
        $qObj.find("span unread").remove();
     });

 }
 

 // 그리드 데이터 조회 호출 
 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}/cmm/listNotificationsAjax.do";
     
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").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(jsonObj.itemsCount == undefined) {
             $("#itemsCount").text("0");
         }
         else {
             $("#itemsCount").text(jsonObj.itemsCount);
         }
         
         // 기존 데이터 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.notiId);
                 }));
                 if(!fn_isEmpty(obj.mngOrgNm)) li.find(".question").append($('<span />').attr("class", "type").html("[" + obj.mngOrgNm + "]"));
                 else li.find(".question").append($('<span />').attr("class", "type").html("[소장자료관]"));
                 
                 var unread = "";
                 if(obj.readYn != "Y") unread = " <unread>미확인</unread>";
                 li.find(".question").append($('<span />').html(obj.title + unread));
                 li.find(".question").append($('<span />').attr('class', 'date').html(obj.regDd));
                 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 (request, textStatus, errorThrown) {
         alert("조회에 실패하였습니다. \n" + gfn_removeQuotes(request.responseText));
     });
 }

</script>

    <!-- 알림 섹션 -->
    <div class="location noti-data">
        <h2 class="blind">알림 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="location-box">
                    <ul class="loc">
                        <li>HOME</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 noti-box">
                    <div class="title">
                        <span class="count">총 <em id="itemsCount">0</em>건</span>
                        <div class="text">
                            <p>-  최근 한달동안 발송된 알림 내역만 보관됩니다.</p>
                        </div>
                    </div>
                    
                    <div class="notifi">
                        <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>
    
<form name="articleForm" id="articleForm" method="post" onsubmit="return false;"> 
<input type="hidden" name="pageSize" id="pageSize" value="${pageSize }" />
<input type="hidden" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" />
<input type="hidden" name="articleId" id="articleId" title="게시글번호" value="" />
</form>

