{extend name="wap/default_new/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/article.css">
{/block}
{block name="goodsHead"}
<section class="head">
	<a class="head_back" href="{:__URL('APP_MAIN')}"><i class="icon-back"></i></a>
	<div class="head-title">{:lang('article_center')}</div>
</section>
{/block}
{block name="main"}
{notempty name="platform_help_class"}
	<div class="nav-box">
		<div class="slide-box">
			<ul class="fisrt-class">
			<li class="nav-active" class-id = "0"  onclick="clickArticleClass(0, this);" attr_class_id = "0">
					<div>
						<span>
							全部
						</span>	
					</div>
			</li>
			{foreach name="platform_help_class" id="class_vo" key="k"}
				<li class-id = "{$class_vo.class_id}"  onclick="clickArticleClass({$class_vo.class_id}, this);" attr_class_id = "{$class_vo.class_id}">
					<div>
						<span>{$class_vo.name}</span>
					</div>
				</li>
			{/foreach}
			</ul>
			<ul class="second-class">
			{foreach name="platform_help_class" id="class_vo" key="k"}
				{foreach name="class_vo['child_list']" id="class_to"}
					<li pid = "{$class_to.pid}" attr_class_id = "{$class_to.class_id}" onclick ="clickArticleBottomClass({$class_to.class_id}, this);">
					<div>
						<span>{$class_to.name}</span>
					</div>
				</li>
				{/foreach}
			{/foreach}
			</ul>
		</div>
	</div>
{else/}
	<p style="color:#939393;text-align:center;margin-top:100px;"><img src="__TEMP__/{$style}/public/images/wap_nodata.png" height="100"><br>暂无文章分类</p>
{/notempty}
<div class="article-box">
	<div class="article-nav">当前位置：<span class="first-title">全部</span> > <span class="second-title"></span></div>
	<div class="article-content">
		<ul></ul>
	</div>
</div>
<input type="hidden" id="class_id" value="0">
<input type="hidden" id="page" value="1">
<input type="hidden" id="page_count" value="0">
<script>
function clickArticleClass(class_id, obj){
	var class_name = $(obj).find("div span").text();
	$(".first-title").text(class_name);
	$(".second-title").text('');
	$(".fisrt-class li").removeClass("nav-active");
	$(obj).addClass("nav-active");
	var attr_class_id = $(obj).attr("attr_class_id")
	$(".second-class li").hide();
	$(".second-class").find("li[pid="+ class_id +"]").show();
	is_load = true;
	$("#class_id").val(attr_class_id);
	getArticleList(1);
}

function clickArticleBottomClass(class_id, obj){
	var class_name = $(obj).find("div span").text();
	$(".second-title").text(class_name);
	var attr_class_id = $(obj).attr("attr_class_id")
	is_load = true;
	$("#class_id").val(attr_class_id);
	getArticleList(1);
}

$(function(){
	getArticleList(1);
})


var is_load =true;
function getArticleList(page){
	$("#page").val(page); 
	if(is_load){
		is_load = false;
		$.ajax({
			type:"post",
			url : "{:__URL('APP_MAIN/Articlecenter/getArticleList')}",
			async : true,
			data : {'class_id':$("#class_id").val(), 'page':page },
			success : function(data){
				$("#page_count").val(data['page_count']);
				if(page == 1){
					var article_list_html = '';
				}else if(page > 1){
					var article_list_html = $('#article_list').html();
				}
				
			
				if(data['data'].length >0 ){
					for(var i =0 ;i<data['data'].length;i++){
						article_list_html +='<li>';
						article_list_html +='<p class="box-title"><a href="'+__URL('APP_MAIN/Articlecenter/articlecontent?article_id='+data['data'][i]['article_id'])+'">'+data['data'][i]['title']+'</a></p>';
						article_list_html +='<p class="box-time">'+ timeStampTurnTime(data['data'][i]['create_time']) +'</p>';
						article_list_html +='</li>';
						
						//article_list_html +='<a href="'+__URL('APP_MAIN/Articlecenter/articlecontent?article_id='+data['data'][i]['article_id'])+'">'+data['data'][i]['title']+'</a>';
					}
				}else{
					article_list_html+= '<p style="color:#939393;text-align:center;margin-top:100px;"><img src="__TEMP__/{$style}/public/images/wap_nodata.png" height="100"><br>该分类下暂时没有文章！</p>';
				}
				$('.article-content ul').html(article_list_html);
				is_load =true;
			}
		})
	}	
}

//滑动到底部加载
$(window).scroll(function(){
	var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
	var content_box_height = parseFloat($("#article_list").height()); 
	if(totalheight - content_box_height >= 40){
		if(is_load){
			var page = parseInt($("#page").val()) + 1;//页数
			var total_page_count = $("#page_count").val(); // 总页数
			if(page > total_page_count){
				return false;
			}else{
				getArticleList(page);
			}
		}
		
	}
})
</script>
{/block}