
<div class="content_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>查询</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-inline" role="form" method="POST" action="#coinsValue/index/7" name="stanpform" style="display: inline-block;">
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>开始时间</label>
                                            <input type="text" class="form-control datetimepicker" autocomplete="off" value="<?php if($setTime[0]) echo $setTime[0];?>" placeholder="开始时间" name="stime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>结束时间</label>
                                            <input type="text" class="form-control datetimepicker" autocomplete="off" value="<?php if($setTime[1]) echo $setTime[1];?>" placeholder="结束时间" name="etime" />
                                        </div>
                                        <button type="submit" class="btn btn-primary">查询</button>
                                    </form>
                                    <button type="button" class="btn btn-primary" onclick="show(1)">导出</button>
                                    <button type="button" class="btn btn-primary" onclick="show(2)">筛选</button>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>体力产出分布曲线</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>体力产出分布曲线</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="export" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">导出</h4>
            </div>
            <form id="exportForm" class="form-horizontal" role="form" method="post" action="config/addSharePointListConfig" data-callBack="message">
                <div class="modal-body">
                    <div id="langDivShow" >
                        <div class="form-group">
                            <label class="col-sm-3 control-label">时间</label>
                            <div class="col-sm-9">
                                <input type="text" name="date" class="form-control datetimepicker" autocomplete="off" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">体力产出范围:</label>
                            <div class="col-sm-3">
                                <input type="text" name="min" value="0" class="form-control" />
                            </div>
                            <div class="col-sm-1">
                                --
                            </div>
                            <div class="col-sm-3">
                                <input type="text" name="max" value="0" class="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">筛选</h4>
            </div>
            <form id="filterForm" class="form-horizontal" role="form" method="post" action="config/addSharePointListConfig" data-callBack="message">
                <div class="modal-body">
                    <div id="langDivShow" >
                        <div class="form-group">
                            <label class="col-sm-3 control-label">时间</label>
                            <div class="col-sm-9">
                                <input type="text" name="date" class="form-control datetimepicker" autocomplete="off" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">体力产出途径:</label>
                            <div class="col-sm-9">
                                <?php foreach ($reason as $id=>$name){ ?>
                                    <input type="checkbox" name="way" value="<?php echo $id;?>"><?php echo $name;?>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">玩家分组:</label>
                            <div class="col-sm-9">
                                <?php foreach ($userGroup as $id=>$name){ ?>
                                    <input type="checkbox" name="group" value="<?php echo $id;?>"><?php echo $name;?>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submit2">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>




<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
    function show(type){
        if(type == 1){
            $('#export').modal('show')
        }else{
            $('#filter').modal('show')
        }

    }
    $("#submit").click(function(){
        var obj = {};
        var t = $('#exportForm').serializeArray();
        $.each(t, function() {
            obj[this.name] = this.value;
        });
        if(obj["date"] == ""){
            alert("时间异常");
            return;
        }
        $('#export').modal('hide');
        setTimeout(function(){
            var url = window.btoa(JSON.stringify(obj));
            window.location.href = "coinsValue/export/7/"+url
        },1000)

    });
    $("#submit2").click(function(){
        var obj = {};
        var t = $('#filterForm').serializeArray();
        var way   = [];
        var group = [];
        $.each(t, function() {
            if(this.name == "date"){
                obj[this.name]  = this.value;
            }else if(this.name == "way"){
                way.push(this.value)
            }else if(this.name == "group"){
                group.push(this.value)
            }
        });
        obj["way"] = way;
        obj["group"] = group;
        if(obj["date"] == ""){
            alert("时间异常");
            return;
        }
        if(obj["way"].length == 0 && obj["group"].length == 0){
            alert("筛选异常");
            return;
        }
        $('#export').modal('hide');
        setTimeout(function(){
            var url = window.btoa(JSON.stringify(obj));
            window.location.href = "#coinsValue/indexByParam/7/"+url
        },1000)

    });
    Highcharts.chart('container', {
        title: {
            text: '体力产出'
        },

        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [<?php echo implode(',',$base[0]);?>]
        },
        yAxis: {
            title: {
                text: '玩家数量'
            }
        },
        series: [<?php foreach ($data as $key=>$row){?>
            {
                name: '<?php echo $key?>',
                data: [<?php echo implode(',',$data[$key][0]);?>]
            },
            <?php } ?>
        ],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    Highcharts.chart('container', {
        title: {
            text: '体力产出'
        },

        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [<?php echo implode(',',$base[1]);?>]
        },
        yAxis: {
            title: {
                text: '玩家数量'
            }
        },
        series: [<?php foreach ($data as $key=>$row){?>
            {
                name: '<?php echo $key?>',
                data: [<?php echo implode(',',$data[$key][1]);?>]
            },
            <?php } ?>
        ],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    //选择日期
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyy-mm-dd',
        zIndexOffset:906  //控制z-index
    });
</script>