/**需要引入的js與css檔案*/
<script src="${root}/js/jquery.min.js"></script>
<script src="${root}/js/vue.min.js"></script>
<script src="${root}/js/layer.js"></script>
<script src="${root}/js/dropload.min.js"></script>
<link rel="stylesheet" href="${root}/css/dropload.css">
<link rel="stylesheet" href="${root}/css/layer.css">

<input type="text" class="search-txt fr" id="txt" placeholder="" />
<button class="search-btn fr"></button>
<section class="num-bar">
    <div class="fl">搜尋到<span id="num"></span>個作品著作</div>
    <div class="fr">第<span id="currentPage"></span>/<span id="totalPage"></span>頁</div>
</section>
<section class="list-container">
    <article id="app" class="list-content" v-cloak v-for="i in result" name={{i.crwId}}>
	<p class="info-title">{{i.workTitle}}</p>
	<p class="info-p">型別：{{i.workType|workType}}</p>
	<p class="info-no">申請號：{{i.regNo}}</p>
	<p class="info-date">登記日期：{{i.createOn}}</p>
	<p class="info-date">完成日期：{{i.finishDate}}</p>
        <!-- <label v-if="i.caseStaffId!=''&&i.caseStaffId != null">期限：<em class="days_mark">{{i.caseStaffId}}</em>天提醒</label>
        <label v-else>期限：暫無期限資訊</label>   -->
     <label  v-show="i.caseStaffId != ''&&i.caseStaffId != null">期限：<em class="days_mark">{{i.caseStaffId}}</em>天提醒</label>
     <label  v-show="i.caseStaffId == ''||i.caseStaffId == null">暫無期限資訊</label> 
    </article>
</section>
<div id="msg" class="trade_content"></div>
<div id="dropload-load" class="dropload-load" style="display: none;position: fixed;bottom: 0px;width: 100%;-moz-opacity:0.6;filter:alpha(opacity=80);opacity:0.6;background: black;">
   <span class="loading"></span>載入中...
</div>
 

定義全域性變數
var vue=null;
var pageNum=1;
var pageSize=10;
var actionUrl="${root}/wechat/ips/copyright/"+pageSize+"/"+pageNum+".json";

//------上拉載入資料------Start-----
$(function() {
	window.onscroll = function () { 
		if (getScrollTop()+ getClientHeight() == getScrollHeight()&& $(".noCT").length==0) { 
			pageNum = pageNum+1;
			loadData();
		} 
	}
});
//------上拉載入資料------end-----

//初始化載入資料

$(function(){
    var data = {workTitle : null,};
    layer.open({type: 2,style: 'color:#ccc; border:none;'});
    $.post(actionUrl, data, function(e) {
        successinfo(e,false);
        $(".dropload-load").css('display','none');
        layer.closeAll(); 
    }, "json");
    
    toDetail();     //進入詳情頁
    VueFilter();
})

function loadData(){
    var data = {workTitle : $("#txt").val()};
    layer.open({type: 2,style: 'color:#ccc; border:none;'});
    $.post(actionUrl, data, function(e) {
        successinfo(e,true);
        $(".dropload-load").css('display','none');
        layer.closeAll(); 
    }, "json");
}

//successType true為載入疊加資料<用於載入下一頁> false為更新替換資料<用於重新搜尋> 
function successinfo(e,successType){
        var result_all=e.data;    
        //alert(JSON.stringify(result_all[0]))
        if(vue == null) {
            vue = new Vue({
                el: "#app",
                data: {
                    result: result_all
                }
            });
        } else {
            if(successType){
                vue._data.result = vue._data.result.concat(result_all);
            }else{
                vue._data.result = result_all;
            }
        }
        addMsg(e);
}

//載入msg提示的時候 如果沒有有下一頁在msg新增一個class<noCT> 這樣在監聽滾動條的時候判斷$(".noCT").length==0即可
function addMsg(e){
    if(!e.success){
        var label = $("<label>查詢異常！</label>");
        $("#msg").html(label);
        $("#msg").html(label).addClass("noCT");
        $("#num").html("0");
        $("#currentPage").html("1");
        $("#totalPage").html("1");
    }else{
        $("#num").html(e.total);
        $("#currentPage").html(e.pageNum);
        $("#totalPage").html(e.totalPages);
        if(e.total==0){
            $("#currentPage").html("1");
            $("#totalPage").html("1");
            var label = $("<label>非常抱歉！沒有找到相關搜尋結果！</label>").css('marginTop','2.5rem');
            $("#msg").html(label).addClass("noCT");
            return;
        }
        if(e.pageNum == e.totalPages || e.total<11){
            var label = $("<label>暫無更多內容</label>");
            $("#msg").html(label);
            $("#msg").html(label).addClass("noCT");
        } else{
            var a = $("<a></a>");
            //$(a).html("載入更多內容");
            $("#msg").html(a);
            $("#msg").html(a).removeClass("noCT");
        }
    }
}

//重新搜尋的時候 pageNum要重置為1
$('.search-btn').click(function(){
    pageNum=1;
    var txt=$("#txt").val();
    var data={workTitle : txt};
    layer.open({type: 2,style: 'color:#ccc; border:none;'});
    actionUrl="${root}/wechat/ips/copyright/10/"+pageNum+".json";
    $.post(actionUrl, data, function(e) {
        successinfo(e,false);
        $(".dropload-load").css('display','none');
        layer.closeAll(); 
    }, "json");
})

function toDetail(){
    $('body').on("click", "#app", function(e) {
        var id = $(this).attr("name");
        location.href = "${root}/wechat/ips/details/copyright.htm?crwId="+id;
    })
}

function vueFilter(){
    Vue.filter("workType", function(str) {
        if(str==null || str==undefined||str==""){
            return "暫無資訊";            
        }else{
            if(str == "RPOE-10253-101") {
                return str = "文字作品";
            }else if(str == "RPOE-10253-102") {
                return str = "口述作品";
            }else {
                return str = "其他作品";
            }
        }
    });
}
 

function getScrollTop() {
	var scrollTop = 0;
	if (document.documentElement && document.documentElement.scrollTop) {
		scrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
		scrollTop = document.body.scrollTop;
	}
	return scrollTop;
}

// 獲取當前可是範圍的高度
function getClientHeight() {
	var clientHeight = 0;
	if (document.body.clientHeight && document.documentElement.clientHeight) {
		clientHeight = Math.min(document.body.clientHeight,
				document.documentElement.clientHeight);
	} else {
		clientHeight = Math.max(document.body.clientHeight,
				document.documentElement.clientHeight);
	}
	return clientHeight;
}

// 獲取文件完整的高度
function getScrollHeight() {
	return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}