{extend name="Public:base" /}
   
{block name="body"}
<div class="page " id="groupinfohtml">
<style>

.aui-card-list-content-padded p{font-size:0.6rem}
.aui-popup-content li{font-size:0.6rem;}
.aui-popup-content .aui-list-item-inner{height:2rem;line-height:2rem;}
.aui-popup-content {height:4rem;}
.aui-content-bg{z-index:998;box-shadow: 0px 1px 5px #ccc;}
.fixed{right:0px;left:0px;top:2.25rem;position:fixed;}
.groupinfo .aui-list .aui-list-item:active{background:none}
</style>
  <header class="aui-bar aui-bar-nav  aui-bar-light ">
 <a class="icon icon-xiangzuojiantou  pull-left  aui-padded-l-10 aui-padded-r-10 aui-text-warning"  href="{:es_url('Wap/glist')}" ></a>

    
    <div class="aui-title">
				{$groupinfo['name']}
			</div>
 {if condition="session('member_info')"}
      <a class="aui-pull-right aui-btn external" id="youce" href="{:es_url('Wap/topicadd',array('id'=>$groupinfo['id']))}" >
        <span class="icon icon-yijianfankui aui-text-warning aui-font-size-18"></span>
    </a>
    
    {/if}
    
  </header>
   <div class="content infinite-scroll infinite-scroll-bottom infinite-scroll-groupinfohtml" >
   <div class="dingbu" style="overflow: hidden;background:url('__PUBLIC__/images/group_bg.jpg');background-repeat: no-repeat;background-size: 100% 100%; ">
<div class="aui-btm">


	    	<div class="aui-content groupinfo" >
        <ul class="aui-list aui-bg-trans aui-media-list aui-padded-r-15">
         
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner" >
                    <div class="aui-list-item-media" style="width: 3.5rem;height:3.5rem">
                  
                        <img src="{$groupinfo['cover_id']|get_groupavatar}" id="cover_id" class="aui-list-img-sm aui-img-round" >
                      
                      
                    </div>
                    <div class="" style="width:70%" >
                        <div class="aui-list-item-text ">
                            <div class="aui-list-item-title aui-font-size-14" id="groupname">{$groupinfo['name']}</div>
                          
                           
                        </div>
                          <div class="aui-list-item-text aui-ellipsis-2  aui-font-size-12" id="groupdes">
                          {$groupinfo['describe']}
                        </div>
                       
                         <div class="aui-list-item-text " id="countinfo">
                           帖子:{$groupinfo['topiccount']}&nbsp;&nbsp;关注:{$groupinfo['membercount']}
                        </div>
                    </div>
                         <div class="" style="width:26%" id="hasfocus">
                        {if condition="$groupinfo['hasfocus'] eq 1"}
                        
                     <a href="javascript:;" class="aui-btn aui-btn-success aui-btn-sm aui-btn-block aui-font-size-12 js-add-btn"  onclick="focusgroup();" style="height: 1.5rem;line-height:1.5rem">
                          <span class="icon icon-cuowu aui-font-size-12"></span>&nbsp;取消</a>
                        {else/}
           
                         <a href="javascript:;" class="aui-btn aui-btn-danger aui-btn-sm aui-btn-block aui-font-size-12 js-add-btn"  onclick="focusgroup();" style="height: 1.5rem;line-height:1.5rem">
                          <span class="icon icon-iconfont707 aui-font-size-12"></span>&nbsp;关注</a>
                        {/if} 
     





                         

                        </div>
                    
                </div>
                
             
            </li>
            
        </ul>
    </div>
    </div>
</div>
<div class=" aui-content-bg "  id="tplist">

<div class="content-title" data-toggle="scroller">
<div class="aui-pull-left aui-font-size-14">全部


</div>   

<div class="aui-pull-right aui-font-size-12 " style="color:#707070;" id="paixu" >
    <a href="#" class="create-actions" id="ordername">按最新发表&nbsp;<i class="icon icon-xiangxiajiantou aui-font-size-12"></i></a>
    
    </div>
    





</div>


</div>
<div id="topictab"   >


  <script id="topiclisttpl" type="text/x-dot-template">
 {{ for(var i=0; i< it.length; i++) { }}	
  <div class="aui-card-list aui-border-b hrefa" data-url="{:es_url('Wap/topicdetail')}&id={{=it[i].id}}">
    
     <div class="aui-card-list-header aui-card-list-user dataurla"  style="overflow:hidden;">
                <div class="aui-card-list-user-avatar">
                    <img src="{{=it[i].userhead}}" class="aui-img-round">
                </div>
                <div class="aui-card-list-user-name">
                    <div class="aui-text-info">{{=it[i].nickname}}</div>
                    <div class="aui-font-size-14 text-light"></div>
                </div>
                <div class="aui-card-list-user-info text-light">{{=it[i].create_time}}</div>
            </div>
            <div class="aui-card-list-content-padded aui-padded-t-5 aui-padded-b-5 dataurla" >
                <div class="aui-list-item-title aui-font-size-14">
{{? it[i].settop==1}}               

<span class="aui-label aui-label-info aui-margin-r-5">置顶</span>
  {{?}}
{{? it[i].choice==1}}      
<span class="aui-label aui-label-warning aui-margin-r-5">精</span>
  {{?}}
                {{=it[i].title}}</div>
                    <p class="aui-ellipsis-2 aui-margin-t-10 aui-font-size-12">{{=it[i].descontent}}</p>
                    
                <div class="aui-card-list-content">
                <div class="aui-row aui-row-padded">
               
                    {{ for(var k=0; k< it[i].imagesarr.length; k++) { }}	
                    <div class="aui-col-xs-4 listimg">    
{{=it[i].imagesarr[k]}}
   </div>
                      {{ } }}
                    
                    
                    
                </div>
            </div>
            <div class="aui-info">
                    <div class="aui-info-item aui-font-size-12">
                      
                    </div>
                    <div class="aui-info-item aui-font-size-12">{{=it[i].reply}}回帖</div>
                </div>
                    </div>

        </div>
       
  
  {{ } }}
    </script>   

<div id="hottopiclist" >

</div>
   
   </div>
    

</div>

<script>


var topheight;

var page = 1;
var order = 1;


function focusgroup(){



var url = "{:es_url('Wap/joingroup')}";
 
 var bodyParam = {
		 id:"{$groupinfo['id']}",
     
    }

 $.post(url, bodyParam, function(ret){

 if (ret.code==0) {

if(ret.data.status=='error'){
	$.toast(ret.data.msg);
}else{


	$.toast(ret.data.msg);


if(ret.data.action==1){

$('#hasfocus').find('a').removeClass('aui-btn-danger').addClass('aui-btn-success').html('<span class="icon icon-cuowu aui-font-size-12"></span>&nbsp;取消');
}else{
$('#hasfocus').find('a').addClass('aui-btn-danger').removeClass('aui-btn-success').html('<span class="icon icon-iconfont707 aui-font-size-12"></span>&nbsp;关注');


}

}

}
});

}
function gethottopiclist(page,isAppend,orderid){



order=orderid;

var url = "{:es_url('Wap/getgrouptopic')}";

 
 var bodyParam = {
        id:"{$groupinfo['id']}",
        page:page,
        order:order,
       
    }


  
  
 $.post(url, bodyParam, function(ret){

 if (ret.code==0) {

if(ret.data.status=='error'){
if(page==1){

$("#hottopiclist").html('');

}


}else{


				    var interText = doT.template($("#topiclisttpl").text());
			    
			  
				if (!isAppend) {
					$("#hottopiclist").html(interText(ret.data.info));
				} else {
					$("#hottopiclist").append(interText(ret.data.info));
				}

$('.listimg').find('img').css('height',$('.listimg').find('img').width());
   	$('.hrefa').click(function(){
		
		var url = $(this).data('url');
		$.router.loadPage(url);
		
	});	
}





          
           
        
     }else{
    	 $.toast('数据出错');
     
     }



   
   
   });



}
var current_page=1;

	var oldTop = $('.infinite-scroll-groupinfohtml').scrollTop();


	$('.infinite-scroll-groupinfohtml').on('infinite',debounce(function(){
		
	var newTop = $(this).scrollTop();

	if(newTop-oldTop>0){
		current_page = current_page+1;
	
		gethottopiclist(current_page, true,order);
		
		oldTop = newTop;
}
	
	
},500));
	
	$(document).on('click','.create-actions', function () {
	      var buttons1 = [
	        {
	          text: '请选择',
	          label: true
	        },
	        {
	          text: '按最新回复',
	          bold: true,
	          color: 'danger',
	          onClick: function() {
	        	  $('#ordername').html('按最新回复&nbsp;<i class="icon icon-xiangxiajiantou aui-font-size-12"></i>');
	        	  gethottopiclist(1,false,2);
	          }
	        },
	        {
	          text: '按最新发表',
	          onClick: function() {
	        	  $('#ordername').html('按最新发表&nbsp;<i class="icon icon-xiangxiajiantou aui-font-size-12"></i>');
	        	  gethottopiclist(1,false,1);
	          }
	        }
	      ];
	      var buttons2 = [
	        {
	          text: '取消',
	          bg: 'success'
	        }
	      ];
	      var groups = [buttons1, buttons2];
	      $.actions(groups);
	  });
	
	   window.addEventListener('scroll', function(ev){
		  
		   var oldtitletop = $('.dingbu').position().top;
		   var height = $('.dingbu').height();
		   if(oldtitletop<=0-height){
			  if(!$('#tplist').hasClass('fixed')){
				  $('#tplist').addClass('fixed');
			  }
			   

			   }else{
				   if($('#tplist').hasClass('fixed')){
			   $('#tplist').removeClass('fixed');
				   }
			   }
		
		 
	    }, true);

$('#groupinfohtml').on('pageInit', function(e,id,page) {
	
	  topheight = $('.content-title').offset().top;
      gethottopiclist(1,false,1);

});
  


    
</script>

    </div>
 {/block}