<!DOCTYPE html>
<html>
	{include file="head.html"}
	<link href="{$skins}group_chat/chat.css" rel="stylesheet">
	<body>
		<div class="header">
			<div class="header-back"></div>
			<div class="header-title">聊天室</div>
		</div>
		<div class="header-row"></div>
		<div class="main-body">
		    <div class="msgbox">
		    	
		    	<div class="msglist">
		    	<div class="msgnote" id="msgnote">你有新消息了</div>
		    	<div class="">
		    	    <div class="scroll-div-y">
		    	        <div  id="msglist">
					 
						
						</div>
		    	    </div>
		    	</div>
		    	</div>
				 
				<div class="sayInput">
					<div id="scrollEnd" style="height: 0px;"></div> 
					<div class="flexinput">
						<input type="text" id="sayCon" />
				 		<div class="btns" id="up-img-btn">传图</div>
						<div id="send" class="btns">发送</div>
					</div>
				</div>
				
			</div>
		
			<div style="display:none ">
				<input type="file" id="up-img-f" >
			
			</div>
		</div>
		<script src="{$skins}group_chat/chat.js"></script>
		<script id="list-tpl" type="text/html">
		 
			<%for(var i in data){%>	
				<%var $c=data[i];%>
			 
				<div class="item ">
					<%if($c.isme){%>
					
						<div class="flex-1">	
							<span class="time"><%=dateFormat($c.dateline,"MM-dd hh:mm:ss")%></span>
							<div class="content"><%=#replace_msg($c.content)%></div>
						</div>
						<div class="user_head">
							<img  src="<%=images_site($c.user_head)%>.100x100.jpg">
							<span class="nick"><%=$c.nickname%></span>
						</div>
					<%}else{%>
						<div class="user_head">
							<img  src="<%=images_site($c.user_head)%>.100x100.jpg">
							<span class="nick"><%=$c.nickname%></span>
						</div>
						<div class="flex-1">	
							<span class="time"><%=dateFormat($c.dateline,"MM-dd hh:mm:ss")%></span>
							<div class="content"><%=#replace_msg($c.content)%></div>
						</div>
					<%}%>
					
					
				</div>
			<%}%>	
		</script>
		{include file="footer.html"}
		<script src="/plugin/lrz/lrz.bundle.js"></script> 
		<script src="/plugin/jquery/template-native.js"></script>
		 
		 
		 
		<script>
			 
			function loaded(){
				 
				getList();
				
			}
			 
			template.helper('replace_msg',function(str){
				return replace_msg(str);
			})
			
			var maxid="{$maxid}";
			var ws;
			var msgNoteIt=0;
			var wsreconnIt=0;
			var chat_userid="{$chat_userid}";
			function wsconn(){
				if(wsreconnIt){
					clearInterval(wsreconnIt);
				}
				ws = new WebSocket(wshost);
				ws.onopen=function(e){
					wsopen(e);
				}
				ws.onmessage=function(e){
					wsmessage(e);
				}
				
				ws.onclose=function(e){
					wsclose(e);
				}
				ws.onerror=function(e){
					wserror(e)
				}
			}
			
			 
			
			function getList(){
				$.get("/module.php?m=group_chat&a=msg&ajax=1",{
					gid:"{$group.gid}",
					chat_roomid:"{$chat_roomid}"
				},function(data){
				 
					var html=template("list-tpl",data.data);
					
					$("#msglist").append(html);
					 
					mui('.mui-scroll-wrapper').scroll({
						deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
					}).scrollToBottom(0);
					 
				},"json")
			}
			function wsopen(){
				console.log("连接成功");
					if(wsreconnIt){
						clearTimeout(wsreconnIt);
					}
					var msg=JSON.stringify({"type":"login","k":"{$chat_userid}","group_id":"{$chat_roomid}"});
					ws.send(msg);
			}
			function wsmessage(e){
				var msg=JSON.parse(e.data);
					if(msg.type=='send'){
						var a={};
						a.data=JSON.parse(msg.data);
						if(msg.chat_userid==chat_userid){
							a.data[0].isme=1;
						}else{
							a.data[0].isme=0;
						}
						
						
						var html=template("list-tpl",a);					
						$("#msglist").append(html);
						mui('.mui-scroll-wrapper').scroll({
							deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
						}).scrollToBottom(0);
					 	$("#msgnote").css({"opacity":1});
					 	if(msgNoteIt){
					 		clearTimeout(msgNoteIt);
					 	}
					 	
					 	msgNoteIt=setTimeout(function(){
					 		$("#msgnote").css({"opacity":0});
					 	},3000);
					}
			}
			function wsclose(e){
				console.log("ws close");
				
				wsreconnIt=setInterval(function(){
					wsconn();
				},3000);
				
			}
			function wserror(e){
				console.log(e);
			}
			$(function(){
				loaded();
				wsconn();
				
				
				$(document).on("click","#send",function(){
					$.post("/module.php?m=group_chat&a=save&ajax=1",{
						content:$("#sayCon").val(),
						chat_userid:"{$chat_userid}",
						chat_roomid:"{$chat_roomid}",
						gid:"{$group.gid}",
					},function(data){
						if(data.error){
							
						}else{
							$("#sayCon").val("");
							var msg=JSON.stringify({
								type:"send",
								chat_userid:"{$chat_userid}",
								group_id:"{$chat_roomid}",
								data:JSON.stringify(data.data)
							});
							ws.send(msg);
						}
					},"json")
				})
			})
			
		</script>
	</body>
</html>
