<div class="layui-side layui-bg-black">
	<div class="layui-side-scroll">
		<#include "/apps/service/include/left.html">
	</div>
</div>
<div class="layui-body">
	<div class="layui-side-scroll">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="site-h1" style="border-top:1px solid #e6e6e6;">
					历史会话<#if agentServiceList??>（${agentServiceList.totalElements}）</#if>
				</h1>
					<span>
						<form class="layui-form" name="search" id="search"	action="/service/history/index.html" method="get" style="float: left;margin-right:5px">
							<div class="layui-form-item" style="width: 700px;padding-left: 5px">
								<div class="layui-inline">
									<div class="layui-input-inline" style="width: auto;margin-right:0px;">
										<label class="layui-form-label" style="width:80px; padding-left: 0px;text-align: left">用户名：</label>
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
									      <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" value="${username!''}" class="layui-input ukefu-input">
									    </div>
									</div>
								</div>
						    	<div class="layui-inline" style="">
						 			<div class="layui-input-inline" style="width: auto;margin-right:0px;">
											<div class="layui-input-inline" style="width: auto;margin-right:0px;">
									        <label class="layui-form-label" style="width: auto;">时间：</label>
												<select name="servicetimetype" class="layui-input ukefu-input" lay-ignore>
													<option value="logindate">咨询时间</option>
													<#if servicetimetype=="servicetime">
														<option value="servicetime" selected>服务时间</option>
													<#else>
														<option value="servicetime">服务时间</option>
													</#if>

												</select>
										    </div>
										<label class="layui-form-label" style="width: auto;">=</label>
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
												<input type="text" name="begin" class="layui-input ukefu-input" value="${begin!''}" id="begin" placeholder="开始时间">
									    </div>
										<label class="layui-form-label" style="width: auto;">~</label>
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
												<input type="text" name="end" class="layui-input ukefu-input" value="${end!''}" id="end" placeholder="结束时间">
									    </div>

									</div>
								</div>

								<div class="layui-inline">
									<div class="layui-input-inline" style="width: auto;margin-right:0px;">
										<label class="layui-form-label" style="width:80px; padding-left: 0px;text-align: left">接入渠道：</label>
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
											<input type="text" name="channel" placeholder="请输入接入渠道" autocomplete="off" value="${channel!''}" class="layui-input ukefu-input">
										</div>
									</div>
								</div>
								<div class="layui-inline" style="margin-right:105px;">
									<div class="layui-input-inline" style="width: auto;margin-right:0px;">
									<label class="layui-form-label" style="width: auto;">分类：</label>
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
											<#assign two=true/>
											<select name="servicetype" id="servicetype"  onchange="deptorservice(this.value)" class="layui-input ukefu-input"   lay-ignore >
												<option value="">请选择分类</option>
												<#if servicetype=="agentno">
												<option value="agentno" selected>服务坐席 </option>
												<option value="skill">技能组 </option>
												<#elseif servicetype=="skill">
													<option value="agentno">服务坐席 </option>
													<option value="skill" selected>技能组 </option>
												<#else>
													<option value="agentno">服务坐席 </option>
													<option value="skill">技能组 </option>
												</#if>
										    </select>
										    <label  >~</label>
											<select name="allocation"  id="allocation" class="layui-input ukefu-input" lay-ignore>
												<option value="">请先选择分类</option>
													<#if servicetype=="agentno">
													  <#if userlist?? >
														<#list userlist as user >
														  <#if allocation??>
															<option value="${user.id}" <#if allocation?? && allocation == user.id>selected="selected"</#if>>${user.uname}</option>
															<#else>
															<option value="${user.id}">${user.uname}</option>
														   </#if>
														</#list>
													  </#if>
													<#elseif servicetype=="skill">
													  <#if deptlist?? >
														<#list deptlist as dept >
														  <#if allocation??>
															 <option value="${dept.id}" <#if allocation?? && allocation == dept.id>selected="selected"</#if>>${dept.name}</option>
														  <#else>
															 <option value="${dept.id}">${dept.name}</option>
														  </#if>
														</#list>
													</#if>
												</#if>
											</select>
										</div>
									</div>
								</div>

								<div class="layui-inline" style="margin-right:0px;">
									<div class="layui-input-inline" style="width: auto;margin-right:0px;">
										<div class="layui-input-inline" style="width: auto;margin-right:0px;">
									      <button class="layui-btn layui-btn-small layui-btn-primary" style="color:#ffffff;">
											  <i class="layui-icon"></i>
											</button>
									    </div>
									</div>
								</div>

							</div>
						</form>
					</span>
				<table class="layui-table" lay-skin="line" style="table-layout: fixed">
					<thead>
						<tr class="design-sortable-tr">
							<th width="11%">用户名</th>
							<th width="10%">接入渠道</th>
							<th width="14.5%">服务坐席</th>
							<th width="13.5%">咨询时间</th>
							<th width="13.5%">服务时间</th>
							<th width="13.5%">等待时长</th>
							<th width="13.5%">服务时长</th>
							<th>地域</th>
						</tr>
					</thead>
					<tbody style="table-layout: fixed; word-break: break-all;">
						<#if agentServiceList?? && agentServiceList.content?? && agentServiceList.content?size gt 0>
						<#list agentServiceList.content as agentService>
						<tr class="tdHasContorllor design-dropable-td">
							<td title="${agentService.username!''}" class="first_td_head" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
								<a href="/service/online/index.html?userid=${agentService.userid!''}&agentservice=${agentService.id!''}">
								${agentService.username!''}
								</a>
							</td>
							<td>
								${agentService.channel!''}
							</td>
							<td title="${agentService.agentusername!''}" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
								${agentService.agentusername!''}
							</td>
							<td><#if agentService.logindate??>${agentService.logindate?string('yyyy-MM-dd HH:mm:ss')}</#if></td>
							<td>
								<#if agentService.servicetime??>
								${agentService.servicetime?string('yyyy-MM-dd HH:mm:ss')}
								</#if>
							</td>
							<td>
								${(agentService.waittingtime/(1000*60*60))?string('00')}:${((agentService.waittingtime%(1000*60*60))/(1000*60))?string('00')}:${((agentService.waittingtime%(1000*60))/(1000))?string('00')}
							</td>

							<td class="minSize ">
								${(agentService.sessiontimes/(1000*60*60))?string('00')}:${((agentService.sessiontimes%(1000*60*60))/(1000*60))?string('00')}:${((agentService.sessiontimes%(1000*60))/(1000))?string('00')}
							</td>
							<td class=" ">${agentService.region!''}</td>
						</tr>
						</#list>
						<#else>
							<tr>
								<td colspan="8" 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('form', function(){
		var form = layui.form();
		form.render(); //更新全部
	});
	var searchData = $("#search :input").serializeArray()
	var searchCondition = "";
	$.each(searchData, function() {
		searchCondition += '&'+this.name+'='+this.value
	});
	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  laypage({
				cont: 'page'
				,pages: <#if agentServiceList??>${agentServiceList.totalPages}<#else>0</#if> //总页数
				,curr:<#if agentServiceList??>${agentServiceList.number+1}<#else>0</#if>
				,groups: 5 //连续显示分页数
				,jump:function(data , first){
					if(!first){
						location.href = "/service/history/index.html?p="+data.curr+searchCondition;
					}
				}
		   });
		});

	layui.use('laydate', function() {
		var laydate = layui.laydate;
	});
	function getNowFormatDate() {
		var date = new Date();
		var seperator = "-";
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = "0" + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = "0" + strDate;
		}
		var currentdate = year + seperator + month + seperator + strDate;
		return currentdate;
	}
	var start = {
		format: 'YYYY-MM-DD',
		max:getNowFormatDate(),//默认最大值为当前日期
		istoday: true,
		choose: function (datas) {
			end.min = datas; //开始日选好后，重置结束日的最小日期
		}
	};
	var end = {
		format: 'YYYY-MM-DD',
		max:getNowFormatDate(),//默认最大值为当前日期
		istoday: true,
		choose: function (datas) {
			start.max = datas; //结束日选好后，重置开始日的最大日期
		}
	};
	document.getElementById('begin').onclick = function () {
		start.elem = this;
		laydate(start);
	};
	document.getElementById('end').onclick = function () {
		end.elem = this;
		laydate(end);
	};
	
	function deptorservice(data){
		$('#allocation').html("");
		if(data=="agentno"){
			$("#allocation").append("<option value=\"\">请选择坐席</option><#if userlist?? ><#list userlist as user ><#if allocation??><option value=\"${user.id}\">${user.uname}</option><#else><option value=\"${user.id}\">${user.uname}</option></#if> </#list> </#if>");
		}else if(data=="skill"){
			$("#allocation").append("<option value=\"\">请选择技能组</option><#if deptlist?? ><#list deptlist as dept ><#if allocation??><option value=\"${dept.id}\">${dept.name}</option><#else><option value=\"${dept.id}\">${dept.name}</option> </#if> </#list> </#if>");
		}else{
			$("#allocation").append("<option value=\"\">请先选择分类</option>");
		}
	}




</script>
