<script src="/js/CSKeFu_Rest_Request.v1.js"></script>
<script src="/js/CSKeFu_Agent_Invite.v1.js"></script>

<div class="layui-side layui-bg-black layui-left-black">
	<div class="layui-side-scroll">
		<#include "/apps/desktop/include/left.html">
	</div>
</div>
<div class="layui-body">
	<div class="layui-side-scroll">
		<div class="row">
			<div class="col-lg-12" style="position: relative;">
				<div style="position: absolute; right: 0; z-index: 10; padding: 7px;">
					<i class="layui-icon" style="font-size: 20px; cursor:pointer;" onclick="location.reload()">&#x1002;</i>   
				</div>
				<h1 class="site-h1">
					在线客服业务概况
				</h1>
				<div class="row">
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/apps/onlineuser.html" class="ukefu-bt"> 
								<i class="layui-icon ukewo-btn ukefu-measure-btn">&#xe612;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${webIMInvite.inviteusers}/${webIMInvite.refuseusers}</div>
									<div class="ukefu-bt-text-content" style="">访客：已邀请/已拒绝</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/service/agent/index.html" class="ukefu-bt"> 
								<i class="kfont icon-iconfontagent ukewo-btn ukefu-measure-btn ukefu-bg-color-yellow"></i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" id="agentReportAgents" style="font-weight:400;font-size:19px;">${agentReport.agents}/${agents!0}</div>
									<div class="ukefu-bt-text-content" style="">坐席:在线/全部</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/service/quene/index.html" class="ukefu-bt"> 
								<i class="layui-icon ukewo-btn ukefu-measure-btn ukefu-bg-color-pink">&#xe63a;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${agentReport.users}/${agentReport.inquene}</div>
									<div class="ukefu-bt-text-content" style="">会话：服务/排队</div>
								</div>
							</a>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="ukefu-measure">
							<a href="/apps/onlineuser.html" class="ukefu-bt"> 
								<i class="layui-icon ukewo-btn ukefu-measure-btn ukefu-bg-color-green">&#xe62c;</i>
								<div class="ukefu-bt-text">
									<div class="ukefu-bt-text-title" style="font-weight:400;font-size:19px;">${webIMReport.ipnums!0}/${webIMReport.pvnums!0}</div>
									<div class="ukefu-bt-text-content" style="">统计:IP/PV</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<h1 class="site-h1" style="border-top:1px solid #e6e6e6;margin-top:15px;">
					当前在线用户列表<#if onlineUserList??>（${onlineUserList.totalElements}）</#if>
				</h1>
				<table class="layui-table" lay-skin="line" style="word-wrap:break-word; word-break:break-all;table-layout: fixed">
					<thead>
						<tr class="design-sortable-tr">
							<th>用户名</th>
							<th>终端</th>
							<th>操作系统</th>
							<th>浏览器</th>
							<th>访问时间</th>
							<th>停留时间</th>
							<th>地域</th>
							<th>邀请</th>
							<th>拒绝</th>
							<th width="100px">操作</th>
						</tr>
					</thead>
					<tbody>
						<#if onlineUserList?? && onlineUserList.content?? && onlineUserList.content?size gt 0>
						<#list onlineUserList.content as onlineuser>
						<tr class="tdHasContorllor design-dropable-td">
							<td class=" first_td_head">
								<a href="/service/online/index.html?userid=${onlineuser.userid!''}">${onlineuser.username!''}
								<#if onlineuser.contacts??>（${onlineuser.contacts.name!''}）</#if></a>
							</td>
							
							<td class="ukefu-online-client">
								<#if onlineuser.mobile?? && onlineuser.mobile == "1">
								<i class="kfont">&#xe603;</i>
								<#else>
								<i class="kfont">&#xe601;</i>
								</#if>
							</td>
							<td class="ukefu-online-client">
								<#if onlineuser.opersystem?? && onlineuser.opersystem == "windows">
								<i class="kfont">&#xe801;</i>
								<#elseif onlineuser.opersystem?? && onlineuser.opersystem == "linux">
								<i class="kfont">&#xe726;</i>
								<#elseif onlineuser.opersystem?? && onlineuser.opersystem == "mac">
								<i class="kfont">&#xe6be;</i>
								</#if>
							</td>
							<td class=" ">${onlineuser.browser!''}</td>
							<td class=" "><#if onlineuser.createtime??>${onlineuser.createtime?string('yyyy-MM-dd HH:mm:ss')}</#if></td>
							<td class="minSize ">
								${(onlineuser.betweentime/(1000*60*60))?string('00')}:${((onlineuser.betweentime%(1000*60*60))/(1000*60))?string('00')}:${((onlineuser.betweentime%(1000*60))/(1000))?string('00')}
							</td>
							<td class=" ">${onlineuser.region!''}</td>
							<td id="it-${onlineuser.id!''}">${onlineuser.invitetimes!0}</td>
							<td id="rt-${onlineuser.id!''}">${onlineuser.refusetimes!0}</td>
							<td style="white-space: nowrap">
								<#if onlineuser.invitestatus?? && onlineuser.invitestatus == 'invite'>
									<small title="访客已邀请" class="layui-btn layui-btn-mini layui-btn-warm">已邀请</small>
								<#elseif onlineuser.invitestatus?? && onlineuser.invitestatus == 'inserv'>
									<small title="对话中" class="layui-btn layui-btn-mini">对话中</small>
								<#elseif onlineuser.invitestatus?? && onlineuser.invitestatus == 'refuse'>
									<a href="javascript:;" name="${onlineuser.id!''}" title="访客已拒绝邀请" class="layui-btn layui-btn-mini  layui-btn-danger" onclick="sendInvitationToOnlineUser('${onlineuser.id}', false)">再次邀请</a>
								<#else> 	
									<a href="javascript:;" name="${onlineuser.id!''}"  title="邀请访客" class="layui-btn layui-btn-mini  layui-btn-normal" onclick="sendInvitationToOnlineUser('${onlineuser.id}', true)">邀请</a>
								</#if>
                <a href="/service/trace.html?sessionid=${onlineuser.sessionid!''}&userid=${onlineuser.id}" title="查看访客轨迹" data-toggle="ajax" data-width="1050" class="layui-btn layui-btn-mini layui-btn-normal">轨迹</a>
							</td>
						</tr>
						</#list>
						<#else>
							<tr>
								<td colspan="10" style="height:400px;">
									<div class="ukefu-empty" style="background: none;">
										<i class="layui-icon">&#xe63a;</i>
										<div style="">还没有在线访客记录</div>
									</div>
								</td>
							</tr>
						</#if>
					</tbody>
				</table>

			</div>
		</div>
		<div class="row" style="padding:5px;">
			<div class="col-lg-12" id="page" style="text-align:center;"></div>
		</div>
	</div>
</div>

<script>
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  
		  laypage({
				cont: 'page'
				,pages: <#if onlineUserList??>${onlineUserList.totalPages}<#else>0</#if> //总页数
				,curr:<#if onlineUserList??>${onlineUserList.number+1}<#else>0</#if>
				,groups: 5 //连续显示分页数
				,jump:function(data , first){
					if(!first){
						location.href = "/apps/onlineuser.html?p="+data.curr ;
					}
				}
		   });
		  <#if msg?? && msg == 'username_exist'>
			layer.msg('用户名存在，请重新填写',{icon: 2, time: 3000})
		  <#elseif msg?? && msg == 'email_exist'>
			layer.msg('邮件存在，请重新填写',{icon: 2, time: 3000})
		  <#elseif msg?? && msg == 'mobile_exist'>
			layer.msg('手机存在，请重新填写',{icon: 2, time: 3000})
		  </#if>
		});
</script>
