<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>欢迎页面-X-admin2.0</title>
        <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="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./static/css/font.css">
        <link rel="stylesheet" href="./static/css/xadmin.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
    </head>
    <body onload="InitParams({{.Server_id}}, {{.Days}})">
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">
          指定服务器:<input id="server_id" type="text" name="服务器ID" />

          过往天数:<input id="days" type="text" name="天数" />
          <br>
          <br>
          <input class="layui-btn" type="button" onclick="submitUpdate()" value=刷新>
              
          <input class="layui-btn" type="button" onclick="submitDownload()" value=下载>
        </blockquote>
    </div>
    <div id="container" style="width: 1600px; height: 800px; margin: 0 auto"></div>
    <script language="JavaScript">
      $(document).ready(function() {
        var chart = {
          type: 'column'
        };
        var title = {
            text: '商品统计'   
        };
        var subtitle = {
            text: '来源:游戏服'
        };
        var xAxis = {
            title: {
              text: '商品id'
            },
            tickPixelInterval: 1,
            categories: {{.Categories}}
        };
        var yAxis = {
            title: {
              text: '数量(件)'
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
        };   

        var tooltip = {
          valueSuffix: '件'
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series =  [
        ];
        var list = {{.Series}}

        for ( var i= 0; i < list.length; i++){

          series.push({"name":list[i].Name, "data":eval(list[i].Data)})
        }


        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;
        json.chart = chart;

        $('#container').highcharts(json);

      });

      function InitParams(ServerId, Days) {
        if (ServerId.length > 0) {
            document.getElementById("server_id").value = ServerId;
        }
        if (Days != null && Days > 0) {
            document.getElementById("days").value = Days;
        }
      }
    
      function submitUpdate () {
        var sid = document.getElementById("server_id").value;
        var days = document.getElementById("days").value;
        var text = "server_id=" + encodeURI(sid) + "&days=" + encodeURI(days) ;
        
        $.ajax({
          type:"get",
          url:"/goods?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/goods?"+text;
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/goods?"+text;
              }
            }
          }
        });
      }
      function submitDownload () {
        var sid = document.getElementById("server_id").value;
        var days = document.getElementById("days").value;
        var text = "server_id=" + encodeURI(sid) + "&days=" + encodeURI(days) + "&querydata=goods";
        
        $.ajax({
          type:"get",
          url:"/goods?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/goods?"+text;
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/goods?"+text;
              }
            }
          }
        });
      }
    </script>
    </body>
</html>