<%
/**
 * <pre>
 * @Class Name : listAncmnts.jsp
 * 
 * @Description : 공지사항 목록 화면을 표출한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 9. 13.    KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 9. 13.
 * @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(articleId) {
	 $('#articleForm').removeAttr('onsubmit');
	 $("#articleForm").attr("action", "${pageContext.request.contextPath}/bbs/selectAncmntArticle.do");
	 $("#articleId").val(articleId);
	 $("#articleForm").submit();
 }
 
 // 그리드 데이터 조회 호출 
 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/listAncmntsAjax.do";
     
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").val()
             , "searchType" : $("#searchType").val()
             , "searchKeyword"    : $("#searchKeyword").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);
         //$("#itemsCount").val(jsonOjb.itemsCount);
         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-notice li").not('.t-tit-line').not('.no-result').remove();
         
         if(!jsonObj.data || jsonObj.data.length <= 0 ) {
        	 $("ul.list-notice li.no-result").show();
         } else {
        	 $("ul.list-notice li.no-result").hide();
        	 
             // 출력
             $.each(jsonObj.data,function(key,obj) {
                 var li = $(document.createElement('li'));
                 li.append($('<span />').attr('class', 't-num').html(obj.rno));
                 li.append($('<span />').attr('class', 't-tit').html("<a href=\"javascript:void(0)\" onclick=\"fn_viewDetail('" + obj.articleId + "')\">" + 
                         (obj.notiYn == "Y" ? '<span>공지</span>' : '') + 
                         obj.title + "</a>"));
                 li.append($('<span />').attr('class', 't-writer').html(obj.regNm));
                 li.append($('<span />').attr('class', 't-date').html(obj.regDd));
                 li.append($('<span />').attr('class', 't-file').html((obj.attachYn == "Y" ? '<img src="/images/icon/icon-file.png" alt="파일 아이콘">' : '')));
                 
                 $( "ul.list-notice").append(li);
                 
             });
         }
         
         pageLoad("fn_searchArticle", jsonObj.pagingPageIndex, jsonObj.pagingTotRecordCount, jsonObj.pagingStartPage, jsonObj.pagingEndPage, jsonObj.pagingLastPage); 

     }).fail(function (jqXHR, textStatus, errorThrown) {
         alert("조회에 실패하였습니다. 관리자에게 문의 바랍니다.");
     });
 }
 
 </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>고객지원</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="community notice">
                    <div class="contents-frame inner-center">
                        <div class="list-header">
                            <!--  name="listForm" -->
                            <form name="articleForm" id="articleForm" method="post" class="list-search" onsubmit="return false;">
                                <fieldset>
                                    <legend>공지 검색</legend>
				
				                     <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="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="nttType" id="nttType" title="유형 선택"> -->
										     <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" id="searchKeyword" name="searchKeyword" placeholder="검색어를 입력하세요" title="검색어" value="${searchArticle.searchKeyword }" maxlength="20" >
                                            <label for="searchKeyword" style="display:none">검색어</label>
                                            <label for="btnSearch">
                                            <button name="btnSearch" id="btnSearch" type="button" title="검색">검색</button>
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        
                        <div class="list-table-wrap">
                            <ul class="list-notice">
                                <li class="t-tit-line">
                                    <span class="t-num">NO</span>
                                    <span class="t-tit">제목</span>
                                    <span class="t-writer">등록자</span>
                                    <span class="t-date">등록일</span>
                                    <span class="t-file">첨부</span>
                                </li>
		                        <li class="no-result" style="display:none;">
		                            <span>검색결과가 없습니다.</span>
		                        </li>
                            </ul>
                        </div>
                        
                        <ul id="paging" class="paging"></ul>
                    </div>
                    <!-- //contents-frame -->
                </div>

            </div>
        </div>
    </div>
    
