<%
/**
 * <pre>
 * @Class Name : listItems.jsp
 * 
 * @Description : 소장 자료를 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 28.    JSYOO       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 28.
 * @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>

<!DOCTYPE html>
<html>
<head>
<style>

</style>

<title>${pageTitle}</title>
<!-- GRID -->
<link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid.css" />
<link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid-theme.css" />
<script src="/nlib/js/jquery-ui/jquery-ui.js"></script>
<script src="/nlib/js/jsgrid/nlib-jsgrid.js"></script>
<script type="text/javaScript" language="javascript">


window.onload = function() {
 
    $("#jsGrid").jsGrid({
        pageSize : $("#pageSize").val(),
        controller: {
            loadData: function(filter) {
                var data = $.Deferred();
 
                var reqUrl = "${pageContext.request.contextPath}/collection/listItemsAjax.do";
                var searchKeyword  = document.articleForm.searchKeyword.value;
                var pageIndex = ( filter && filter.pageIndex ? filter.pageIndex : $("#pageIndex").val());
                var pageSize  = ( filter && filter.pageSize  ? filter.pageSize  : $("#pageSize").val());

                $("#pageIndex").val(pageIndex);

                var inputData = {
                          "searchKeyword" : searchKeyword
                        , "pageIndex" : pageIndex
                        , "pageSize": pageSize};
                $.ajax({
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    url: reqUrl,
                    dataType: 'json',
                    data: JSON.stringify(inputData),
                }).done(function(response){
                    <%
                    // 그리드 데이터 예시 : 
                    // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
                    // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
                    %>
                    data.resolve(JSON.parse(response));
                });
                return data.promise();
            }
        },
 
        rowRenderer: function(item) {
            var user = item;
            console.log(item);
            var $photo = $("<div>").addClass("client-photo").append($("<img>")
            		.attr("src", "data:image/jpeg;base64,[encoded data, 7100 characters]"));
            var $info = $("<div>").addClass("client-info")
                .append($("<input type='button' style='float:right' onclick='viewing_item();'>").attr("value","열람요청"))
                .append($("<input type='button' style='float:right' onclick='reservation_item();'>").attr("value","대출예약"))
                .append($("<input type='button' style='float:right' onclick='interesting_item();'>").attr("value","관심"))
                .append($("<p>").append($("<strong>").text(user.rentItem.capitalize())))
                .append($("<p>").text("도서간행물 / OO 문화원(2018)"))
                .append($("<p>").text("소장 : OO문화원, OO문화원"))
                .append($("<p>").text("설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다.설명이 들어갑니다."));
 
            return $("<tr>").append($("<td>").append($photo).append($info));
        },
        rowClick: function(args) { // 행 클릭 시, 실행되는 이벤트 함수 
            
            // 클릭된 행의 자료 객체 
            var getData = args.item;
            
            // 추출할 컬럼의 데이터 가져오기 
            var articleNo = getData["articleNo"];
            
            // 상세 내용 보기 
            fn_view_detail(articleNo);
        },
        fields: [
            { title: "소장자료" }
        ]
    });
 
 
    String.prototype.capitalize = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    };

    // 페이지 크기 변경시 재조회 
    $("#pageSize").on("change", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });

    // 검색 버튼 클릭 
    $("#btnSearch").on("click", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });
    
    //초기 자료 조회 
    fn_search_article();
    
    
    
}; // window.onload

function interesting_item(){
    alert("관심");	
}

function reservation_item(){
	alert("예약");
}

function viewing_item(){
	alert("열람");
}
// 선택한 게시글 상세 보기로 이동
function fn_view_detail(articleNo) {
    $("#articleNo").val(articleNo);
    $("#articleForm").attr("action", "${pageContext.request.contextPath}/collection/selectItemInfo.do");
    $("#articleForm").submit();
}

// 그리드 데이터 조회 호출 
function fn_search_article(pageSize, pageIndex) {
    $("#jsGrid").jsGrid("search"
            , {'pageSize' : (pageSize  ? pageSize  : fn_getIntValue("pageSize", ${pageSize})), 
               'pageIndex': (pageIndex ? pageIndex : fn_getIntValue("pageIndex", 1))
               }
    );
}

</script>
</head>

<body>
<style>
    .client-photo { float: left; margin: 0 20px 0 10px; }
    .client-photo img { border-radius: 50%; border: 1px solid #ddd; }
    .client-info { margin-top: 10px; }
    .client-info p { line-height: 25px; }
</style>
<h1>${pageTitle }</h1>

<form name="articleForm" id="articleForm"  
      method="post"> 
    
    <!-- 검색조건 -->
    <select name="pageSize" id="pageSize" title="목록에 보여줄 글 개수">
        <c:forEach var="pageSizeItem" items="${pageSizeCodes}" varStatus="status">
           <option value="<c:out value="${pageSizeItem.code }" />" <c:if test="${pageSizeItem.code == pageSize }">selected</c:if> ><c:out value="${pageSizeItem.name }" /></option>
        </c:forEach>
    </select>
    
    <input type="text" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" size="5" maxlength="5" />
    <input type="text" name="searchKeyword" id="searchKeyword" title="검색어" value="${searchKeyword }" size="35" maxlength="50" />
    <input type="button" name="btnSearch" id="btnSearch" value="검색" />
         
    <div id="jsGrid" name="jsGrid" style="height: 100%"></div>
    <input type="text" name="articleNo" id="articleNo" value="" title="선택글번호" readonly />
</form>
</body>
</html>
