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

<!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());
    
     $("input:checkbox").on('change', function() {
        if ( $(this).prop('checked') )
        {
            $(this).parent().parent(".depth-1").parent().children(".depth-2").css("display","block");
        }
        else{
            $(this).parent().parent(".depth-1").parent().children(".depth-2").css("display","none"); 
        }
        }); 
    
}; // 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);
    $("#referencelistForm").attr("action", "${pageContext.request.contextPath}/collection/selectItemInfo.do");
    $("#referencelistForm").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()
           };
}

</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="referencelistForm" id="referencelistForm" 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>
            <dl>
                <dt class="blind">검색결과 안내</dt>
                <dd>
                    <em>'${searchVO.realQuery}'</em>에 대한 검색결과는 총 <strong><fmt:formatNumber
                            value="${reference.totalCount}" pattern="#,###" /></strong>건 입니다.
                </dd>
            </dl>
        </div>
        <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>
        <div style="text-align: left;">
            <div id="searchMenu"
                style="display: inline-block; width: 200px; margin-top: 5px; vertical-align: top;">
                <ul>
                    <h3>자료유형</h3>
                    <li>
                        <div class="depth-1">
                            <%--  <div class="check"><input type="checkbox" id="data-type-chk" /><label for="data-type-chk">전체(<span>${second_class_cate.totalCount}</span>)</label></div> --%>
                            <div class="check">
                                <input type="checkbox" id="data-type-chk" disabled="disabled" /><label
                                    for="data-type-chk">전체(<span><c:choose>
                                            <c:when test="${empty  second_class_cate}">0</c:when>
                                            <c:otherwise>${second_class_cate.totalCount}  </c:otherwise>
                                        </c:choose></span>)
                                </label>
                            </div>
                        </div>
                    </li>
                    <c:forEach var="firstClassList" items="${firstClassList}"
                        varStatus="fcStatus">
                        <li
                            <c:if test ="${fcStatus.index >= 4}"> class="showMoreType" style="display:none;" </c:if>>
                            <div
                                class="depth-1 <c:if test="${fn:contains(searchVO.filter_class, firstClassList.column1) }"> on</c:if>">
                                <div class="check">
                                    <input type="checkbox" value="${firstClassList.column1}"
                                        name="first_class" id="data-type-chk${fcStatus.index+1}"
                                        <c:if test="${fn:contains(searchVO.first_class, firstClassList.column1) }">checked="checked"</c:if> /><label
                                        for="data-type-chk${fcStatus.index+1}">${firstClassList.sCodeNm}(<span>0</span>)
                                    </label>
                                </div>
                            </div>
                            <ul class="depth-2" style="display: none;">
                                <c:forEach var="secondClassList" items="${secondClassList}"
                                    varStatus="seStatus">
                                    <c:if
                                        test="${firstClassList.column1 eq secondClassList.column2 }">
                                        <li>
                                            <div class="check">
                                                <input type="checkbox" value="${secondClassList.sCodeId}"
                                                    name="second_class"
                                                    id="data-type-chk${fcStatus.index+1}-${seStatus.index+1}"
                                                    <c:if test="${fn:contains(searchVO.second_class, secondClassList.sCodeId) }">checked="checked"</c:if> /><label
                                                    for="data-type-chk${fcStatus.index+1}-${seStatus.index+1}">${secondClassList.sCodeNm}(<span>0</span>)
                                                </label>
                                            </div>
                                        </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>
            <div style="display: inline-block;">
                <table id="itemList">
                    <tr>
                       <th style='width:800px;'>자료정보</th>"
                       <th style='width:200px;'>이용</th>"
                     </tr>
                  <c:forEach var="result" items="${reference.searchResultList}">
                     <tr>
                        <td>
                            <c:if test="${!empty result.MAIN_IMG}"><!-- 썸네일이 있는 경우 -->
                                <img src="${result.MAIN_IMG}" style="width:150px;height:200px;" alt="${result.TITLE}" />
                                <c:if test="${!empty result.COPYRIGHT and result.COPYRIGHT ne ''}"><p class="source-origin">출처:${result.COPYRIGHT}</p></c:if>
                            </c:if>
                            <span class="tit-txt">[${result.FIRST_CLASS_NM}]<c:out value="${result.TITLE}"/></span><br>
                            <c:if test="${!empty result.FIRST_CLASS_NM}"><em><%--자료유형 : --%>자료유형 : </em>${result.FIRST_CLASS_NM} <c:if test="${!empty result.SECOND_CLASS_NM}">&gt; ${result.SECOND_CLASS_NM}</c:if></c:if>
                            <c:if test="${!empty result.FIRST_CATEGORY_NM}"><em><%--주제분야 : --%>주제분야 : </em>${result.FIRST_CATEGORY_NM} <c:if test="${!empty result.SECOND_CATEGORY_NM}">&gt; ${result.SECOND_CATEGORY_NM}</c:if></c:if>
                            <c:if test="${!empty result.PUBLISHER}">| 생산기관 : ${result.PUBLISHER}</c:if>
                            <c:if test="${(!empty result.GENYEAR) && (result.GENYEAR ne '0')}">| 생산년도 : ${result.GENYEAR}</c:if>
                            <br>
                            <%-- <c:if test="${!empty result.COUNCIL_NM_TOT}"><li><em>소장처 : </em>${result.COUNCIL_NM_TOT}</li></c:if> --%>
                        </td>
                        <td>ttttt</td>
                     <tr>
                  </c:forEach>
                </table>
                <div id="paging" name="paging"
                    style="display: block; text-align: center;"></div>
            </div>
        </div>
        </div>
        <input type="text" name="articleNo" id="articleNo" value=""
            title="선택글번호" readonly />
    </form>
    <script>
//<![CDATA[
    
    //자료유형-카테고리 cnt세팅
    <c:forEach items="${first_class_cate.searchResultList}" var="result">
        $("#referencelistForm input:checkbox[name='first_class']").each(function (index, item) {
            if($(this).val() == "${result.first_class_nm}" ){
                $(this).next('label').children().text('<fmt:formatNumber value="${result.first_class_cnt}" pattern="#,###" />');
            }
        });
        
    </c:forEach>
    

    <c:forEach items="${second_class_cate.searchResultList}" var="result">
            $("#referencelistForm input:checkbox[name='second_class']").each(function (index, item) {
                var second_class_nm_arr = "${result.second_class_nm}".split("^");
                if($(this).val() == second_class_nm_arr[1] ){
                    $(this).next('label').children().text('<fmt:formatNumber value="${result.second_class_cnt}" pattern="#,###" />');
                }
            });
    </c:forEach>
    
    //주제분야-카테고리 cnt세팅
    <c:forEach items="${first_category_cate.searchResultList}" var="result">
        $("#referencelistForm input:checkbox[name='first_category']").each(function (index, item) {
            if($(this).val() == "${result.first_category_nm}" ){
                $(this).next('label').children().text('<fmt:formatNumber value="${result.first_category_cnt}" pattern="#,###" />');
            }
        });
        
    </c:forEach>
    

    <c:forEach items="${second_category_cate.searchResultList}" var="result">
            $("#referencelistForm input:checkbox[name='second_category']").each(function (index, item) {
                var second_class_nm_arr = "${result.second_category_nm}".split("^");
                if($(this).val() == second_class_nm_arr[1] ){
                    $(this).next('label').children().text('<fmt:formatNumber value="${result.second_category_cnt}" pattern="#,###" />');
                }
            });
    </c:forEach>
    
    //지방문화원-카테고리cnt 세팅
    <c:forEach items="${first_council_cate.searchResultList}" var="result">
        $("#referencelistForm [name='sido_name']").each(function (index, item) {
            if($(this).val() == "${result.first_council_nm}" ){
                $(this).next('label').children().text('<fmt:formatNumber value="${result.first_council_cnt}" pattern="#,###" />');
            }
        });
        
    </c:forEach>
    
    <c:forEach items="${second_council_cate.searchResultList}" var="result">
        $("#referencelistForm [name='sojang_council']").each(function (index, item) {       
            var second_class_nm_arr = "${result.second_council_nm}".split("^");
            if($(this).val() == second_class_nm_arr[1] ){
                $(this).next('label').children().text('<fmt:formatNumber value="${result.second_council_cnt}" pattern="#,###" />');
            }
        });
    </c:forEach>
    

     //fnLabel_reference();
    
     filterFn();
    
     fnLabel_reference_detail();
     

     //sido-tab height 유지
    $('div.depth-1.on').each(function () {
        if($(this).find('input').attr('name')  == 'sido_name') {
            $(".pop-culture-center .line-1").data("idx", "1");
            $(".pop-culture-center .line-2").data("idx", "2");
            $(".pop-culture-center .line-3").data("idx", "3");
            
            target = $(".pop-filter li.line-" + $(this).find('input').parents("li").data("idx") + "");
            size = $(this).find('input').parents("div.depth-1").next().outerHeight() + 50 ;
            $(".line-1 , .line-2, .line-3").attr("style" , ''); 
            target.css("height" , size );
        }else   if($(this).find('input').attr('name')  == 'first_class') {
            if($(this).find('input').val() != 'A' &&  $(this).find('input').val() != 'B' && $(this).find('input').val() != 'C'){
                 $('.filter .filter-class.btn-toggle-more').text('접기');
                 $('.filter .filter-class.btn-toggle-more').siblings('.filter-list').children('ul').children('li').css('display', 'block');
            }
        } 
        else if($(this).find('input').attr('name')  == 'first_category') {
            if($(this).find('input').val() != 'A' &&  $(this).find('input').val() != 'B' && $(this).find('input').val() != 'C' && $(this).find('input').val() != 'D'){
                 $('.filter .filter-category.btn-toggle-more').text('접기');
                 $('.filter .filter-category.btn-toggle-more').siblings('.filter-list').children('ul').children('li').css('display', 'block');
            }
        } 
    });     

    //mobileSearchResultTab();
//]]>
</script>
</body>
</html>
