{extend name="layout/layout" /}
{block name="title"}最近阅读{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/recently_new.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/ad/image.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
	.content_null_top_border{
		border-top: 0;
	}
</style>
<style type="text/css">
	.read_popup_box, .custom_popup_box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0,0,0,.5);
		font-size: 0;
		text-align: center;
		white-space: nowrap;
	}
	.rpb_main,
	.rpb_jgb{
		display: inline-block;
		vertical-align: middle;
	}
	.rpb_jgb{
		overflow: hidden;
		height: 100%;
		margin-left: -1px;
		width: 1px;
	}
	.rpb_main{
		overflow: hidden;
		width: 100%;
	}
	.rpbm_box{
		padding: .3rem .16rem .1rem;
		position: relative;
		left: 0;
		top: 0;
		overflow: hidden;
		background-color: #fff;
		margin: .14rem .48rem;
		border-radius: .16rem;
		white-space: normal;
		-webkit-box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
		box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
	}
	.rpbm_box a{
		display: block;
	}
	.rpb_img{
		overflow: hidden;
		margin: 0 auto .16rem;
		height: 1.39rem;
		width: 1.04rem;
		border-radius: .04rem;
		-webkit-box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
		box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
	}
	.rpb_img a,
	.rpb_img img{
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: .04rem;
	}
	.rpb_tit{
		overflow: hidden;
		margin: 0 0 .16rem;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
	}
	.rpb_tit a{
		overflow: hidden;
		display: block;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.rpb_p{
		margin-bottom: .1rem;
		overflow: hidden;
		max-height: .72rem;
	}
	.rpb_p a{
		overflow: hidden;
		display: block;
		font-size: .14rem;
		color: rgba(0,0,0,.5);
		text-align: left;
		line-height: .24rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.rpb_but{
		text-align: center;
		height: .3rem;
	}
	.rpb_but a{
		display: block;
		height: .3rem;
		text-align: center;
		font-size: .16rem;
		color: #007aff;
		line-height: .3rem;
	}

	.rpbm_close_but{
		display: block;
		position: absolute;
		right: .1rem;
		top: .1rem;
		height: .2rem;
		width: .2rem;
		background: url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
		background-size: .14rem .14rem;
		border-radius: .2rem;
	}

	.top{
		width: 100%;
		height: 0.31rem;
		padding: 0 0.144rem;
		box-sizing: border-box;
		margin-top: 0.134rem;
	}
	.top .toptab{ float: left;}
	.top-myshelf{
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(147,129,129,1);
		font-size: 0.144rem;
		margin-right: 0.3125rem;
		float: left;
		height: 0.31rem;
		line-height: 0.31rem;
		margin-left: 0.9rem;
	}
	.top .toptab.active{
		width: 1rem;
		height: 0.31rem;
		text-align: center;
		line-height: 0.31rem;
		border-radius: 0.31rem;
		background: rgba(254,237,190,1);
		float: left;
		margin: 0 0.144rem 0 0rem;
		font-family: PingFang-SC;
		font-weight: bold;
		font-size: 0.144rem;
	}
	.top .toptab a{
		color: rgba(147,129,129,1);
	}
	.top .toptab.active a{
		color: rgba(81,61,61,1);
	}
    .head_tit_tab{
        overflow: hidden;
        margin: 0 .5rem;
        height: .44rem;
        font-size: .15rem;
        color: #513D3D;
        text-align: center;
        line-height: .44rem;
        font-size: 0;
        text-align: center;
        white-space: nowrap;
    }
    .head_tit_tab a{
        display: inline-block;
        padding: 0 .05rem;
        margin: 0 .05rem;
        height: .44rem;
    }
    .head_tit_tab strong{
        display: block;
        padding: .14rem 0 .03rem;
        height: .2rem;
        font-size: .14rem;
        font-weight: normal;
        text-align: center;
        color: #938181;
        line-height: .2rem;
    }
    .head_tit_tab span{
        display: block;
        margin: 0 auto;
        height: .01rem;
        width: .5rem;
    }
    .head_tit_tab .htt_hover strong{
        color: #FFB473;
    }
    .head_tit_tab .htt_hover span{
        background-color: #5EBEA1;
    }
	/**底部文字*/
	.loading_box {
		overflow: hidden;
		height: .5rem;
		background-color: #fff;
		border-top: 0;
		text-align: center;
		line-height: .5rem;
		font-size: 0;
	}
	.loading_box span {
		padding-left: .57rem;
		*display: inline-block;
		*display: inline;
		*zoom: 1;
		height: .5rem;
		background: url("{:asset('/yg/img/frontend/icon/loading_heart_icon.png')}") no-repeat 0 center, url("{:asset('/yg/img/frontend/icon/loading_heart_icon.png')}") no-repeat .19rem center, url("{:asset('/yg/img/frontend/icon/loading_heart_icon.png')}") no-repeat .38rem center;
		background-size: .14rem auto;
		font-size: .12rem;
		color: #5EBEA1;
		line-height: .5rem;
	}
	.body_sytle{
		background-color: #fff;
	}


	/*历史记录开始*/
	/*书架的返回*/
	.head_return_page_but{
		background-image: url("{:asset('/img/frontend/icon/back.png')}");
		background-size: .2rem auto;
	}
	/*头部右侧的icon*/
	.head_menu_but{
		background-image: url("{:asset('/img/frontend/icon/shelf_menu.png')}");
		background-size: .2rem auto;
	}

	/*我的书架的文字颜色*/
	.head_tit_tab .htt_hover strong{
		color: #5EBEA1;
	}
	/*管理图标和文字颜色*/
	.r_img_edit_open, .r_bookshelf_edit_open{
		background-image: url("{:asset('/img/frontend/icon/icon_setting.png')}");
		background-size: .2rem auto;
		color: #938181;
	}
	/*历史记录总共多少本基础颜色*/
	.r_book_num strong{
		color: #EA5E5E;
	}
	/*历史记录总共多少本，数字颜色*/
	.r_book_num strong span{
		color: #EA5E5E;
	}
	/*更新至*/
	.r_img_chaptername{
		color: #EA5E5E;
	}

	.r_img_chaptername_prev.r_img_chaptername{
		color: #828B88;
		position: relative;
		padding-left: 0.18rem;
	}
	.r_img_chaptername_prev::before{
		content: '';
		position: absolute;
		display: block;
		width: 0.15rem;
		height: 0.15rem;
		left: 0rem;
		top: 0.01rem;
		background: url("{:asset('/img/frontend/icon/sunshine_clock_1.png')}") no-repeat center center/100% 100%;
	}
	.r_book_num strong{
		color: #938181;
	}
	.r_book_num strong span{
		color: #EA5E5E;
	}
	.r_book_num .select_num{
		display: none;
	}
	.r_img_list_edit .r_book_num .select_num{
		display: block;
	}
	/*删除的颜色和icon*/
	.r_img_edit_close{
		color: #828B88;
		background-image: url("{:asset('/img/frontend/icon/del.png')}");
		background-size: .2rem auto;
	}
	.r_img_edit_remove{
		color: #EA5E5E;
		background-image: url("{:asset('/img/frontend/icon/del.png')}");
		background-size: .2rem auto;
	}


/*	历史记录结束*/
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
<script type="text/javascript" src="{:asset('/libs/zepto/zepto.picLazyLoad.min.js')}"></script>
{/block}

{block name="menu"}
<div class="head_tit_box">
	<a href="javascript:;" class="head_return_page_but"></a>
	<div class="head_menu_but_box">
		{if condition="!$is_show_tabbar" }
		<a href="javascript:;" class="head_menu_but"></a>
		{/if}
	</div>
	<div class="head_tit_tab">
		{if condition="$showBookShelf"}
		<a href="/index/book/shelf"><strong>我的书架</strong><span></span></a>
		<a href="javascript:;"  class="htt_hover"><strong>阅读记录</strong><span></span></a>
		{else /}
		<a href="javascript:;"><strong>阅读记录</strong><span></span></a>
		{/if}
	</div>
</div>
<!-- 三期天降阅读历史记录福利广告 -->
<div class="ad_welfare_toast">
	恭喜获得xx书币
</div>
<div class="ad_welfare_icon ad_welfare">
	<img class="ad_welfareclick"  src="{:asset('/img/frontend/chapter/iconwelfare.png')}"/>
</div>
<!--head_tit_box 分类 head_menu_but_open-->
<div class="pop_up_menu_box">
	<i></i>
	<div class="pum_box">
		<div class="pum_nav_list">
			<ul class="pum_nav_list_ul">
				<li>
					<a href="/index/index?type=boy">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_1.png')}" /></div>
						<strong>男生</strong>
					</a>
				</li>
				<li>
					<a href="/index/index?type=girl">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_2.png')}" /></div>
						<strong>女生</strong>
					</a>
				</li>
				<li>
					<a href="/index/category">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_3.png')}" /></div>
						<strong>分类</strong>
					</a>
				</li>
				<li>
					<a href="/index/book/list?type=finish">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_4.png')}" /></div>
						<strong>完本</strong>
					</a>
				</li>
				<li>
					<a href="/index/book/list?type=free">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_5.png')}" /></div>
						<strong>免费</strong>
					</a>
				</li>
				<li>
					<a href="/index/user">
						<div class="pum_icon"><img alt="" src="{:asset('/img/frontend/icon/module_icon_6.png')}" /></div>
						<strong>个人中心</strong>
					</a>
				</li>
			</ul>
			<div class="pum_but_box">
				<a href="/index/user/recent">最近阅读</a>
			</div>
			<input type="hidden" value="/index/user/recent" class="js_recent_url">
		</div>
	</div>
</div>
<!--pop_up_menu_box 菜单弹框-->

{/block}
{block name="main"}
<!-- 这是正文 body_sytle_girl -->

<!--  提示置顶  -->
<div class="set_top_box" style="display:none;">点击右上角[在聊天中置顶或者浮窗]阅读有惊喜↑</div>
<!--<div class="top">-->
<!--	<div class="top-myshelf toptab "><a href="/index/book/shelf">我的书架</a></div>-->
<!--	<div class="top-history toptab active"><a href="/index/user/recent">阅读记录</a></div>-->
<!--</div>-->
<div style="clear: both"></div>
<div class="body_sytle" style="min-height: 600px">
	<!--i_nav_box 顶部导航-->
	<!--广告 最近阅读页顶部广告条-->

	<div class="ad_position_4"></div>
	{notempty name="rencently"}



	<div class="r_img_list_box">
		<div class="r_img_edit_box">
			<div class="r_book_num">
				<strong class="all_num" totalnum="{$totalNum}">共<span>{$totalNum}</span>本</strong>
				<strong class="select_num">选中<span>0</span>本</strong>
			</div>
			<div class="r_img_edit_but_box" {if condition="$login eq '0' "}style="display:none"{/if}>
				<a href="javascript:;" class="r_img_edit_open">管理</a>
				<a href="javascript:;" class="r_img_edit_close">取消</a>
				<a href="javascript:;" class="r_img_edit_remove">删除</a>
			</div>
		</div>

		<ul class="r_img_ul" id="recent_ul">
			{foreach name="$rencently" item="data" }
			<li supdatet="{$data.updatetime}" sbid = "{$data.book_id}" recentid = "{$data.id}">
				{if condition="$data.state eq '0'"}
				<a href="javascript:;" class="r_img_book_null">
				{else /}
				<a href="/index/book/chapter?book_id={$data.book_id}&chapter_id={$data.chapter_id}">
				{/if}
					<div class="r_img">
						<img src="{$data.image}" />
						{if condition="$data.state eq '0'"}<span></span>{/if}
					</div>
					<div class="r_img_text">
						<h3>{$data.book_name}</h3>

						{if condition="$data.state neq '0'"}
						<div class="r_img_chaptername">更新至：{$data.last_chapter_name}</div>
						{else}
						<div class="r_img_other">本书已下架</div>
						{/if}
						<div class="r_img_chaptername r_img_chaptername_prev">上次读到：{$data.chapter_name}</div>
					</div>
				</a>
			</li>
			{/foreach}
		</ul>
		<!--r_img_ul 最近阅读列表 r_img_remove_select-->
		<div class="loading_box"><span>已显示全部图书</span></div>
	</div>
	{/notempty}
	<!--r_img_list 编辑最近阅读列表 r_img_list_edit_remove r_img_list_edit -->

	<div class="content_null_box content_null_top_border" {if condition="count($rencently) eq 0 "} style="display:block;" {else /} style="display:none;"{/if}>
		<img src="{:asset('/img/frontend/icon/icon_5.png')}" style="width: 1.05rem;" />
		<span>你还没有<i>阅读</i>记录</span>
	</div>

	<div class="r_img_list_other" {if condition="count($rencently) elt 3 "} style="display:block;" {else /} style="display:none;"{/if}>
		{if condition="count($ranklist['idx']) gt 0"}
		<div class="r_img_list_other_tit">
			<h2>为你推荐</h2>
		</div>
		{/if}
		<ul class="r_img_ul">
			{volist name="$ranklist['idx']" id="data" offset="0" length='10'}
			<li class="section-block">
				<a href="/index/book/info?book_id={$data.id}" class="section-data" data-book_id="{$data.id}" data-zone="为你推荐">
					<div class="r_img">
						<img src="{$data.image}" />
						<span></span>
					</div>
					<div class="r_img_text">
						<h3>{$data.name}</h3>
						<p>{$data.description}</p>
						<div class="i_images_txt_other">
							<strong>
								{if condition="$data.is_finish eq 1"}
								<i>已完结</i>
								{else/}
								<i style="color: #7fdae9;">连载中</i>
								{/if}
								<b>{$data.author}</b>
							</strong>
							<em>{$data.read_num}人在追</em>
						</div>
					</div>
				</a>
			</li>
			{/volist}
		</ul>
	</div>
{if condition="$is_show_tabbar" }
{include file="public/tabbar" /}
{/if}
</div>

{/block}
{block name="footer"}
<div style="display: none" id="poptype" data-poptype="yunying,activity,continue,camp,subscribe,custom"></div>
{/block}
{block name="js"}
<!-- 这里引入js -->
<script type="text/javascript" src="{:asset('/js/frontend/recently.js')}"></script>
<script>
	//接口调用测试，海波，log里有返回的数据
//	$(function(){
//		$.post('/api/user/getReadRecently',{pageNo:1,pageSize:5},function(data){
//			console.log(data);
//		})
//	})



var pagenum=2,
	sBookstop=true,
	sBookstopTime=null,
	pagesize=10,
	block_id = $("#block_id").val(),
	user_id=$.fn.cookie('user_id');


$(function(){

	$('img').picLazyLoad({
		effect : "fadeIn"
	});


	if(user_id && $('#recent_ul li').length >= pagesize){
		console.log(user_id);
		$(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 < 600){
				bookstoptime();
				loadingList();
			}
		});

	}
});

function loadingList(){
	var sUpadateTime = '';
	if($('#recent_ul li').length > 0){
		var sUpadateTime = $('#recent_ul li').last().attr('supdatet');
	}
	$('.loading_box').html('<span>正在加載中，请稍候......</span>').show();
	console.log(sUpadateTime);
	$.ajax({
		type: 'post',
		url: '/api/user/getReadRecently',
		timeout: 10000,
		cache: false,
		dataType: 'json',
		data: {
			'pageSize':pagesize,
			'updatetime':sUpadateTime
		},
		success: function (data) {
			clearTimeout(sBookstopTime);
			if (typeof data == 'string') {
				data = JSON.parse(data);
			}
			console.log(data);
			data = data.data;
			var sLi = '';
			for(var i=0; i<data.length; i++){
                if(data[i]['state'] == 1 || data[i]['state'] == '-1'){
					sLi += '<li supdatet="' + data[i].updatetime + '" sbid = "' + data[i].book_id + '"'+ 'recentid = "'+ data[i].id+'">\
						<a href="/index/book/chapter?book_id='+ data[i]['book_id']+'&chapter_id='+ data[i]['chapter_id']+'">\
							<div class="r_img">\
								<img src="{:asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
								<span></span>\
							</div>\
							<div class="r_img_text">\
								<h3>'+ data[i]['book_name'] +'</h3>\
								<div class="r_img_chaptername">更新至：'+ data[i]['last_chapter_name'] +'</div>\
								<div class="r_img_chaptername r_img_chaptername_prev">上次读到：'+ data[i]['chapter_name'] +'</div>\
							</div>\
						</a>\
					</li>';
				}else{
					sLi += '<li supdatet="' + data[i].updatetime + '" sbid = "' + data[i].book_id + '"'+ 'recentid = "'+ data[i].id+'">\
						<a href="javascript:;" class="r_img_book_null">\
							<div class="r_img">\
								<img src="{:asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
								<span></span>\
							</div>\
							<div class="r_img_text">\
								<h3>'+ data[i]['book_name'] +'</h3>\
								<div class="r_img_other">本书已下架</div>\
								<div class="r_img_chaptername r_img_chaptername_prev">上次读到：'+ data[i]['chapter_name'] +'</div>\
							</div>\
						</a>\
					</li>';
				}

			}
			$('#recent_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) {
		}
	});
}



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

</script>
<script type="text/javascript" src="{:asset('/js/frontend/common_tips.js')}"></script>
<!-- 多条广告如下脚本只需引入一次 -->
{if condition="$isAdPick"}
{include file="public/ad_common_js"}
<script type="text/javascript" src="{:asset('/js/frontend/ad/ad_welfare.js')}"></script>
{/if}

<script>
	window.$isAdPick = '{$isAdPick}'
	window.$adLatestVersion = '{$ad_latest_version}'
	$(function(){
		window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.RECENT_READ)
	})
</script>
{/block}