<%
/**
 * <pre>
 * @Class Name : selectItemInfo.jsp
 * 
 * @Description : 소장자료 상세내용을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 30.    JSYOO       최초 생성
 * @ 2021.10. 28.    KNKIM       대출예약, 방문열람신청, 카트담기 연결 처리 
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 30.
 * @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" %>
<script src="/js/qrcode.js"></script>

<c:set var="pageTitle">자료 상세</c:set>
<script>
$(document).ready(function(){
    //로그
    $.ajax({
        type: "post",
        url: "/search/InsertDataInquiryLog.ajax",
        data: {"masterId" : '<c:out value="${result.masterId}"/>'}
    }).done(function(response){
    });
    
})


//다른자료 상세보기
function goDetail(masterId){
    $("#masterId").val(masterId);
    document.referenceDetailForm.action="/search/searchItemDetail.do";
    document.referenceDetailForm.submit();
}

function goList(){
    document.referenceDetailForm.action="/search/searchList.do";
    document.referenceDetailForm.submit();
}

</script>
<div class="wrap">
    <!-- 소장자료 상세페이지 섹션 -->
    <div class="data detail">
        <form id="referenceDetailForm" name="referenceDetailForm" method="post">
        <input type="hidden" name="collection" id="collection" value="<c:out value='${searchVO.collection}'/>" /> 
        <input type="hidden" name="pageIndex" title="페이지번호" value="${searchVO.pageIndex }" /> 
        <input type="hidden" name="pageSize" value="${searchVO.pageSize }" /> 
        
        <input type="hidden" name="filter_creatYyyy" value='${searchVO.filter_creatYyyy}' />
        <input type="hidden" name="creatYyyyYn" value='${searchVO.creatYyyyYn}' />
        
        <input type="hidden" name="filter_class" value="<c:out value='${searchVO.filter_class}'/>" />
        <input type="hidden" name="filter_category" value="<c:out value='${searchVO.filter_category}'/>"/>
        <input type="hidden" name="filter_agency" value="<c:out value='${searchVO.filter_agency}'/>"/>
        <input type="hidden" name="filter_mylist" value="<c:out value='${searchVO.filter_mylist}'/>"/>
        <input type="hidden" name="reQueryChk" value="<c:out value='${searchVO.reQueryChk}'/>"/>
        <input type="hidden" name="query" value="<c:out value='${searchVO.query}'/>"/>
        <input type="hidden" name="reQuery" value="<c:out value='${searchVO.reQuery}'/>"/>
        <input type="hidden" name="bookIndex" value="<c:out value='${searchVO.bookIndex}'/>"/>
        <input type="hidden" name="mngtNo" value="<c:out value='${searchVO.mngtNo}'/>"/>
        <input type="hidden" name="createStartDate" value="<c:out value='${searchVO.createStartDate}'/>"/>
        <input type="hidden" name="createEndDate" value="<c:out value='${searchVO.createEndDate}'/>"/>
        <input type="hidden" name="ageCode" value="<c:out value='${searchVO.ageCode}'/>"/>
        <input type="hidden" name="collectionList" value="<c:out value='${searchVO.collectionList}'/>"/>
        <input type="hidden" name="realQuery" value="<c:out value='${searchVO.realQuery}'/>"/>
        <input type="hidden" id="masterId" name="masterId" value="" />
         
        <h2 class="blind">소장자료 상세페이지 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="center">
                    <div class="left">
                        <div class="cla">
                            <div class="con-1">
                                <c:if test="${!empty result.openDivCd && result.openDivCd ne '3' && result.operReadRangeCd eq '01' && result.digitalReadYn eq 'Y'}">
                                   <span class="online">온라인열람</span>
                                </c:if>
                                <c:if test="${!empty result.openDivCd && result.openDivCd ne '3' && !empty result.operOutRangeCd && result.operOutRangeCd ne '02'}">
                                   <span class="loan">대출</span>
                                </c:if>
                                <c:if test="${!empty result.openDivCd && result.openDivCd ne '3' && !empty result.operReadRangeCd && result.operReadRangeCd ne '03'}">
                                   <span class="visit">방문열람</span>
                                </c:if>
                                <c:if test="${!(!empty result.openDivCd && result.openDivCd ne '3') && !(result.operReadRangeCd eq '01' && result.digitalReadYn eq 'Y') && !(!empty result.operOutRangeCd && result.operOutRangeCd ne '02') && !(!empty result.operReadRangeCd && result.operReadRangeCd ne '03') }">
                                   <span class="etc">기타</span>
                                </c:if>
                            </div>
                            <div class="con-2">
                                <span class="code"><c:out value="${result.mngtNo}"/></span>
                            </div>
                        </div>
                        <div class="tit"><c:out value="${result.title}"/></div>
                        <div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="썸네일"></div>
                    </div>
                    <div class="right">
                        <div class="con-1">
                        <!-- 원문보기는 모바일에서만 -->
                            <button type="button" class="original">원문보기</button>
                        <c:if test="${(!empty result.openDivCd) && (result.openDivCd ne '3') && (!empty result.interfaceId) && result.digitalReadYn eq 'Y'}">
                            <button type="button" class="view" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
                        </c:if>
                            <button type="button" class="ris" onclick="risShow('<c:out value="${result.masterId}"/>');">RIS</button>
                        <c:if test='${result.MUseYn == "Y"}'>
                            <button type="button" class="favorit" onclick="fn_changeInterestBtn('${result.masterId }', 'off');">즐겨찾기</button>
                        </c:if>
                        <c:if test='${result.MUseYn != "Y"}'>
                            <button type="button" class="favorit" onclick="fn_changeInterestBtn('${result.masterId }', 'on');">즐겨찾기</button>
                        </c:if>
                        <c:if test="${(!empty result.openDivCd) && (result.openDivCd ne '3') && (!empty result.interfaceId) && result.digitalReadYn eq 'Y'}">
                            <button type="button" class="share" data-curl="${pdfUri}<c:out value="${result.interfaceId}"/>">공유</button>
                        </c:if>
                        </div>
                        <div class="con-2">
                            <div class="de-data">
                                <ul>
                                    <li>
                                        <span>자료유형</span>
                                        <span>
                                                <c:out value="${result.typeCodeNm}"/>
                                                <c:choose>
                                                    <c:when test="${!empty result.typeCodeNm or !empty result.dtlsTypeDivNm}">
                                                        <c:choose>
                                                            <c:when test="${!empty result.typeCodeNm and !empty result.dtlsTypeDivNm}">
                                                                &#62;
                                                            </c:when>
                                                         </c:choose>
                                                    </c:when>
                                                    <c:otherwise>
                                                        -
                                                    </c:otherwise>
                                                </c:choose> 
                                                <c:out value="${result.dtlsTypeDivNm}"/>
                                        </span>
                                    </li>
                                    <li>
                                        <span>연대</span>
                                        <span>
                                            <c:if test="${!empty result.chronologicalCodeStartNm}"><c:out value="${result.chronologicalCodeStartNm}"/>년부터 </c:if>
                                            <c:if test="${!empty result.chronologicalCodeEndNm}"><c:out value="${result.chronologicalCodeEndNm}"/>까지</c:if>
                                            <c:if test="${empty result.chronologicalCodeStartNm and empty result.chronologicalCodeEndNm }">-</c:if>
                                        </span>
                                    </li>
                                    <li>
                                        <span>주제분야</span>
                                        <span>
                                            <c:out value="${result.subjectNmUp}"/>
                                                <c:choose>
                                                    <c:when test="${!empty result.subjectNmUp or !empty result.subjectNm}">
                                                        <c:choose>
                                                            <c:when test="${!empty result.subjectNmUp and !empty result.subjectNm}">
                                                                &#62;
                                                            </c:when>
                                                         </c:choose>
                                                    </c:when>
                                                    <c:otherwise>
                                                        -
                                                    </c:otherwise>
                                                </c:choose> 
                                             <c:out value="${result.subjectNm}"/>
                                        </span>
                                    </li>
                                    <li>
                                        <span>저자</span>
                                        <span><c:if test="${empty result.bookAuthor}">-</c:if><c:out value="${result.bookAuthor}"/></span>
                                    </li>
                                    <li>
                                        <span>생산기관</span>
                                        <span><c:if test="${empty result.orgNm}">-</c:if><c:out value="${result.orgNm}"/></span>
                                    </li>
                                    <li>
                                        <span>출판사</span>
                                        <span><c:if test="${empty result.bookPublisher}">-</c:if><c:out value="${result.bookPublisher}"/></span>
                                    </li>
                                    <li>
                                        <span>생산년도</span>
                                        <span><c:if test="${empty result.creatYyyy}">-</c:if><c:out value="${result.creatYyyy}"/></span>
                                    </li>
                                    <li>
                                        <span>발간유형</span>
                                        <span><c:if test="${empty result.bookPlbcTypeNm}">-</c:if><c:out value="${result.bookPlbcTypeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>테마</span>
                                        <span><c:if test="${empty result.themeCodeNm}">-</c:if><c:out value="${result.themeCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>발간매체</span>
                                        <span><c:if test="${empty result.bookPlbcMda}">-</c:if><c:out value="${result.bookPlbcMda}"/></span>
                                    </li>
                                    <li>
                                        <span>시대</span>
                                        <span><c:if test="${empty result.ageCodeNm}">-</c:if><c:out value="${result.ageCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>청구기호</span>
                                        <span><c:if test="${empty result.bookCallNo}">-</c:if><c:out value="${result.bookCallNo}"/></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="b-btn">
                                <button type="button" class="btn btn-color" onclick="gfn_rentItem('${result.mngOrgCd}', '${result.masterId}')">대출예약</button>
                                <button type="button" class="btn btn-green" onclick="gfn_reserveReadItem('${result.mngOrgCd}', '${result.masterId}')">방문열람신청</button>
                                <button type="button" class="btn btn-orange" onclick="fn_addRentCart('${result.masterId}', '${result.useStatus}')">카트담기</button>
                            </div>
                            <c:if test="${fn:length(keywordList) > 0 }">
                                <div class="keyword">
                                    <span class="first">키워드</span>
                                    <c:forEach var="keyword" items="${keywordList }">
                                    <span><c:out value="${keyword}"/></span>
                                    </c:forEach>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contents row-bottom">
                <div class="con-1">
                    <div class="list-box">
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-use.png" alt="이용상태 아이콘"></div>
                            <div class="title">이용상태</div>
                            <div class="con"><c:out value="${result.useStatusNm}"/> <span>(대기자 <c:out value="${result.awaiterCnt}"/>명)</span></div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-return.png" alt="달력 아이콘"></div>
                            <div class="title">반납예정일</div>
                            <div class="con"><span><c:out value="${result.rtnExpctDd}"/></span></div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-loan.png" alt="대출 아이콘"></div>
                            <div class="title">대출</div>
                            <div class="con">
                                <c:if test="${result.bookLentPsblYn eq 'Y' && result.rsrvPsblYn eq 'Y'}"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.bookLentPsblYn eq 'N' && result.rsrvPsblYn eq 'Y' }"><span class="poss">예약가능</span></c:if>
                                <c:if test="${result.bookLentPsblYn ne 'Y' && result.rsrvPsblYn ne 'Y'}"><span class="imposs">신청/예약불가</span></c:if>
                            </div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-visit.png" alt="방문 아이콘"></div>
                            <div class="title">방문열람</div>
                            <div class="con">
                                <c:if test="${result.reqPsblYn eq 'Y' }"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.reqPsblYn ne 'Y' }"><span class="imposs">신청불가</span></c:if>
                            </div>
                        </div>
                    </div>
                    <div class="text-box">
                        <p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
                        <p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
                    </div>
                </div>
                
                <div class="con-2">
                    <div class="top">
                        <h3><span>목차</span>정보</h3>
                        <button type="button" class="down-btn">down-btn</button>
                    </div>
                    <div class="bottom h-down">
                        <p><c:if test="${empty result.bookIndex }">없음</c:if><c:out value="${result.bookIndex }"/></p>
                    </div>
                </div>
                
                <c:if test="${fn:length(seeTogetherListVO) > 0 }">
                <div class="con-3">
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper1">
                            <div class="top">
                                <h3><span>함께 볼만한</span>자료</h3>
                            </div>
                            <div class="swiper-wrapper">
                               <c:forEach var="result" items="${seeTogetherListVO}" varStatus="status">
                                <div class="swiper-slide">
                                    <div class="List" onclick="goDetail('${result.masterId}');">
                                        <div class="con-1">
                                            <div class="tit underline pink">${result.title }</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span><c:if test="${empty result.typeDivNm and empty result.dtlsTypeDivNm}">-</c:if> ${result.typeDivNm } <c:if test="${!empty result.typeDivNm and !empty result.dtlsTypeDivNm}">&gt;</c:if>${result.dtlsTypeDivNm}</span></p>
                                            <p class="sub"><span>주제분야</span><span><c:if test="${empty result.subjectNmUp and empty result.subjectNm}">-</c:if> ${result.subjectNm } <c:if test="${!empty result.subjectNmUp and !empty result.subjectNm}">&gt;</c:if>${result.subjectNm}</span></span></p>
                                            <p class="age"><span>생산기관</span><span><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</span></p>
                                            <p class="yea"><span>생산년도</span><span><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</span></p>
                                        </div>
                                    </div>
                                </div>
                                </c:forEach>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
                </c:if>
            </div>
            
            <div class="row-bottom">   
                <c:if test="${fn:length(similarListVO) > 0 }">
                <div class="con-4">
                    <div class="top">
                        <h3><span>이 자료와 유사한</span>자료</h3>
                        <p><strong>“ <c:forEach items="${mngOrgList }" var="list" varStatus="status"><c:if test="${status.count ne 1}"> ,</c:if>${list }</c:forEach> ”</strong> 에 있습니다</p>
                    </div>
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper2">
                            <div class="swiper-wrapper items cover">
                                <c:forEach var="result" items="${similarListVO}" varStatus="status">
                                <div class="swiper-slide">
                                    <div class="List" onclick="gfn_getDetail('${result.masterId}','${result.domainHostNm }');">
                                        <div class="inner">
                                            <div class="thumbnail">
                                                <span class="image-frame"><img src="${result.rprsThumbUrlWithDefaultMiddle }" alt=""/></span>
                                                <div class="detail-cover">
                                                    <strong>${result.title }</strong>
                                                    <ul>
                                                        <li><em>주제유형</em><c:if test="${empty result.typeDivNm}">-</c:if>${result.typeDivNm }</li>
                                                        <li><em>주제분야</em><c:if test="${empty result.subjectNmUp}">-</c:if>${result.subjectNmUp }</li>
                                                        <li><em>생산기관</em><c:if test="${empty result.orgNm }">-</c:if>${result.orgNm }</li>
                                                        <li><em>생산년도</em><c:if test="${empty result.creatYyyy }">-</c:if>${result.creatYyyy }</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </c:forEach>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
                </c:if>
                <div class="btn-box">
                    <button type="button" class="btn btn-black" onclick="goList();">목록으로</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>

<div class="popup pop-sharing" id="div_pop-sharing" style="display:none;">
    <div class="pop-wrap">
        <div class="sharing-bg">
            <p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
            <button class="btn-close-pop">닫기</button>
            <ul class="sns-list">
                <li class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" data-sType="4" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></li>
                <li class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" data-sType="3" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></li>           
                <li class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" data-sType="1" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></li>
                <li class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" data-sType="2" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></li>
            </ul>
            <div class="link-copy">
                <label for="p_link-copy" style="display:none;">link</label><input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
                <button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
            </div>
        </div>
        <div class="Qr">
            <div class="inner">
                <div id="qrcode" class="Qrimg"><img src="/images/img/img-QR.jpg" alt="QR코드 이미지"></div>
                <div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
            </div>
        </div>
    </div>
</div>


<script>
/* 함께 볼만한자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper1", {
    loop: true,
    slidesPerView: 4,
    spaceBetween: 30,
    centeredSlides: false,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
/* 유사한 자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper2", {
    loop: true,
    slidesPerView: 5,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 1112500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
</script>