<%@ 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">
<link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<style type="text/css">
.layui-input-inline,.layui-form-label{
	margin-top:10px;
}
.layui-input{
 	width:100%;
}
</style>
</head>
<body>
	<br>
	<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">操作人</label>
			<div class="layui-input-inline">
				<input type="text" id="realname" name="realname"
					placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">所属店铺</label>
			<div class="layui-input-inline edge">
				<select name="shopname" id="shopname" lay-search></select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">金额</label>
			<div class="layui-input-inline">
				<input type="text" id="price" name="price"
					placeholder="金额" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">操作时间</label>
			<div class="layui-input-inline">
                <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>
                    <option value="quarter">按季度统计</option>
                    <option value="year">按年统计</option>
                </select>
            </div>
            <div class="layui-input-inline">
	            <label class="layui-inline" id="worldlable" style="width: 190px;">
	                <input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
	            </label>
            </div>
        </div>
         <div class="layui-inline">
         	 <div class="layui-inline">
				<label class="layui-form-label">操作</label>
				<div class="layui-input-inline">
					<input type="text" id="remark" name="remark"
						placeholder="搜索操作" autocomplete="off" class="layui-input">
				</div>
				</div>
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit
					lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
					<i class="layui-icon layui-icon-search"></i> 查询
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- <div class="layui-inline">
			<label class="layui-form-label">数据时间</label>
			<div class="layui-input-inline">
                <select name="dataByDate" id="dataByDate">
                    <option value="7" selected="selected">7天内</option>
                    <option value="30">30天内</option>
                    <option value="90">90天内</option>
                    <option value="0">全部</option>
                </select>
            </div>
        </div> -->
	</form>
	<br>
	<table class="layui-hide" id="logTable" lay-filter="loginlay"></table>
	<script>
	// 下拉框第一列添加空的option
	$('#shopname').append(new Option("",""));
	layui.use([ 'table', 'form','util','laydate'], function() {
		var $ = layui.jquery,
		table = layui.table,
		form = layui.form,
		util = layui.util,
		laydate = layui.laydate;
		
		//获取用户的角色
		$.ajax({
			url : '${pageContext.request.contextPath}/getUserRoles',
			dataType : 'json',
			data : {
				flag:"customerData"
			}, 
			type : 'get',
			success : function(data) {
				console.log(data)
				var datas = data.data.userRoleList
				$.each(datas, function(index, item) {
					$('#shopname').append(
							new Option(item.roleName, item.roleName));// 下拉菜单里添加元素
				});
				form.render("select");
			}
		});
		
		//生成表格
		table.render({
			elem : '#logTable',
			url : '${pageContext.request.contextPath}/getQuoteLog',
			page : {
				layout:['count','prev','page','next', 'skip','limit']
			},//开启分页
			id : 'quoteAll',
			where : {
				realname : '',
				remark : '',
				shopname : '',
				price	: '',
				quoteTimeBegin: ''
			},
			/* request : {
				'limitName' : 'pageSize' //分页每页条数默认字段改为pageSize
			}, */
			cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			cols : [ [ {
				type : 'numbers',
				width : 50,
				title : '序号',
				fixed : "left"
			},{
				field : 'realname',
				width :  120,
				title : '操作人'
			},{
				field : 'shopname',
				width :  200,
				title : '所属店铺'
			},{
				field : 'remark',
				title : '操作'
			},{
				field : 'quoteTime',
				width :  180,
				title : '操作时间',
  				templet:function(d){
  					return util.toDateString(d.quoteTime, "yyyy-MM-dd HH:mm:ss");
  				}
  			},{
				field : 'quoteIp',
				width :  150,
				title : '操作IP'
			}, {
				field : 'os',
				width :  120,
				title : '操作系统'
			}, {
				field : 'brower',
				width :  150,
				title : '浏览器'
			}] ],
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" 	: 0, //解析接口状态
					"msg" 	: "", //解析提示文本
					"count"	: res.total,//解析数据长度
					"data" 	: res.list//解析数据列表
				};
			}
		});
		
		 //日期范围
		  laydate.render({
		    elem: '#time'
		    ,range: true
		  });
		 
		//点击查询按钮，重载表格
		$('#searchBtn').on('click', function() {
			table.reload('quoteAll', {
				method : 'post',
				where : {
					realname : $("#realname").val(),
					remark 	 : $("#remark").val(),
					shopname : $("#shopname").val(),
					price: $("#price").val(),
					quoteTimeBegin: $("#worldId").val(),
				},
				page : {
					curr : 1
				}
			});
			return false;
		});
	})
	</script>
	<script src="${pageContext.request.contextPath}/static/js/dateUtil.js" charset="utf-8"></script>
</body>
</html>