{layout name="public/layout" /}
<div class="bbs">
<input type="hidden" name="parent_id" value="{$pid}" />
<input type="hidden" name="child_id" value="{$cid}" />
<input type="hidden" name="type" value="subject" />
     <a href="{:url('article')}" class="postbtn"><i class="fa fa-edit"></i><span>发帖</span></a>
     <div class="head">
          <div class="poster">
           {if condition="empty($user['poster'])"}
            <img src="{$yf_theme_path}public/img/user.png" width="100%"/>
            {else}
            <img src="{$user.poster}"  width="100%" οnerrοr="javascript:this.src='{$yf_theme_path}public/img/user.png';"/>
            {/if}
          </div>
          <div class="searchbox"><i class="fa fa-search"></i><input name="search" placeholder="帖子标题或内容" /></div>
          <div class="msgbox"><a href="{:url('bbs/msg')}"><img src="{$yf_theme_path}public/img/msg.png" style="width:100%;" /></a></div>
     </div>
     <div class="navs">
         {volist name="cates" id="vo" key="key"}
            <a href="javascript:void(0);" class="{$key==1?'active':''}" data-id="{$vo.id}">{$vo.name}</a>
         {/volist}   
     </div>
     <div class="topwraper">
         {volist name="cates" id="vo" key="key"}
		     {if condition="count($vo['tops'])"}
			     <div class="toplist {$key==1?'active':''}">
			         {volist name="vo.tops" id="vo"}
				         <div class="item">
				             <a  {if condition="$vo['link'] neq '' and $vo['link'] neq 'null'"}href="{$vo.link}" target="__blank"{else}href="{:url('detail',['id'=>$vo['id']])}"{/if} ><span class="icon">顶</span><span class="txt">{$vo.name|RemoveXSS}</span></a>
				         </div>
			         {/volist}
			     </div>
		     {/if}
	     {/volist}
     </div>
     <div class="showwraper">
         <div class="subjects">
               <div class="subject active" data-type="subject"><a href="javascript:void(0);">按主题</a></div>
               <div class="subject" data-type="comment"><a href="javascript:void(0);">按回复</a></div>
               <div class="subject" data-type="hot"><a href="javascript:void(0);">最热</a></div>
               <div class="subject" data-type="marrow"><a href="javascript:void(0);">精华</a></div>
               <div class="all desc"><a href="javascript:void(0);"><span>全部</span><span class="icon"><i class="fa fa-sort-down"></i></span></a></div>
         </div>
         <div class="childswraper">
             {volist name="cates" id="vo" key="key"}
			     {if condition="count($vo['childs'])"}
			     <div class="childsrow">
			         <a href="javascript:void(0);" class="active" data-id="{$vo.id}">全部</a>
			         {volist name="vo.childs" id="jo"}
			             <a href="javascript:void(0);" data-id="{$jo.id}">{$jo.name}</a>
		             {/volist}
		         </div>    
			     {/if}
		     {/volist}    
         </div>
         <div class="showlists">
	         {volist name="cates" id="jo" key="key"}
			     {if condition="count($jo['data'])"}
				     <div class="showlist {$key==1?'active':''}">
				         <input type="hidden" name="page" value="1" />
	                    <div class="showlistwraper">
				         {volist name="jo.data" id="vo"}
					         <div class="item" data-uid="{$vo.mid}" {if condition="$vo['link'] neq '' and $vo['link'] neq 'null'"}onclick="window.open('{$vo.link}')"{else}onclick="window.location.href='{:url('detail',['id'=>$vo['id']])}'"{/if}>
					             <div class="user">
					                 <div class="img">
					                 {if condition="empty($vo['poster'])"}
					                 <img src="{$yf_theme_path}public/img/user.png" width="100%"/>
					                 {else}
					                 <img src="{$vo.poster}"  width="100%" οnerrοr="javascript:this.src='{$yf_theme_path}public/img/user.png';"/>
					                 {/if}
					                 </div>
					                 <div class="detail">
					                       <div class="name">{$vo.uname}</div>
					                       <div class="date">{$vo.create_time|date="Y-m-d H:i",###}</div>
					                 </div>
					             </div>
					             <div class="title">{:isset($showcates[$vo['child_id']])?'【'.$showcates[$vo['child_id']].'】':''}{$vo.name|RemoveXSS}</div>
					             <div class="info">{$vo.content|htmlspecialchars_decode|RemoveXSS|strip_tags|sub_str=100}</div>
					             <div class="tool">
					                     <div class="comment"><i class="fa fa-commenting-o"></i> {$vo.comment}</div>
					                     {if condition="$user['member_list_id'] neq $vo['mid']"}
					                     <div class="comment chat"><a href="javascript:void(0);" title="私信">私信</a></div>
					                     {/if}
					                     <div class="time">{$vo.created}</div>
					             </div>
					         </div>
				         {/volist}
				        </div>
				        <div class="dropload-down"><div class="dropload-refresh">↑上拉加载更多</div></div>
				   </div>
			     {/if}
		     {/volist}
	     </div>
     </div>
</div>  
<link rel="stylesheet" href="{$yf_theme_path}public/css/dropload.css"> 
<script src="__PUBLIC__/layer/layer_home.js" type="text/javascript"></script>
<script>
var isloading = false;
var mid={$user['member_list_id']};
$(window).bind("scroll", function () {
    if ($(document).scrollTop()+$(window).height()>=$(document).height()&& !isloading) {
        isloading = true;
        getMore();
    }
});
function changeState(state){
	var parent=$(".showlists .active");
	var box=parent.find(".dropload-down");
	if(state==0){
		box.html('<div class="dropload-noData">暂无数据</div>');
	}
	if(state==1){
		box.html('<div class="dropload-refresh">↑上拉加载更多</div>');
	}
	if(state==2){
		box.html('<div class="dropload-load"><span class="loading"></span>加载中...</div>');
	}
}
function getMore(){
	var hasClass=$(".showlists .active .dropload-noData").length;
	console.log("hasClass",hasClass);
	if(hasClass){
		isloading = false;
		return false;
	}
	changeState(2);
	var curpage=$('.showlists .active [name="page"]').val();
	curpage++
    $('.showlists .active [name="page"]').val(curpage);
    // 拼接HTML
    var result = '';
    var pid=$("[name='parent_id']").val();
    var cid=$("[name='child_id']").val();
    var keyword=$("[name='search']").val();
    var type=$(".subjects .active").data("type");
    var url='{:url("ajaxlist")}';
    var index=$(".navs .active").index();
    var params={};
    params.pid=pid;
    params.cid=cid;
    params.type=type;
    params.page=curpage;
    if(typeof keyword!='undefined'&&keyword)params.keyword=keyword;
    $.post(url,params,function(res){
        	console.log(res);
        	var list=res.data;
        	if(typeof list.data!='undefined'){
                    // 锁定
        		    var data=list.data;
                    var arrLen = data.length;
                    var html='';
                    if(arrLen>0){
                        $.each(data,function(key,item){
                            if(typeof item.id!='undefined'){
                            	if(item.link!=''&&item.link!='null'&&item.link!=null){
                            		html+="<div class='item' data-uid='"+item.mid+"' onclick=\"window.open('"+item.link+"')\">";
                            	}else{
                                html+="<div class='item' data-uid='"+item.mid+"' onclick=\"window.location.href='/member/bbs/detail/id/"+item.id+".html'\">";
                            	}
                                if(item.poster){
                                	html+="<div class='user'><div class='img'> <img src="+item.poster+"  width='100%' οnerrοr=\"javascript:this.src='{$yf_theme_path}public/img/user.png';\"/></div>";	
                                }else{
                                	html+="<div class='user'><div class='img'> <img src='{$yf_theme_path}public/img/user.png'  width='100%' /></div>";
                                }
                                
                                html+='<div class="detail"><div class="name">'+item.uname+'</div>';
                                html+='<div class="date">'+item.create_time+'</div></div></div>';
                                html+='<div class="title">'+item.name+'</div>';
                                html+='<div class="info">'+item.content+'</div>';
                                html+='<div class="tool"><div class="comment"><i class="fa fa-commenting-o"></i> '+item.comment+'</div>';
                                if(mid!=item.mid){
                                html+='<div class="comment chat"><a href="javascript:void(0);" title="私信">私信</a></div>';
                                }
					            html+='<div class="time">'+item.created+'</div></div></div>';
                            }
                        });
                        changeState(1);
                        // 如果没有数据
                    }else{
                        // 无数据
                    	 changeState(0);
                    }
                    $(".showlist").eq(index).find(".showlistwraper").append(html);
                    setTimeout(function(){
                        isloading=false;
                    },2000);
        	}else{
        		isloading=false;
        	}
    });
}
function search(){
	$("html,body").scrollTop(0);
	$(".showlists .active .showlistwraper").html("");
	changeState(1);
	getMore();
}
    $(function(){
    	var pid={$pid};
    	$(".searchbox i").click(function(){
    		search();
    	});
    	$(document).keyup(function(event){
    		  if(event.keyCode ==13){
    			  search();
    		  }
    	});
    	$("body").on('click','.showlist .chat',function(event){
    		event.stopPropagation();
    		event.preventDefault();
    		var parent=$(this).parents(".item");
    		var id=parent.data('uid');
    		var url="{:url('bbs/chatroom')}?uid="+id;
    		window.location.href=url;
    	});
    	$(".navs a").click(function(){
    		$(".navs a").removeClass('active');
    		$(this).addClass('active');
    		var index=$(".navs .active").index();
    		$(".toplist").removeClass('active');
    		$(".toplist").eq(index).addClass('active');
    		$(".showlist").removeClass('active');
    		$(".showlist").eq(index).addClass('active');
    		

    		$("html,body").scrollTop(0);
    		
    		var pid=$(this).data('id');
    		$("[name='parent_id']").val(pid);
            $("[name='child_id']").val(pid);
    		$(".childsrow").slideUp();
    		$(".subjects .all").removeClass("asc").addClass("desc");
    		$(".subjects .all").find("i").attr('class','fa fa-sort-down');
    		$(".subjects .subject").removeClass("active");
    		$(".subjects .subject").eq(0).addClass("active");
    		
    		$(".showlists .active .showlistwraper").html("");
    		$(".showlists .active [name='page']").val(0);
    		changeState(1);
    		 getMore();
    	});
    	$(".subject").click(function(){
    		var index=$(".navs a.active").index();
    		$(".subject").removeClass('active');
    		$(this).addClass('active');
            var type=$(this).data("type");

    		$("html,body").scrollTop(0);
    		$(".showlists .active .showlistwraper").html("");
    		$(".showlists .active [name='page']").val(0);
            $("[name='type']").val(type);
            changeState(1);
            getMore();
    	});
    	$(".navs a").each(function(k,item){
    		  var id=$(item).data('id');
    		  if(id==pid&&k!=0){
    			  $(".navs a").eq(k).trigger('click');
    		  }
    	});
    	$(".childsrow a").click(function(){
    		$(".childsrow a").removeClass('active');
    		$(this).addClass('active');
    		var index=$(".navs a.active").index();
    		var id=$(this).data("id");

    		$("html,body").scrollTop(0);
      		$(".showlists .active .showlistwraper").html("");
    		$(".showlists .active [name='page']").val(0);
            $("[name='child_id']").val(id);
            changeState(1);
            getMore();
    	});
    	$(".subjects .all").click(function(){
    		var has=$(this).hasClass("desc");
    		var index=$(".navs a.active").index();
    		$(".childsrow").hide();
    		if(has){
    			$(this).removeClass("desc");
    			$(this).addClass("asc");
    			$(this).find("i").attr('class','fa fa-sort-up');
    			$(".childsrow").eq(index).slideDown();
    		}else{
    			$(this).removeClass("asc");
    			$(this).addClass("desc");
    			$(this).find("i").attr('class','fa fa-sort-down');
    			$(".childsrow").eq(index).slideUp();
    		}
    	});
    });
</script>