<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<%@include file="/WEB-INF/page/header.jsp" %>
<script>changeMenu(6, 1);//左边菜单active</script>
<div class="row white-bg border-bottom white-bg page-heading">
    <div class="col-lg-12">
        <h2>订单统计</h2>
        <ol class="breadcrumb">
            <li>主页</li>
            <li><a>订单统计</a></li>
            <li class="active" id="navigationList"><strong>订单统计表</strong></li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12" id="gridTable1List">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="input-sm form-control" placeholder="选择开始月份" id="startDate">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="input-sm form-control" placeholder="选择结束月份" id="endDate">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-sm btn-primary" onclick="search()"> 查询</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 jqGrid_wrapper">
                        <table id="gridTable1"></table>
                        <div id="gridPager1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" id="gridTable1Review" style="display:none">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content" id="gridTable1ReviewDetail">
            </div>
        </div>
    </div>
</div>
</div>
<%@include file="/WEB-INF/page/footer.jsp" %>

<link href="${contextPath}/static/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="${contextPath}/static/css/plugins/jqGrid/ui.jqgrid.css" rel="stylesheet">
<link href="${contextPath}/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link href="${contextPath}/static/ssdb/ace.fileinput.css" rel="stylesheet"/>

<script src="${contextPath}/static/js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${contextPath}/static/js/plugins/jqGrid/i18n/grid.locale-cn.js"></script>
<!-- Data picker -->
<script src="${contextPath}/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>

<script src="${contextPath}/static/js/plugins/lazyload/jquery.lazyload.js"></script>
<script>
    var gridTable1 = null;
    var grid_selector = "#gridTable1";
    var pager_selector = "#gridPager1";
    jQuery(function ($) {
        $('#startDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

        $('#endDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

        initGridTable();

        // resize to fit page size
        $(window).on("resize.jqGrid", function() {
            $(grid_selector).jqGrid("setGridWidth", $(".page-content").width());
        });
        // resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest("[class*='col-']");
        $(document).on("settings.ace.jqGrid", function(ev, event_name, collapsed) {
            if (event_name === "sidebar_collapsed" || event_name === "main_container_fixed") {
                // setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function() {
                    $(grid_selector).jqGrid("setGridWidth", parent_column.width());
                }, 0);
            }
        });

        $(document).one('ajaxloadstart.page', function(e) {
            $(grid_selector).jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
        });

        $.fn.raty.defaults.path = '${contextPath}/static/js/plugins/raty/img';
        $.fn.raty.defaults.readOnly = true;

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            gridTable1.setGridWidth(width);
        });

    });

    function initGridTable(){
        gridTable1 = jQuery(grid_selector).jqGrid({
            subGrid : false,
            url : "${contextPath}/order/getstatisticsData",//
            datatype : "json",
            height : "auto",
            autowidth:true,
            colModel : [{
                name : "dateStr",
                index : "dateStr",
                label : "月份",
                width : 120,
                search : false
            },{
                name : "ordersCommit",
                index : "ordersCommit",
                label : "提交单量",
                width : 120,
                search : false
            },{
                name : "ordersDeal",
                index : "ordersDeal",
                label : "成交单量",
                width : 200,
                search : false
            },{
                name : "bfCommit",
                index : "bfCommit",
                label : "提交保费(元)",
                width : 100,
                search : false
            },{
                name : "bfDeal",
                index : "bfDeal",
                label : "成交保费(元)",
                width : 100,
                sortable: false,
                search : false
            }],
            sortname : "createDate",
            sortorder : "desc",
            viewrecords : true,
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            pager : pager_selector,
            altRows : true,
            //toppager : true,
            multiselect : false,
            //multikey : "ctrlKey",
            multiboxonly : true,
            rownumbers:true,
            rownumWidth:30,

        });
    }

    function search(){
        var startDate =$("#startDate").val();
        var endDate =$("#endDate").val();
        gridTable1.setGridParam({postData:{'startDate':startDate,'endDate':endDate},url : '${contextPath}/order/getstatisticsData',page:1}).trigger('reloadGrid');
    }
</script>



