<%@ 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>
<link rel="stylesheet" href="${contextPath}/static/css/jquery.gritter.css"/>
<link rel="stylesheet" href="${contextPath}/static/css/bootstrap-datetimepicker.css"/>
<%@include file="/WEB-INF/page/header.jsp" %>
<script>changeMenu(6, 2);//左边菜单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="container">
        <div class="row">
            开始日期：<input id="startDateM" type="text">
            结束日期：<input id="endDateM" type="text">
            <SELECT NAME="module" id="module">
                <OPTION VALUE="0">成交保费</OPTION>
                <OPTION VALUE="1">提交量</OPTION>
                <OPTION VALUE="2">成交量</OPTION>
                <OPTION VALUE="3">提交保费</OPTION>
            </SELECT>
            <input type="button" id="modelClickID" value="重新加载" style="margin-left: 10px">
            <div id="modeldaily" style="height:400px;" data-toggle="tab"></div>
            <div id="otherText"></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 src="${contextPath}/static/js/bootstrap-tag.js"></script>
<script src="${contextPath}/static/js/jquery.hotkeys.js"></script>
<script src="${contextPath}/static/js/date-time/bootstrap-datepicker.js"></script>
<script src="${contextPath}/static/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${contextPath}/static/js/echarts/echarts.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        $("#row11").click(row11);
        $("#modelClickID").click(modelClickID);

        $('#startDateM').datepicker({
            language: 'zh-CN',
            pickTime: false,
            todayBtn: true,
            autoclose: true,
            minView: '2',
            forceParse: false,
            format: "yyyy-mm-dd"
        });
        $('#endDateM').datepicker({
            language: 'zh-CN',
            pickTime: false,
            todayBtn: true,
            autoclose: true,
            minView: '1',
            forceParse: false,
            format: "yyyy-mm-dd"
        });
    });
    postModelDaily();


    function row11() {
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();
        if (startDate == '') {
            alert('开始日期不能为空！');
            return;
        }
        postDailyData(startDate, endDate);
    }

    //模块查询
    function modelClickID() {
        var startDate = $("#startDateM").val();
        var endDate = $("#endDateM").val();
        var module = $("#module").val();
        var moduleShow = $("#module").find("option:selected").text();
        postModelDaily(module, startDate, endDate, moduleShow);
    }

    function postModelDaily(moduleName, startD, endD, moduleShow) {
        if (startD) {
        } else {
            startD = 1;
        }
        if (endD) {
        } else {
            endD = 1;
        }
        if (moduleName) {
        } else {
            moduleName = 0;
        }
        var charDefa = "成交保费", charName1 = '';
        var modeldailyChar = echarts.init(document.getElementById('modeldaily'));
        var datatime = new Array();
        var dataapp = new Array();
        var datalawyer = new Array();
        if (moduleShow) {
            charName1 = moduleShow;
        } else {
            charName1 = charDefa;
        }
        $.post("${contextPath}/order/getStatisticsDataDetail?type=" + moduleName + "&startD=" + startD + "&endD=" + endD + "", {}, function (result) {
            var data_s = result.voList;
            var totalNum = result.totalNum;
            $("#otherText").html("<p>" + charName1 + totalNum + "</p>");
            for (var x in data_s) {
                var monDate = data_s[x].monDate;
                var num = data_s[x].num;
                datatime.push(monDate);
                dataapp.push(num);
            }
            modeldailyoption = {
                title: {
                    text: '统计报表',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var res = '';
                        if (moduleName == '0' || moduleName == '3') {
                            res = charName1 + ' :' +
                                params[0].data + '万';
                        } else {
                            res = charName1 + ':' +
                                params[0].data + '单';
                        }
                        return res
                    }
                },
                legend: {
                    data: ["多问"]
                },

                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: datatime
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                    }
                ],
                itemStyle: {
                    normal:
                        {
                            show: true, //显示数据值
                            position: 'outer' //显示在外侧
                        }, label: {
                        show: true
                    }
                },
                series: [
                    {
                        name: charName1,
                        type: 'line',
                        data: dataapp
                    }
                ]
            };
            modeldailyChar.setOption(modeldailyoption);
        });
    }
</script>
