<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><spring:message code="menu.consignee_info_set" /></title>
<script type="text/javascript" src="<%=basePath%>resource/easyui/jquery.min.js?version=${version}"></script>
<script type="text/javascript"
	src="<%=basePath%>resource/validate/jquery.validate.js?version=${version}"></script>
<script type="text/javascript"
	src="<%=basePath%>resource/validate/validate-extends.js?version=${version}"></script>
<!-- validate 验证中英文 -->
<script type="text/javascript"
	src="<%=basePath %>resource/validate/jquery.validate-${pageContext.response.locale}.js?version=${version}"></script>
<link rel="stylesheet" href="<%=basePath%>resource/layui/css/layui.css?version=${version}"
	media="all">
<script type="text/javascript" src="<%=basePath%>resource/layui/layui.js?version=${version}"></script>
<script type="text/javascript" src="<%=basePath%>resource/js/tools.js?version=${version}"></script>
</head>
<body>
	<div>
		<div class="layui-row">
			<div class="layui-col-md1">
				<h4 style="margin-top: 10px;">交运货站:</h4>
			</div>
			<div class="layui-col-md2" style="margin-left: -30px;">
				<form class="layui-form">
					<select id="status" name="status">
						<option value="-1">全部</option>
						<option value="0">西货运区国内主体货站</option>
						<option value="1">西货运区国际主体货站</option>
						<option value="2">西货运区国际二级货站</option>
						<option value="2">西货运区国际综保货站</option>
						<option value="2">西货运区国际快邮货站</option>
					</select>
				</form>
			</div>
			
			<div class="layui-col-md1">
				<h4 style="margin-top: 10px; margin-left: 30px;">付款月份:</h4>
			</div>
			
			<div class="layui-col-md2">
				<input type="text" class="layui-input" id="start_time" name="start_time" autocomplete="off">
			</div>
			<div class="layui-col-md2" style="margin-left: 10px;">
				<input type="text" class="layui-input" id="end_time" name="end_time" autocomplete="off">
			</div>
			<div class="layui-col-md1" style="margin-left: 10px;">
				<button class="layui-btn layui-btn-normal" onclick="doSearch()">搜索</button>
			</div>
		</div>
		<table id="data-table" class="layui-hide" lay-filter="data-table"></table>
	</div>
	
	<script type="text/html" id="opt-bar">
		<div class="layui-btn-group">
  			<button class="layui-btn layui-btn-sm" lay-event="details">
    			明细
  			</button>
		</div> 
	</script>

	<script>
		var layer;
		layui.use(['layer','element','laydate'], function() {
			layer = layui.layer;
			var element = layui.element;
			
			var laydate = layui.laydate;
			laydate.render({
				elem : '#start_time',
				format: "yyyy-MM-dd",
				value: new Date()
			});

			laydate.render({
				elem : '#end_time',
				format: "yyyy-MM-dd",
				value: new Date()
			});
		});
	
		$(window).load(function() {
			doSearch();
		});

		var table;
		function doSearch() {
			var api = "<%=basePath%>billcheck/search";
			var start_date = $("#start_time").val();
			var end_date = $("#end_time").val();
			
			layui.use('table', function() {
				table = layui.table;
				table.render({
					elem : '#data-table',
					url : api,
					limit : 10,
					page : true,
					loading : true,
					limits : [ 10, 15, 20, 25, 30, 35, 40, 45, 50 ],
					text : {none:'暂无数据'},
					cols : [ [ //表头
					{
						field : 'code',
						title : '运单号',
						width : 120
					}, {
						field : 'eiflag',
						title : '进出港标识'
					}, {
						field : 'diflag',
						title : '国际国内标识'
					}, {
						field : 'station',
						title : '营业点'
					}, {
						field : 'cdate',
						title : '计费时间'
					},{
						field : 'cusnm',
						title : '缴费人'
					}, {
						field : 'paymode',
						title : '支付方式'
					},{
						field : 'total',
						title : '总计',
						width : 100
					},{
						field : '',
						title : '操作',
						toolbar : '#opt-bar',
						width : 80
					} ] ]
				});
			});
		}
		
		layui.use('table', function() {
			var table = layui.table;
			table.on('tool(data-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'details') { 
					//明细
					
				}
			});
		});
		
	</script>
</body>
</html>