{layout name="layout" /}
<div class="boxwraper">
      <div class="leftwraper">
		        <div class="contentwraper">
		            <div class="navs">
				            <a href="{:url('index')}" class="active"><i class="fa fa-angle-left"></i> 返回上一页</a>
				     </div>
		            <div class="content">
							<style>
							.chatcontent p{padding:0px 8px !important;margin:0px !important;font-size:1.2rem !important;line-height:1.8rem !important;}
							.chatcontent .title{font-size:1.4rem !important;;line-height:1.8rem !important;margin:10px 0px;display:block;}
							.chatcontent img{max-width:100%;}
                            .chatbox{background:rgba(244,242,245,1);min-height:400px;}
							.chatinput {width: 100%;background: #fff;padding: 8px 0px;}
							.chatinput .input {display: inline-block;vertical-align: top;width: 78%;}
							.chatinput input {background: #f4f5f8;border-radius: 10px;border: none;height: 2.8rem;width: 100%;outline: none;text-indent: 10px;}
							.chatinput .btn {display: inline-block;vertical-align: top;width: 20%;text-align: center;float:right;}
							.chatinput button {height: 2.4rem;margin-top: 0.2rem;width:100%;background: url({$yf_home_path}public/images/btnbg.jpg) repeat-x;outline: none;border: none;color: #fff;border-radius: 6px;outline: none;}
					
							.chatbox {
							    overflow-y: auto;
							    overflow-y: scroll;
							    scrollbar-width: none;
							    -ms-overflow-style: none;
							    overflow-y: auto;
							    overflow-x: hidden;
							    -webkit-box-flex: 2;
							    -ms-flex: 2;
							    flex: 2;
                                height:500px;
								padding:10px 15px;
							}
							.chatbox .chatitem .chatbody {
							    flex: 1;
							}
							.chatitem .avatar {
							    margin-right: .3rem!important;
							}
							.chatitem {
							    display: flex!important;
								margin-top:10px;
							}
							
							.chatbox .chatitem .msgrow{ margin-top:8px;align-items: center!important;display: flex!important;}
							.chatbox .right .msgrow{justify-content: flex-end!important;}
							.chatbox .chatitem .chatcontent {
							    background-color:#fff;
							    max-width: 90%;
							    min-width: 10%;
							    border-radius: 0 10px 10px 10px;
							    font-size:15px;
								padding:0.6rem!important;
							}
							.chatbox .chatitem.right {
							    text-align: right;
							}
							.chatbox .red{color:#9f2925;}
							.chatbox .chatitem.right .chatcontent {
							    background-color:#9f2925;
								color:#fff;
							    text-align: left;
							    border-radius: 15px 0 15px 15px;
							}
							.avatar img{
							    height:32px;
							    width: 32px;
							    font-size: 12px;
								border-radius:50%;
							}		
				            </style>
							<div class="chatbox">
									<div class="container">
											<ul class="chatlist">
											</ul>
									</div>
							</div>
							
							<div class="chatinput">
							     <div class="input">
							          <input type="text" name="word" id="word">
							     </div>
							     <div class="btn">
							             <button id="send">发送</button>
							     </div>
							</div>
					</div>
               </div>
     </div>
      <div class="rightwraper">
          <div class="hots">
               <div class="title">讨论最热帖子</div>
               <div class="wraper">
                    {volist name="hots" id="vo"}
				         <div class="ritem">
				             <a href="{:url('detail',['id'=>$vo['id']])}" >{$vo.name|RemoveXSS}</a>
				         </div>
					{/volist}
               </div>
          </div>
          <div class="interested">
               <div class="title">你可能最感兴趣的帖子</div>
               <div class="wraper">
                    {volist name="marrows" id="vo"}
				         <div class="ritem">
				             <a href="{:url('detail',['id'=>$vo['id']])}" >{$vo.name|RemoveXSS}</a>
				         </div>
					{/volist}
               </div>
          </div>
          <div class="postbtn">
             <a href="{:url('article')}" target="__blank"><img src="{$yf_home_path}public/images/postbtn.png" class="wid100"></a>
             <a href="{:url('home/center/mybbs')}" target="__blank"><img src="{$yf_home_path}public/images/userbtn.png" class="wid100"></a>
          </div>
      </div>
</div>               							
<script src="{$yf_theme_path}public/js/layer/layer.js"></script>
<script>
var catehtml='';
var qlist=[];
var rlist=[];
var first=true;
  function getTime(){
		var myDate=new Date();
		return myDate.getHours()+":"+myDate.getMinutes();
  }

  function scrollToEnd(){
          var h = $(".chatlist").height()-400;
		  $('.chatbox').animate({scrollTop:h},800);
  }	 
  function postHistory(fields){
	    var url="{:url('history',['uid'=>$uid,'type'=>$type])}";
		$.post(url,fields,function(data){});
  }
  function getlogs(){
	  var url="{:url('ajaxchat',['uid'=>$uid,'type'=>$type])}";
	  $.get(url,function(data){
		  var res=data.data;
          if(res.length){
        	  var html='';
        	  res.forEach(function(item,key){
        		  var poster=item.poster;
        		  if(typeof poster=='undefined'||poster==''){
        			  poster="{$yf_theme_path}/public/img/peo.png";
        		  }
        		  {if condition="$type eq 'replay'"}
	        		  if(typeof item.ques!='undefined'&&item.ques){
					      html+='<li class="chatitem right"><div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
						  html+='<div class="msgrow "><div class="chatcontent">'+item.ques+'</div></div></div></li>';
	        		  }
	        		  if(typeof item.ans!='undefined'&&item.ans){
						  html+='<li class="chatitem "><div class="avatar"><img  src="'+poster+'"  οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div>';
						  html+='<div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'</span><div class="msgrow"><div class="chatcontent">'+item.ans+'</div></div></div></li>';
	        		  }
        		  {else}
	        		  if(typeof item.ques!='undefined'&&item.ques){
						  html+='<li class="chatitem "><div class="avatar"><img  src="'+poster+'"  οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div>';
						  html+='<div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'</span><div class="msgrow"><div class="chatcontent">'+item.ques+'</div></div></div></li>';
	        		  }
	        		  if(typeof item.ans!='undefined'&&item.ans){
					      html+='<li class="chatitem right"><div class="chatbody"><span class="datetime">'+item.nickname+','+item.time+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
						  html+='<div class="msgrow "><div class="chatcontent">'+item.ans+'</div></div></div></li>';
	        		  }
        		  {/if}
        	  });
			  $(".chatlist").html(html);
          }
          scrollToEnd();
	  });
  }
$(function(){
	getlogs();	
	setInterval(function(){
		getlogs();	
	},20000);
	$("#send").click(function(){
		  var index=layer.load(1, {shade: [0.1,'#fff']});
		  var word=$("#word").val();
		  word=word.trim();
		  if(typeof word=='undefined'||word==''){
			  return false;
		  }
		  var poster="{$poster}";
		  if(typeof poster=='undefined'||poster==''){
			  poster="{$yf_theme_path}/public/img/peo.png";
		  }
		  var html='<li class="chatitem"><div class="avatar"><img  src="'+poster+'"  οnerrοr="javascript:this.src=\'{$yf_theme_path}/public/img/peo.png\';" /></div><div class="chatbody"><span class="datetime">{$nickname},'+getTime()+'<i class="zmdi zmdi-check-all text-primary"></i></span>';
		  html+='<div class="msgrow "><div class="chatcontent">'+word+'</div></div></div></li>';
		 
		  $(".chatlist").append(html);
		  scrollToEnd();
		  $("#word").val('');
		  layer.close(index);
		  {if condition="$type eq 'replay'"}
		  postHistory({'ans':word});
		  {else}
		  postHistory({'ques':word});
		  {/if}
	}); 
}); 
</script>