<%
/**
 * <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() {
	 fn_setPageTitle("${pageTitle}");
     // 메시지 표출 
     if(!gfn_isEmpty('${message}')) {
         alert("${message}");
     }
     //초기 자료 조회 
     fn_searchArticle();
     
     $("#mngOrgCd").on('change',function() {
    	 fn_searchArticle(1);
     });
 }); // document ready

 function selectAll(){
        if($("#allChk").prop("checked") == false)
        {
            $("#allChk").prop("checked", true);
            selectAllChk();
        }else if($("#allChk").prop("checked") == true)
        {
            $("#allChk").prop("checked", false);
            selectAllChk();
        }
    }
 function chkCount()
 {
	 $("input:checkbox[name = 'interestChk']").each(function() {
		if($(this).prop("checked") == false)
		{
			$("#allChk").prop("checked", false);	    			
		}
	 });
	 $("#appCntMo").text($("input:checkbox[name=interestChk]:checked").length);
 }
 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']").prop("checked", false);
     }else if($("#allChk").is(":checked") == true)
     {
         $("input:checkbox[name = 'interestChk']").prop("checked", true);
     }
     chkCount();
 }
 
//상세보기
 function goDetail(masterId){
     $("#masterId").val(masterId);
     $("#interestlistForm").attr("action", "/search/searchItemDetail.do");
     $("#interestlistForm").attr("target", "_blank");
     $("#interestlistForm").submit();
 }
 
 // 그리드 데이터 조회 호출 
 function fn_searchArticle(pageIndex) {
     
     if(gfn_isEmpty(pageIndex)) pageIndex = $("#pageIndex").val();
     if(gfn_isEmpty(pageIndex)) pageIndex = "1";
     $("#pageIndex").val(pageIndex);
     
     var reqUrl = "${pageContext.request.contextPath}/interest/listInterestsAjax.do";
     var inputData = {
               "pageIndex"  : $("#pageIndex").val()
             , "pageSize"   : $("#pageSize").val()
             , "mngOrgCd"   : $("#mngOrgCd").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);
         }
         $( "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> (<span id=\"appCntMo\">" + 0 + "</span>/<span>" + $("#itemsCount").text() + "</span>)</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\" onclick=\"deleteInterests('multiple','');\">선택삭제</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);
         
         if(!jsonObj.data || jsonObj.data.length <= 0 ) {
              $("div.list-data li.no-result").show();
         } else {
              $("div.list-data li.no-result").hide();
             // 출력
             $.each(jsonObj.data,function(key,obj) {
                 var t_data = "";
                 t_data += "<div class=\"img\"><a href=\"javascript:void(0)\" onclick=\"goDetail('" + obj.masterId + "');\"><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=\"#\" onclick=\"goDetail('" + obj.masterId + "');\">" + obj.title + "</a></div>"
                 t_data += "<div class=\"code\">"
                 if(!gfn_isEmpty(obj.mngtNo))
                 {
                         t_data += obj.mngtNo
                 }
                 t_data += "</div>"
                 
                 t_data += "<div class=\"subject\">"
                 
            	 t_data += "<span>자료유형 : "
                 if(!gfn_isEmpty(obj.typeCodeNm)){
                     t_data += obj.typeCodeNm
                 }
                 if(!gfn_isEmpty(obj.typeCodeNm) && !gfn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += " &#62; "
                 }
                 if(gfn_isEmpty(obj.typeCodeNm) && gfn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += "-"
                 }
                 if(!gfn_isEmpty(obj.dtlsTypeDivNm)){
                     t_data += obj.dtlsTypeDivNm
                 }
                 t_data += "</span>"

                 t_data += "<span>주제분야 : "
                 if(!gfn_isEmpty(obj.subjectNmUp)){
                	 t_data += obj.subjectNmUp
                 }
                 if(!gfn_isEmpty(obj.subjectNmUp) && !gfn_isEmpty(obj.subjectNm)){
                	 t_data += " &#62; "
                 }
                 if(gfn_isEmpty(obj.subjectNmUp) && gfn_isEmpty(obj.subjectNm)){
                     t_data += "-"
                 }
                 if(!gfn_isEmpty(obj.subjectNm)){
                	 t_data += obj.subjectNm
                 }
                 t_data += "</span>"
             
                 t_data += "<span>생산기관 : "
               	 if(!gfn_isEmpty(obj.orgNm)){
               		t_data += obj.orgNm
                 }else{
                	 t_data += "-" 
                 }
                 t_data += "</span>"
                 
                 t_data += "<span>생산년도 : "
             	 if(!gfn_isEmpty(obj.creatYyyy)){
             		t_data += obj.creatYyyy
                 }else{
                	 t_data += "-" 
                 }
                 t_data += "</span>"
                 t_data += "</div>"
                 
                 var t_btn  = "";
                 
                 //대출, 방문 가능여부
                 if(obj.ableRentAppNow == true)
                 {
                        t_btn +="<div>대출신청 가능</div>";      
                 }else if(obj.ableRentAppNow == false && obj.ableRentResNow == true)
                 {
                        t_btn +="<div>대출예약 가능</div>";
                 }else if(obj.ableRentNow == false)
                 {
                        t_btn +="<div class='imposs'>대출신청/예약 불가</div>"; 
                 }
                 if(obj.ableReadNow == true)
               	 {
                	    t_btn +="<div>방문열람신청 가능</div>";
               	 }else if(obj.ableReadNow == false)
           		 {
               	        t_btn +="<div class='imposs'>방문열람신청 불가</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 btn-ris\" onclick=\"gfn_showRis('" + obj.masterId +"');\">RIS</button>";
                 
                 var div = $(document.createElement('div'));
                 div.attr('class','list');
                 div.append($('<div />').attr('class', 't-chk').html("<label for=\"interestChk_" + obj.mbInterestId + "\" style=\"display:none;\">단일 체크</label><input type='checkbox' onClick='chkCount();' id='interestChk_" + obj.mbInterestId + "' 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);
                 
             });
         }
         
         gfn_makePaging("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">${pageTitle} 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="location-box">
                    <ul class="loc">
                        <li>HOME</li>
                        <li>마이페이지</li>
                        <li class="on">${pageTitle}</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">
                <form name="interestlistForm" id="interestlistForm" method="post" action="">
	                <div class="data-box">
	                    <input type="hidden" id="masterId" name="masterId">
	                    <input type="hidden" id="title" name="title">
	                    <input type="hidden" id="pageIndex" name="pageIndex">
	                      <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>
            </form>
    </div>
</div>
</div>