<%
/**
 * <pre>
 * @Class Name : listInterests.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>

<script>
 
 $( document ).ready(function() {
     
     // 메시지 표출 
     if(!fn_isEmpty('${message}')) {
         alert("${message}");
     }
     //초기 자료 조회 
     fn_searchArticle();
     
 }); // document ready

 function selectAll(){
        if($("#allChk").is(":checked") == false)
        {
            $("#allChk").attr("checked", true);
            selectAllChk();
        }else if($("#allChk").is(":checked") == true)
        {
            $("#allChk").attr("checked", false);
            selectAllChk();
        }
    }
 function deleteInterests(type,masterId){
        var masterIdArray = [];
        
        <% //체크박스를 이용한 삭제 %>
        if(type=="multiple")
        {
            if($("input:checkbox[name=interestChk]:checked").length==0)
            {
              alert("선택된 관심자료가 없습니다.");
              return false;
            }
             $("input:checkbox[name=interestChk]").each(function(){
                    if($(this).is(":checked") == true) {
                        masterIdArray.push($(this).val());
                    }
            });
        }
        else if(type=="single")
        {
            <% //관심버튼을 이용한 삭제 %>
            masterIdArray.push(masterId);
        }
        
        if(confirm("삭제하시겠습니까?"))
        {
            $.ajax({
                   url : "${pageContext.request.contextPath}/interest/deleteInterests.ajax",
                   type : "POST",
                   async: false,
                   data : {"masterIdList" : masterIdArray},
                   success : function(){
                       alert("선택하신 관심자료가 삭제되었습니다.");
                       fn_searchArticle($("#pageSize").val(), 1);
                       
                   },error : function(){
                   }
               });
        }
    }
 
 <% //체크박스로 전체선택 %>
 function selectAllChk(){
     if($("#allChk").is(":checked") == false)
     {
         $("input:checkbox[name = 'interestChk']").attr("checked", false);
     }else if($("#allChk").is(":checked") == true)
     {
         $("input:checkbox[name = 'interestChk']").attr("checked", true);
     }
 }
 // 그리드 데이터 조회 호출 
 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}/interest/listInterestsAjax.do";
     
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").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(jsonObj.itemsCount == undefined) {
             $("#itemsCount").text("0");
         }
         else {
             $("#itemsCount").text(jsonObj.itemsCount);
         }
         if(!jsonObj.data || jsonObj.data.length <= 0 ) {
              $("div.list-data li.no-result").show();
         } else {
              $("div.list-data li.no-result").hide();
             
              $( "div.list-data").empty();
              var t_title = ""; 
              t_title += "<div class=\"list t-tit-line\">"
              t_title += "<div class=\"t-chk\"><label for=\"allChk\" style=\"display:none;\">전체 체크</label><input type=\"checkbox\" id=\"allChk\" onclick=\"selectAllChk();\"><span class=\"mo-ver\"><strong>전체선택</strong> (3/3)</span></div>"
              t_title += "<div class=\"t-cultural t-mo\">문화원</div>"
              t_title += "<div class=\"t-data t-mo\">자료정보</div>"
              t_title += "<div class=\"t-btn t-mo\">이용</div>"
              t_title += "<div class=\"t-delete mo-ver\">선택삭제</div>"
              t_title += "</div>"
              t_title += "<li class=\"no-result\" style=\"display:none;\">"
              t_title += "<span>검색결과가 없습니다.</span>"
              t_title += "</li>"
              
           	  $( "div.list-data").append(t_title);
             // 출력
             $.each(jsonObj.data,function(key,obj) {
                 var t_data = "";
                 t_data += "<div class=\"img\"><a><img src=\"" + obj.rprsThumbUrlWithDefaultSmall + "\" alt=\"썸네일\"></a>";
                 t_data += "<span id=\"favorites_" + obj.masterId + "\" class=\"favorites\" onclick=\"deleteInterests('single','" + obj.masterId + "');\"><img src=\"/images/icon/icon-cart-Favorites-on.png\" class=\"off\" alt=\"즐겨찾기 아이콘\"><img src=\"/images/icon/icon-cart-Favorites.png\" class=\"on\" alt=\"즐겨찾기 아이콘\"></span></div>";
                 t_data += "<div class=\"type\">"
                 if(obj.ableOnline)
                 {
                     t_data += "<span class=\"online\">온라인열람</span>" 
                 }
                 if(obj.ableRent)
                 {
                     t_data += "<span class=\"loan\">대출</span>" 
                 }
                 if(obj.ableRead)
                 {
                     t_data += "<span class=\"visit\">방문열람</span>" 
                 }
                 if(obj.ableOther)
                 {
                     t_data += "<span class=\"etc\">기타</span>" 
                 }
                 t_data += "</div>"
                 t_data += "<div class=\"title\"><a href=\"#\">" + obj.title + "</a></div>"
                 t_data += "<div class=\"code\">"
                 if(!fn_isEmpty(obj.mngtNo))
                 {
                         t_data += obj.mngtNo
                 }
                 t_data += "</div>"
                 
                 t_data += "<div class=\"subject\">"
                 
            	 t_data += "<span>자료유형 : "
                 if(!fn_isEmpty(obj.typeCodeNm)){
                     t_data += obj.typeCodeNm
                 }
                 if(!fn_isEmpty(obj.typeCodeNm) && !fn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += " &#62; "
                 }
                 if(fn_isEmpty(obj.typeCodeNm) && fn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += "-"
                 }
                 if(!fn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += obj.dtlsTypeDivNm
                 }
                 t_data += "</span>"

                 t_data += "<span>주제분야 : "
                 if(!fn_isEmpty(obj.subjectNmUp)){
                	 t_data += obj.subjectNmUp
                 }
                 if(!fn_isEmpty(obj.subjectNmUp) && !fn_isEmpty(obj.subjectNm)){
                	 t_data += " &#62; "
                 }
                 if(fn_isEmpty(obj.subjectNmUp) && fn_isEmpty(obj.subjectNm)){
                     t_data += "-"
                 }
                 if(!fn_isEmpty(obj.subjectNm)){
                	 t_data += obj.subjectNm
                 }
                 t_data += "</span>"
             
                 t_data += "<span>생산기관 : "
               	 if(!fn_isEmpty(obj.orgNm)){
               		t_data += obj.orgNm
                 }else{
                	 t_data += "-" 
                 }
                 t_data += "</span>"
                 
                 t_data += "<span>생산년도 : "
             	 if(!fn_isEmpty(obj.creatYyyy)){
             		t_data += obj.creatYyyy
                 }else{
                	 t_data += "-" 
                 }
                 t_data += "</span>"
                 t_data += "</div>"
                 
                 var t_btn  = "";
                 
                 //대출, 방문 가능여부
                 if(!fn_isEmpty(obj.operOutRangeNm) && !fn_isEmpty(obj.operReadRangeNm))
                 {
                        t_btn +="<div>" + obj.operOutRangeNm + "</div>" + "<div>" + obj.operReadRangeNm + "</div>";      
                 }else if(!fn_isEmpty(obj.operOutRangeNm) || !fn_isEmpty(obj.operReadRangeNm))
                 {
                        t_btn +="<div>" + obj.operOutRangeNm + obj.operReadRangeNm + "</div>";
                 }
                 if(obj.ableOnline)
                 {
                     t_btn+= "<button type=\"button\" class=\"btn-color\" onclick=\"gfn_showDocPdf('" + obj.interfaceId + "','" + obj.masterId + "','" + obj.typeDivCd + "','" + obj.dtlsTypeDivCd + "');\">원문보기</button>";     
                 }
                 t_btn+= "<button type=\"button\" class=\"btn-gray\" onclick=\"risShow('" + obj.masterId +"');\">RIS</button>";
                 
                 var div = $(document.createElement('div'));
                 div.attr('class','list');
                 div.append($('<div />').attr('class', 't-chk').html("<label for=\"interestChk\" style=\"display:none;\">단일 체크</label><input type='checkbox' id='interestChk' name='interestChk' value=" + obj.masterId + ">"));
                 div.append($('<div />').attr('class', 't-cultural').html("[" +obj.mngOrgNm +"]"));          
                 div.append($('<div />').attr('class', 't-data').html(t_data));
                 div.append($('<div />').attr('class', 't-btn bt nomagin').html(t_btn));
                 
                 $( "div.list-data").append(div);
                 
             });
         }
         
         pageLoad("fn_searchArticle", jsonObj.pagingPageIndex, jsonObj.pagingTotRecordCount, jsonObj.pagingStartPage, jsonObj.pagingEndPage, jsonObj.pagingLastPage); 

     }).fail(function (jqXHR, textStatus, errorThrown) {
         alert("조회에 실패하였습니다. 관리자에게 문의 바랍니다.");
     });
 }
 
 </script>

    <!-- 관심자료 섹션 -->
    <div class="location interested-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">관심자료</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="data-box">
                    <input type="hidden" id="masterId" name="masterId">
                    <input type="hidden" id="title" name="title">
                      <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="deptList" items="${deptList }">
                                        <option value="${deptList.orgCd }" >${deptList.deptNm }</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                      </div>  
                        <div class="list-data-wrap">
                            <div class="list-data">
                            </div>
                            <ul id="paging" class="paging"></ul>
                            <div class="btn-box">   
                                <div class="left">
                                    <input type="button" class="btn btn-black" value="전체선택" onclick="selectAll();"  />
                                    <input type="button" class="btn btn-gray" value="선택삭제" onclick="deleteInterests('multiple','');" />
                                </div>
                            </div>
                        </div>
            </div>
    </div>
</div>
</div>