<div class="content_wrapper">
<style>
    .btn-name {
        white-space: nowrap;
    }
</style>
    <div class="container-fluid">
        <div id="msg-tip"></div>
        <aside>
            <header><i class="fa fa-fw fa-file"></i>活动类型</header>
            <section>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <a style="margin:5px;" class="btn btn-primary <?php if($name=="金蛋")echo "active";?>" href="/#activity/sta/2" role="button">金蛋</a>
                            <a style="margin:5px;" class="btn btn-primary <?php if($name=="气球")echo "active";?>" href="/#activity/sta/3" role="button">气球</a>
                            <a style="margin:5px;" class="btn btn-primary <?php if($name=="偷打")echo "active";?>" href="/#activity/sta/6" role="button">偷打</a>
                            <a style="margin:5px;" class="btn btn-primary <?php if($name=="排行榜")echo "active";?>" href="/#activity/sta/13" role="button">排行榜</a>
                            <a style="margin:5px;" class="btn btn-primary <?php if($name=="排行榜 - 排名")echo "active";?>" href="/#activity/sta/13-rank" role="button">排行榜 - 排名</a>
                        </div>
                    </div>
                </div>
            </section>
        </aside>
        <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-2">
                                    <div class="table-responsive">
                                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th>记录场次</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <?php
                                            if(is_array($list)  && !empty($list)){
                                                foreach ($list as $key => $vl) { ?>
                                                    <tr>
                                                        <td><a href="<?php echo "/#activity/sta/{$id}/{$vl}/".($page-10);?>"><?php echo $vl;?></a></td>
                                                    </tr>
                                                <?php }
                                            } else{?>
                                                <tr>
                                                    <td colspan="10">暂无数据</td>
                                                </tr>
                                            <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                    <nav>
                                        <ul class="pagination">
                                            <li class="disabled"><a href="#">共<span class="pagetotal"><?php echo $total;?></span>条</a></li>
                                            <?php echo $pageurl;?>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="col-sm-10">
                                    <aside>
                                        <header><i class="fa fa-fw fa-file"></i>数据分布</header>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="data" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>
                                <?php if($id == 13){ ?>
                                <div class="col-sm-10 col-sm-offset-2">
                                    <aside>
                                        <header><i class="fa fa-fw fa-file"></i>进度分布</header>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="data_progress" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>	
                                <?php } ?>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>


<script src="<?php echo base_url();?>public/js/common.js"></script>
<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">
    Highcharts.chart('data', {
        chart: {
            type: 'column'
        },
        title: {
            text: '活动数据分布'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [<?php echo implode(",", $interval);?>]
        },
        yAxis: {
            title: {
                text: '人数'
            }
        },
        tooltip: {
            formatter: function () {
                return '<br/>小于等于'+this.x+'<br/>' +
                    '人数: ' + this.y;
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: '<?php echo $name;?>',
            data: [<?php echo implode(",",$data);?>]
        }]
    });
    
    
    <?php if($id == 13){ ?>
    Highcharts.chart('data_progress', {
        chart: {
            type: 'column'
        },
        title: {
            text: '进度分布'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [<?php echo implode(",", $progress);?>]
        },
        yAxis: {
            title: {
                text: '人数'
            }
        },
        tooltip: {
            formatter: function () {
                return '<br/>小于等于'+this.x+'<br/>' +
                    '人数: ' + this.y;
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: '<?php echo $name;?>',
            data: [<?php echo implode(",",$progressData);?>]
        }]
    });
    <?php } ?>
</script>