{extend name="wap/default_new/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/article.css">
{/block}
{/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"}
<div class="articel-container">
	{notempty name="platform_help_class"}
		<ul class="article_class">
			<li class="active" data-class-id="0"><a href="javascript:;">全部</a></li>
			{foreach name="platform_help_class" id="class_vo" key="k"}
				<li data-class-id="{$class_vo.class_id}"><a href="javascript:;">{$class_vo.name}</a></li>
			{/foreach}
		</ul>
	{/notempty}
	<!-- 文章列表 -->
	<div class="article_list_content">
		<ul class="article_list_container">
		</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>
	$(document).ready(function(){
		getArticleList(1);
		//计算最大偏移量 10是边距
		var max_offset_left = $(".article_class li:last-child").offset().left + $(".article_class li:last-child").innerWidth() - $(".article_class").innerWidth() - 10;
		var offset_left = 0;
		$(".article_class li").click(function(){
			if(!$(this).hasClass("active")){
				var _index = $(this).index(); 
				var _active_index = $(".article_class li.active").index();
				var center_width = $(".article_class").innerWidth() / 2;	
				var _offset_left = $(this).offset().left;
				var _oneself_width = $(this).innerWidth() / 2;
				if(_index > _active_index){
					//向左偏移
					offset_left += (_offset_left - center_width + _oneself_width);
				}else{
					//向右偏移
					offset_left -= (center_width - _offset_left - _oneself_width);
				}
				offset_left = offset_left < 0 ? 0 : offset_left; // 最小偏移量
				offset_left = offset_left > max_offset_left ? max_offset_left : offset_left; //最大偏移量
				$(".article_class").animate({"scrollLeft":offset_left},500) //设置偏移量;
			}
			$(".article_class li").removeClass("active");
			$(this).addClass("active");	
			var article_class_id = $(this).data("class-id");
			$("#class_id").val(article_class_id);
			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){
					//alert(JSON.stringify(data));
					$("#page_count").val(data['page_count']);
					if(page == 1){
						var article_list_html = '';
					}else if(page > 1){
						var article_list_html = $('.article_list_container').html();
					}
				
					if(data['data'].length >0 ){
						for(var i =0 ;i<data['data'].length;i++){
							var item = data['data'][i];
							article_list_html+= '<a href="'+__URL('APP_MAIN/Articlecenter/articlecontent?article_id='+item['article_id'])+'">';
								article_list_html+= '<li class="article-item">';
									article_list_html+= '<div class="item-thumbnail">';
										article_list_html+= '<img src="{:__IMG($default_cms_thumbnail)}" class="lazy_load" data-original="'+__IMG(item['image'])+'" alt="">';
									article_list_html+= '</div>';
									article_list_html+= '<div class="item-container">';
										article_list_html+= '<h3 class="item-title">'+item['title']+'</h3>';
										article_list_html+= '<p class="item-respondent">'+item['author']+'</p>';
										article_list_html+= '<div>';
											article_list_html+= '<span class="speech-item-tag">'+item['name']+'</span>';
											article_list_html+= '<span class="participation">'+item['click']+'人(阅)</span>';
										article_list_html+= '</div>';
									article_list_html+= '</div>';
								article_list_html+= '</li>';
							article_list_html+= '</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="60" style="margin-bottom:20px;"><br>该分类下暂时没有文章！</p>';
					}
					$('ul.article_list_container').html(article_list_html);
					img_lazyload();	
					is_load =true;
				}
			})
		}	
	}

	//滑动到底部加载
	$(".article_list_content").scroll(function(){
		var totalheight = parseFloat($(".article_list_content").height()) + parseFloat($(".article_list_content").scrollTop());
		var content_box_height = parseFloat($(".article_list_container").height()); 
		if(content_box_height - totalheight <= 20){
			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}