
<%
	/**
	 * <pre>
	 * @Class Name : listRentItems.jsp
	 * 
	 * @Description : 대출 목록을 조회한다.
	 * 
	 * 
	 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
	 *
	 * </pre>
	 *
	 * @ ------------    --------    ---------------------------
	 * @ 수정일                     수정자             수정내용
	 * @ ------------    --------    ---------------------------
	 * @ 2021. 7. 21.    JSYOO       최초 생성
	 * @ 2021.10. 14.    KNKIM       변경API 및 화면설계서 반영
	 * @ 2021.11. 08.    KNKIM       퍼블 템플릿 적용 작업
	 * 
	 * @author 이씨플라자 * DIGITALSHIP JSYOO
	 * @since 2021. 7. 21.
	 * @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"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<c:set var="pageTitle">대출관리</c:set>



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

     $("#mngOrgCd").on("change", function(e) {
    	 fn_searchArticle($("#pageSize").val(), 1);
     });

     <sec:authorize access="isAuthenticated()">
     //초기 자료 조회 
     fn_searchArticle(1);
     </sec:authorize>
     
 }); // document ready

function fn_search(bookLtRvStatusCd) {
	$("#bookLtRvStatusCd").val(bookLtRvStatusCd);
	fn_searchArticle(1);
}
 
 // 선택한 글 상세 보기로 이동
 function fn_viewDetail(masterId) {
     $("#masterId").val(masterId);
     $("#frm").attr("action", "/search/searchItemDetail.do");
     $("#frm").attr("target", "_blank");
     $("#frm").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}/rent/listRentItemsAjax.do";
     
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").val()
             , "bookLtRvStatusCd" : $("#bookLtRvStatusCd").val()
             , "mngOrgCd"    : $("#mngOrgCd").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);
         
         // 건수 
         if(typeof jsonObj.itemsCount == 'undefined') {
             $("#itemsCount").text("0");
         }
         else {
             $("#itemsCount").text(jsonObj.itemsCount);
         }
         
         // 기존 데이터 CLEAR
         $("div.list-data div.list").not('.t-tit-line').not('.no-result').remove();
         
         if(!jsonObj.data || jsonObj.data.length <= 0 ) {
             $("div.list-data div.no-result").show();
         } else {
             $("div.list-data div.no-result").hide();
             
             // 출력
             $.each(jsonObj.data,function(key,obj) {
                 var div = $(document.createElement('div'));
                 div.attr('class', 'list');
                 div.append($('<div />').attr('class', 'n-cultural').html("[" + obj.mngOrgNm + "]"));
                 div.append($('<div />').attr('class', 'n-data').html("<a href=\"javascript:void(0)\" onclick=\"fn_viewDetail('" + obj.masterId + "')\">" + obj.title + "</a>"));
                 div.append($('<div />').attr('class', 'n-reservation').html(gfn_formatDateStr(obj.rsrvDd,"-"))); /* 대출신청예약일자 */          
                 div.append($('<div />').attr('class', 'n-expiry').html(gfn_formatDateStr(obj.rsrvExpctDd,"-"))); /* 대출예약만료일자 */  
                 div.append($('<div />').attr('class', 'n-return').html(gfn_formatDateStr(obj.rtnExpctDd,"-"))); /* 반납일자 */  
                 
                 var statusHtml = "";
                 if(obj.bookLtRvStatusCd == null) {
                	 statusHtml = "";
                 } else if(obj.bookLtRvStatusCd.startsWith("A")) {
                	 statusHtml = "<button type='button' onclick='fn_cancel(\"" + obj.title + "\",\"" + obj.bookLtRvStatusNm + "\",\"" + obj.mngOrgCd + "\", \"" + obj.rsrvId + "\")'>취소</button>";
                 } else if(obj.bookLtRvStatusCd.startsWith("R")) {
                     statusHtml = "&nbsp;<span>" + gfn_formatDateStr(obj.rtnDd,"-") + "</span>";
                 }
                 
                 div.append($('<div />').attr('class', 'n-use').html("<span>" + obj.bookLtRvStatusNm + "</span>" + statusHtml));
                 
                 $("div.list-data").append(div);
                 
             });
         }
         
         pageLoad("fn_searchArticle", jsonObj.pagingPageIndex, jsonObj.pagingTotRecordCount, jsonObj.pagingStartPage, jsonObj.pagingEndPage, jsonObj.pagingLastPage); 

     }).fail(function (jqXHR, textStatus, errorThrown) {
         alert("조회에 실패하였습니다. 관리자에게 문의 바랍니다.");
     });
 }
 
 function fn_cancel(title, bookLtRvStatusNm, mngOrgCd, rsrvId) {
	 
	 if(!confirm(title + " " + bookLtRvStatusNm + "을 취소하시겠습니까?")) return;
	 
     var reqUrl = "${pageContext.request.contextPath}/rent/cancelRentItemAjax.do";
     
     var inputData = {
               "mngOrgCd" : mngOrgCd
             , "rsrvId" : rsrvId
             , "bookLtRvStatusNm" : bookLtRvStatusNm
     };
     
     //--------------------------------------
     // 요청 처리 
     //--------------------------------------
     $.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);
         // 자료 신청(or 예약)이 취소되었습니다.
         if(jsonObj.resultCode == "S") {
        	 fn_searchArticle(1);
        	 alert(jsonObj.resultMessage);
         } else {
        	 alert(jsonObj.resultMessage);
         }
         
     }).fail(function (jqXHR, textStatus, errorThrown) {
         alert("처리에 실패하였습니다. 관리자에게 문의 바랍니다.");
     });
 
 }
 </script>

    <!-- 대출관리 섹션 -->
    <div class="location loan-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>대출</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 loan-box">
                    <form name="frm" id="frm" method="post">
                    <input type="hidden" name="bookLtRvStatusCd" id="bookLtRvStatusCd" value="${bookLtRvStatusCd }" />
			        <input type="hidden" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" />
			        <input type="hidden" name="pageSize" id="pageSize" title="페이지크기" value="${pageSize }" />
			        <input type="hidden" name="masterId" id="masterId" title="페이지크기" value="" />
                    
                    <div class="tab">
                        <ul class="tabs">
                            <li><a href="javascript:void(0);" onclick="fn_search('A')">신청/예약</a></li>
                            <li><a href="javascript:void(0);" onclick="fn_search('C')">취소</a></li>
                            <li><a href="javascript:void(0);" onclick="fn_search('W')">대출중</a></li>
                            <li><a href="javascript:void(0);" onclick="fn_search('R')"><!-- <img src="/images/icon/icon-new.png" alt="뉴 아이콘"> -->반납</a></li>
                            <li><a href="javascript:void(0);" onclick="fn_search('P')">연체</a></li>
                        </ul>
                    
                        <div class="title">
                            <span class="count">총 <em id="itemsCount">0</em>건</span>
                            <div class="list-search-wrap list-top">
                                <div class="list-select">
                                    <select name="mngOrgCd" id="mngOrgCd" title="문화원 선택">
                                        <option value="">문화원 전체</option>
							            <c:forEach var="orgItem" items="${rentMngOrgList}" varStatus="status">
							            <option value="<c:out value="${orgItem.mngOrgCd }" />"
							                    <c:if test="${orgItem.mngOrgCd == mngOrgCd }">selected</c:if>><c:out
							                    value="${orgItem.mngOrgNm }" /></option>
							            </c:forEach>
                                    </select>
                                    <label for="mngOrgCd" style="display:none">문화원 선택</label>
                                </div>
                            </div>
                        </div>

                        <div class="tab_content">
                            <div class="tabs_item">
                                <div class="inner">

                                    <div class="list-wrap">
                                        <div class="list-data">
                                            <div class="list t-tit-line">
                                                <div class="n-cultural">문화원</div>
                                                <div class="n-data">자료정보</div>
                                                <div class="n-reservation">신청/예약일</div>
                                                <div class="n-expiry">신청/예약 만료일</div>
                                                <div class="n-return">반납예정일</div>
                                                <div class="n-use">이용</div>
                                            </div>
                                            <div class="no-result" style="display:none;">
                                                <span>자료가 없습니다.</span>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <ul id="paging" class="paging"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>      
                </div>
            </div>
        </div>
    </div>
    

