<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<div class="content_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-inline" role="form" method="POST" action="#statistics/participation" name="stanpform" id="formParticipation">
                                        <input type="hidden" name="fromsta_np" value="1">
                                        <span class="gap"></span>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>开始时间</label>
                                            <input type="text" class="form-control datetimepicker" value="<?php if($stime) echo $stime;?>" placeholder="开始时间" name="sta_np_stime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>结束时间</label>
                                            <input type="text" class="form-control datetimepicker" value="<?php if($etime) echo $etime;?>" placeholder="结束时间" name="sta_np_etime" />
                                        </div>
                                        <button type="button" class="btn btn-primary" onclick="submitParticipation()">查询</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>

            <div class="row">
                <div class="col-sm-12">
                    <aside>
                        <section>
                            <div class="container-fluid">
                                <div class="row">
                                    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                                </div>
                                <button type="button" class="btn btn-primary" id="all_checked">全选</button>
                            	<button type="button" class="btn btn-primary" id="all_no_checked">全不选</button>
                            </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 class="col-sm-12">
                                        <div class="table-responsive">
                                            <style>
                                                #slotBody td{
                                                        text-align: center;
                                                        vertical-align: middle;
                                                }
                                            </style>
                                            <table id="reportTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                                <thead>
                                                <tr>
                                                    <!--                                    <th rowspan="2" style="text-align: center;vertical-align: middle;">序号</th>-->
                                                    <th style="text-align: center;vertical-align: middle;">日期</th>
                                                    <th style="text-align: center;vertical-align: middle;">类型</th>
                                                    <th style="text-align: center;vertical-align: middle;">开启用户</th>
                                                    <th style="text-align: center;vertical-align: middle;">可玩用户</th>
                                                    <th style="text-align: center;vertical-align: middle;">总用户</th>
                                                    <th style="text-align: center;vertical-align: middle;">可玩参与率</th>
                                                    <th style="text-align: center;vertical-align: middle;">总参与率</th>
                                                    <th style="text-align: center;vertical-align: middle;">总时长</th>
                                                    <th style="text-align: center;vertical-align: middle;">平均时长</th>
                                                    <th style="text-align: center;vertical-align: middle;">总次数</th>
                                                    <th style="text-align: center;vertical-align: middle;">平均次数</th>
                                                </tr>
                                                </thead>
                                                <tbody id="slotBody">
                                                <?php
                                                if(!empty($data)){
                                                    foreach ($data as $val) {
                                                        ?>
                                                            <tr>
                                                                <td style="white-space:nowrap"><?php echo $val['date'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['name'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['openNum'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['canNum'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['total'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['canRate'];?></td>
                                                                <td style="white-space: nowrap"><?php echo $val['allRate'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['duration'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['avgDuration'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['totalTimes'];?></td>
                                                                <td style="white-space:nowrap"><?php echo $val['avgTimes'];?></td>
                                                            </tr>
                                                    <?php } } else{?>
                                                    <tr>
                                                        <td colspan="7">暂无数据</td>
                                                    </tr>
                                                <?php } ?>
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </aside>
                </div>
            </div>
    </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">
    //选择日期
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyy-mm-dd',
        zIndexOffset:906  //控制z-index
    });
    function submitParticipation() {
        //$("#formParticipation").attr('action','#statistics/participation');
        $("#formParticipation").submit();
    }
</script>

<script type="text/javascript">

var chart = Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: '参与率统计'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: <?php echo json_encode(array_reverse($chart['day']), JSON_NUMERIC_CHECK)."\n";?>
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [
        <?php unset($chart['day']);?>
        <?php foreach ($chart as $val){?>
        {
            name:"<?php echo $val['name'];?>",
            data:<?php echo json_encode(array_reverse($val['data']), JSON_NUMERIC_CHECK)."\n";?>
        },
        <?php } ?>
    ]
});

$(document).on("click","#all_checked",function(){
    $(".highcharts-legend-item").each(function(index){
        chart.series[index].show();//显示
    })
})
$(document).on("click","#all_no_checked",function(){
    $(".highcharts-legend-item").each(function(index){
        chart.series[index].hide();//隐藏
    })
})

</script>
