<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/views/common.jsp"%>
<script src="${path}/static/js/echarts.min.js"></script>
<script src="${path}/static/js/jquery.table2excel.js"></script>
<style>
.layui-form-select .layui-edge{
	right:40px;
}
</style>
</head>
<body>
	<div class="layui-form">
	 	<div style="padding: 20px;">
			<div class="layui-row layui-col-space15">
				<div class="layui-card"
					style="border-radius: 20px; border: 2px solid buttonface; box-shadow: 5px 5px 5px #F2F2F2 inset;">
					<div class="layui-card-header"
						style="font-weight: bold; font-size: 18px;">客服大单数据统计</div>
					<form class="layui-form">
						<div class="layui-inline">
							<label class="layui-form-label">时间</label>
							<div class="layui-input-inline edge">
				                <select name="type" id="selectedOption" lay-filter="college">
				                    <option value="day" selected="selected">按日统计</option>
				                    <option value="dayRound">按日期范围统计</option>
				                    <option value="week">按周统计</option>
				                    <option value="month">按月统计</option>
				                </select>
				            </div>
				            <div class="layui-input-inline">
					            <label class="layui-inline" id="worldlable" style="width: 220px;">
					                <input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off" style="width: 190px;">
					            </label>
				            </div>
				        </div>
				        <div class="layui-inline">
							<label class="layui-form-label">所属店铺</label>
							<div class="layui-input-inline edge">
								<select name="roleSearch" id="roleSearch" lay-filter="roleSearch"  lay-search></select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">人员</label>
							<div class="layui-input-inline edge">
								<select name="realname" id="realname" lay-search>
									<option></option>
								</select>
							</div>
						</div>
						<!-- <div class="layui-inline">
							<label class="layui-form-label">根据产品查找</label>
							<div class="layui-input-inline edge">
								<select name="byProTypeLabel" id="byProTypeLabel">
									<option></option>
									<option value="0">否</option>
									<option value="1">是</option>
								</select>
							</div>
						</div> -->
			            <div class="layui-inline">
							<div class="layui-input-block">
								<button type="button" class="layui-btn" id="searchBtn1">查询</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
					<div class="layui-card-body">
						<div id="echartAcount" style="width: 100%; height: 600px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="${path}/js/echartBar_kefu.js" charset="utf-8" ></script>
	<script src="${path}/static/js/dateUtil.js" charset="utf-8"></script>
</body>
<script type="text/javascript">
	// 下拉框第一列添加空的option
	$('#roleSearch').append(new Option("",""));
	layui.use([ 'form', 'layer'],function() {
		var $ = layui.$,
		form = layui.form, 
		layer = layui.layer;
		
		// 获取角色
		$.ajax({
			// 获取所有角色
			// url : '${path}/getRoleList',
			// 获取用户拥有的角色
			url : '${path}/getUserRoles',
			dataType : 'json',
			data : {
			},
			type : 'post',
			success : function(data) {
				// 获取所有角色
				//var datas = data.data.allRoleList
				// 获取用户拥有的角色
				var datas = data.data.userRoleList
				$.each(datas, function(index, item) {
					$('#roleSearch').append(
							new Option(item.roleName, item.roleId));// 下拉菜单里添加元素
					});
				form.render("select");
			}
		});
		
		// 根据店铺获取人员
	    form.on('select(roleSearch)', function(data) {
	    	// 切换按钮清空下拉框(防止一直重复加)
			$("#realname").empty();
			// 下拉框第一列添加空的option
	    	$('#realname').append(new Option("",""));
		    form.render("select");
			$.ajax({
				url:"${pageContext.request.contextPath}/getRealnamesByShopname",
				type : "GET",
				dataType : "json",
				data:{
					shopname:data.value
				},
				success : function(result) {
					$.each(result,function(index,item){
						$('#realname').append(new Option(item,index));//往下拉菜单里添加元素
					});
					layui.form.render("select");
				}
			});
	    })
	})	
</script>
</html>