<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Open Park</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="<%=path%>/static/css/font.css">
    <link rel="stylesheet" href="<%=path%>/static/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/static/js/xadmin.js"></script>
    <script src="<%=path%>/static/highcharts/highcharts.js"></script>
    <script src="<%=path%>/static/highcharts/modules/exporting.js"></script>
    <script src="<%=path%>/static/highcharts/modules/export-data.js"></script>
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">订单月份统计</a>
        <a><cite>订单月份统计</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="layui-input-inline">
            <select id="year" class="layui-input">
                <option value="">选择年份</option>
                <option value="2016" <c:if test="${year == '2016'}">selected</c:if>>2016</option>
                <option value="2017" <c:if test="${year == '2017'}">selected</c:if>>2017</option>
                <option value="2018" <c:if test="${year == '2018'}">selected</c:if>>2018</option>
                <option value="2019" <c:if test="${year == '2019'}">selected</c:if>>2019</option>
                <option value="2020" <c:if test="${year == '2020'}">selected</c:if>>2020</option>
                <option value="2021" <c:if test="${year == '2021'}">selected</c:if>>2021</option>
            </select>
        </div>
        <button id="subButton" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
    </div>
    <br>
    <br>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
        </div>
        <div class="layui-col-xs6">
            <div id="container1" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
        </div>
    </div>

</div>
<script>
    Highcharts.setOptions({
        colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: {
                    cx: 0.5,
                    cy: 0.3,
                    r: 0.7
                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        })
    });

    $("#subButton").click(function () {
        var year = $("#year").val()
        initCountChart(year)
        initMoneyChart(year)
    })

    function initMoneyChart(year){
        $.ajax({
            type: "GET",
            url: "<%=path %>/order/moneyCoulumnChart",
            data: {
                year:year
            },
            success: function (data) {
                if(data.state == 0){
                    Highcharts.chart('container',{
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: data.message+'年月份订单金额'
                        },
                        xAxis: {
                            categories: [
                                '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '金额 (元)'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y} 元</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                borderWidth: 0
                            }
                        },
                        series: data.data
                    });
                }else{
                    alert("服务器错误:"+data.message)
                }
            }
        });
    }

    function initCountChart(year){
        $.ajax({
            type: "GET",
            url: "<%=path %>/order/countCoulumnChart",
            data: {
                year:year
            },
            success: function (data) {
                if(data.state == 0){
                    Highcharts.chart('container1',{
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: data.message+'年月份订单数量'
                        },
                        xAxis: {
                            categories: [
                                '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '数量 (个)'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y} 个</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                borderWidth: 0
                            }
                        },
                        series: data.data
                    });
                }else{
                    alert("服务器错误:"+data.message)
                }
            }
        });
    }
    $(function () {
        initCountChart(2021)
        initMoneyChart(2021)
    })
</script>
</body>
</html>