{extend name="layout/layout" /}
{block name="title"} <?php echo $category['name']; ?> {/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/recently.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
<script type="text/javascript" src="{:client_asset('/libs/zepto/zepto.picLazyLoad.min.js')}"></script>
{/block}
{block name="menu_title"} <?php echo $category['name']; ?> {/block}
{block name="main"}
<!-- 这是正文 -->

<div class="body_sytle">
	
	<div class="c_list_box">
		
		<div class="c_list_tab_box_2">
			<a href="javascript:;" class="hover" type="all">全部</a>
			<a href="javascript:;" type="serial">连载</a>
			<a href="javascript:;" type="finish">完本</a>
			<a href="javascript:;" type="free">免费</a>
		</div>
		
		<ul class="r_img_ul"></ul>
	</div>
	<div class="loading_box"><span>正在加载中，请稍后......</span></div> 
	
	<div class="content_null_box" style="display: none;">
		<img src="{:client_asset('/img/frontend/search/search_icon_3.png')}" style="width: 1.28rem;" />
		<span>暂无该类别图书，换个条件试试看吧！</span>
		<div class="content_null_but_box">
			<a href="{:buildAppUrl('book', [])}" class="client-url">去首页看看</a>
		</div>
	</div>

</div>

{/block}
{block name="footer"}
{/block}

{block name="js"}
<script type="text/javascript">
	var pagenum=1, 
		sBookstop=true, 
		sBookstopTime=null, 
		pagesize=10, 
		type = $(".c_list_tab_box_2 a").eq(0).attr('type'), 
		book_category_id = {$category.id};

	$(function(){
		loadingList();
		$(".c_list_tab_box_2 > a").click(function(){
			$(this).addClass("hover");
			$(this).siblings().removeClass("hover");
			$('.r_img_ul').html('').show();
			$('.content_null_box').hide();
			$('.loading_box').html('<span>正在加載中，请稍候......</span>').show();
			type = $(this).attr("type");
			sBookstop = true;
			pagenum = 1;
			loadingList();
		});
		
		$(window).scroll(function(){
			var nWinH =  document.documentElement.clientHeight;
			var nScrollTop = (document.body.scrollTop || document.documentElement.scrollTop) + nWinH;
			var nBodyScrollH = document.body.scrollHeight;
			if(sBookstop && nBodyScrollH - nScrollTop < 240){
				bookstoptime();
				$('.loading_box').html('<span>正在加載中，请稍候......</span>').show();
				loadingList();
			}
		});
	});

	function loadingList(){
		$.ajax({
			type: 'get',
			url: '/clientwebapi/category/booklistapi',
			timeout: 10000,
			cache: false,
			dataType: 'json',
			data: {
				'book_category_id':book_category_id,
				'type':type,
				'page':pagenum
			},
			success: function (data) {
				clearTimeout(sBookstopTime);
				if (typeof data == 'string') {
					data = JSON.parse(data);
				}
				if(data<=0 && pagenum == 1){
					$('.r_img_ul,.loading_box').hide();
					$('.content_null_box').show();
					sBookstop = false;
					return false;
				}
				var sLi = '';
				var sisfinish = '<i>已完结</i>';
				var type_name = $(".c_list_tab_box_2 a.hover").text();
				var bookInfoTemp = "{:buildAppUrl(\"bookinfo\", [\"book_id\" => \"mbid\"])}";
				for(var i=0; i<data.length; i++){
					var bookid = data[i]['id'];
					var bookInfoUrl = bookInfoTemp.replace("mbid", bookid);

					if(data[i].is_finish == 1){
						sisfinish = '<i>已完结</i>';
					}else{
						sisfinish = '<i style="color: #ffc701;">连载中</i>';
					}
					sLi += '<li class="section-block">\
						<a href="'+bookInfoUrl+'" class="client-url section-data" data-zone="'+type_name+'" data-book_id="'+bookid+'">\
							<div class="r_img">\
								<img src="{:client_asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
							</div>\
							<div class="r_img_text">\
								<h3>'+ data[i]['name'] +'</h3>\
								<p>'+ data[i]['description'] +'</p>\
								<div class="i_images_txt_other">\
									<strong>' + sisfinish +'\
										<b>'+ data[i]['author'] +'</b>\
									</strong>\
									<em>'+ data[i]['read_num'] +'人在追</em>\
								</div>\
							</div>\
						</a>\
					</li>';
				}

				$('.r_img_ul').append(sLi);
				pagenum ++;
				if(data.length < pagesize){
					$('.loading_box').html('<span>已显示全部</span>').show();
					sBookstop = false;
				}else{
					$('.loading_box').html('<span>下拉加载更多</span>').show();
					sBookstop = true;
				}			
				$('img').picLazyLoad({
					effect : "fadeIn"
				});

			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				if (typeof XMLHttpRequest == 'object') {
					XMLHttpRequest = fRead.jsonstringify(XMLHttpRequest);
				}
			}
		});
	}

	//防止重复请求数据
	function bookstoptime() {
		clearTimeout(sBookstopTime);
		sBookstop = false;
		sBookstopTime = setTimeout(function () {
			sBookstop = true;
		}, 3000);
	}
</script>
{/block}