<%
/**
 * <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="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid-theme.css" />
<script src="${pageContext.request.contextPath}/js/jquery-ui/jquery-ui.js"></script>
<script src="${pageContext.request.contextPath}/js/jsgrid/nlib-jsgrid.js"></script>
<script type="text/javaScript" language="javascript">


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

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

<% //검색필터 서브메뉴 보이기%>
function fn_show_sub(subId,subClass){
	if($("#" + subId).css("display") == "none")
	{
		$("."+subClass).css("display","none");
		$("#" + subId).css("display","block");
	}else{
		$("#" + subId).css("display","none");
	}
}

<%//검색필터 메뉴 더보기%>
function fn_show_more(showMoreId){
	if($("#" + showMoreId).html() == "더 보기")
	{
		$("."+showMoreId).css("display","block");
		$("#" + showMoreId).html("접기");
	}
	else if($("#" + showMoreId).html() == "접기")
	{
		$("."+showMoreId).css("display","none");
		$("#" + showMoreId).html("더 보기");
	}
}

//탭 이동
function fn_tabMove_sch(itemType){
	$("#itemType").val(itemType);
	fn_search_article($("#pageIndex").val());
}


function docView(){
	alert("원문보기");
}

function risDownloadFile(){
	alert("RIS");
}

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

// 그리드 데이터 조회 호출 
function fn_search_article(pageIndex) {
	var reqUrl = "${pageContext.request.contextPath}/collection/listItemsAjax.do";
	
	$("#pageIndex").val(pageIndex);
	
	var inputData = {
            "pageIndex" : pageIndex
           , "pageSize": $("#pageSize").val()
           , "searchKeyWord" : $("#searchKeyWord").val()
           , "typeCodeNm" : $("#itemType").val()
           };
    
	
	$.ajax({
	    type: "post",
	    contentType: "application/json; charset=utf-8",
	    url: reqUrl,
	    dataType: 'json',
	    data: JSON.stringify(inputData),
	}).done(function(response){
		var html = "";
		var jsonObj = JSON.parse(response);
		console.log(jsonObj);
		console.log(jsonObj.data.length);
		
		$("#itemList *").remove();
		html+="<table>"
		html+="<tr>"
		html+="<th style='width:800px;'>자료정보</th>"
		html+="<th>이용</th>"
		html+="</tr>"
		//jsonArray to jsonObject 형식 데이터 파싱 수행
        for(var i=0; i<jsonObj.data.length; i++){ //배열 값 순차적으로 확인
            var jsonObject = JSON.parse(JSON.stringify(jsonObj.data[i])); //각 배열에 있는 jsonObject 참조
            html+= "<tr>"
            /* html+= "<td>" + jsonObject.masterId + "</td>" */ 
            html+= "<td><img src='data:image/jpeg;base64,[encoded data, 7100 characters]'>"
            html+= jsonObject.title + "<input type=\"button\" style=\"width:100px;\" value=\"관심\" onclick=\"insertInterest('" + jsonObject.masterId + "');\"></td>" 
            html+= "<td>" + jsonObject.mngOrgNm + "</td>"
            html+= "</tr>";
        }
		html+="</table>"
		$("#itemList").append(html);
		//페이징처리
		paging(jsonObj.pageVO);
	    <%
	    // 그리드 데이터 예시 : 
	    // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
	    // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
	    %>
	});
}

</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">
            <c:forEach var="map" items="${pageSizeItem}" varStatus="status">
	           <c:if test="${map.key eq 'sCodeId'}"><option value="<c:out value="${map.value }" />"></c:if>
	           <c:if test="${map.key eq 'sCodeNm'}">${map.value}</option></c:if>
           </c:forEach>
        </c:forEach>
    </select>
    <input type="hidden" name="pageSize" id="pageSize" title="" value="${pageSize }" />
    <input type="hidden" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" />
    <input type="hidden" name="itemType" id="itemType" title="" value="${itemType }" />
    <input type="text" name="searchKeyword" id="searchKeyword" title="검색어" value="${searchKeyword }" size="35" maxlength="50" />
    <input type="button" name="btnSearch" id="btnSearch" value="검색" />
    <div>
        <input type="button" style="width:100px;" name="btnSearch" onclick="fn_tabMove_sch('all');" value="전체()" />
        <input type="button" style="width:100px;" name="btnSearch" onclick="fn_tabMove_sch('visit_Coll');" value="방문열람()" />
        <input type="button" style="width:100px;" name="btnSearch" onclick="fn_tabMove_sch('rent_Coll');" value="대출()" />
        <input type="button" style="width:100px;" name="btnSearch" onclick="fn_tabMove_sch('online_Coll');" value="온라인열람()" />
        <input type="button" style="width:100px;" name="btnSearch" onclick="fn_tabMove_sch('etc_Coll);" value="기타()" />
    </div>
    <table id="itemList">
     
    </table>
    <div id="paging" name="paging" style="display: block; text-align: center;"></div>
    <div id="searchMenu">
        <ul> <h3>자료유형</h3>
	        <c:forEach var="masterType" items="${masterType}" varStatus="status">
	            <li <c:if test ="${status.index >= 4}"> class="showMoreType" style="display:none;" </c:if>>
	               <a href="javascript:void(0);" onclick="fn_show_sub('${masterType.column1}_type_sub','typeSub'); return false;">${masterType.sCodeNm }</a>
	               <ul id="${masterType.column1}_type_sub" class="typeSub" style="display:none;">
                   <c:forEach var="dtlsType" items="${dtlsType}" varStatus="status">
                        <c:if test="${masterType.column1 eq dtlsType.column2 }">
	                       <li>
	                           ${dtlsType.sCodeNm}
	                       </li>
                       </c:if>
                   </c:forEach>
	               </ul>
	            </li>
	        </c:forEach>
	            <li><a href="javascript:void(0);" id="showMoreType" onclick="fn_show_more('showMoreType'); return false;">더 보기</a></li>
	     </ul>
	     <ul> <h3>주제분야</h3>
	        <c:set var="count" value="0" />
            <c:forEach var="masterClsf" items="${masterClsf}" varStatus="status">
                <c:if test="${masterClsf.upClsfId eq '2' }">
                <li <c:if test ="${count >= 4}"> class="showMoreClsf" style="display:none;" </c:if>>
                   <a href="javascript:void(0);" onclick="fn_show_sub('${masterClsf.clsfId}_clsf_sub','clsfSub'); return false;">${masterClsf.clsfNm }</a>
	                   <ul id="${masterClsf.clsfId}_clsf_sub" class="clsfSub" style="display:none;">
		                   <c:forEach var="dtlsClsf" items="${dtlsClsf}" varStatus="status">
		                        <c:if test="${masterClsf.clsfId eq dtlsClsf.upClsfId }">
		                           <li>
		                               ${dtlsClsf.clsfNm}
		                           </li>
		                       </c:if>
		                   </c:forEach>
	                   </ul>
                </li>
                <c:set var="count" value="${count+1 }" />
                </c:if>
            </c:forEach>
                <li><a href="javascript:void(0);" id="showMoreClsf" onclick="fn_show_more('showMoreClsf'); return false;">더 보기</a></li>
         </ul>
         <ul> <h3>생산년도</h3>
            <div>
                <input type="radio" name="createDate" value="allDate">전체<br>
                <input type="radio" name="createDate" value="date"><input type="text" placeholder="예)2017">~<input type="text" placeholder="예)2018"><br>
                (<input type="checkbox">미상포함)
                <a href="javascript:void(0);" onclick="selectCreateDate(); return false;">적용</a>
            </div>
         </ul>
         <ul> <h3>생산기관</h3>
         </ul>
    </div>
    <input type="text" name="articleNo" id="articleNo" value="" title="선택글번호" readonly />
</form>
</body>
</html>
