<link rel="stylesheet" href="/public/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css">
<script src="/public/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!--<script type="text/javascript" src="/public/node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>-->
<!--<link rel="stylesheet" href="/public/node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>-->

<link rel="stylesheet" href="<?php echo base_url();?>public/css/vendor/bootstrap/bootstrap-table.css">
<link rel="stylesheet" href="<?php echo base_url();?>public/css/vendor/bootstrap/table-fix-column.css">

<script src="<?php echo base_url();?>public/js/vendor/bootstrap/src/bootstrap-table.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/bootstrap/src/table-fix-column.js"></script>

<style type="text/css">
    table {
        table-layout:fixed !important;
    }

    th{
        background: rgb(146, 208, 80);
    }

    td,th{
        text-align: center;
        /*max-width: 400px;*/
        word-wrap: break-word;
    }
    /*
    .fixed-table-header .table{
        height: 100px;
    }
    */

    table{
        table-layout:auto !important;
    }

    .table-hover > tbody > tr:hover {
        background-color: #c8bd6d;
    }

    input {
        width:60px;
    }

    #roleTable tr:nth-child(5n){
        /*background:rgb(198, 239, 206);*/
    } /**隔五行*/

    .fixed-table-toolbar {
        display: none;
    }
    .fileinput-button {
        position: relative;
        top: -5px;
    }

    .fileinput-button input{
        position:absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
    }
    #reportBody tr td:nth-child(6),#reportBody tr td:nth-child(11),#reportBody tr td:nth-child(12),#reportBody tr td:nth-child(15){
        color:red !important;
    }
    .fixed-table-body{
        /*overflow-x: visible;*/
        /*overflow-y: visible;*/
        /*height: auto;*/
    }
    .fixed-table-header{
        /*display: none;*/
        /*overflow:visible;*/
    }
    #roleTable{
        margin-top: -41px !important;
    }
</style>

<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="#club/memberNumSta" name="stanpform">
                                        <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="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="etime" />
                                        </div>
                                        <span class="gap"></span>
                                        <button type="submit" class="btn btn-primary">查询</button>
<!--                                        <button type="button" class="btn btn-success" onclick="show(1)">导出</button>-->
                                    </form>

                                </div>
                            </div>

                        </div>
                    </section>
                </aside>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <div class="table-responsive">
                        <table   class="table table-bordered table-hover"
                                 data-classes="table table-hover"
                                 data-show-columns="true"
                                 data-striped="true"
                                 data-height="700"
                        ><?php if(!empty($staData)){ ?>
                            <thead>
                            <tr>
                                <th rowspan="2">公会人数区间</th>
                                <?php
                                    foreach($staData as $date => $record){
                                        echo '<th colspan="2">'.$date.'</th>';
                                    }
                                ?>
                            </tr>
                            <tr>
                                <?php
                                    foreach($staData as $record){
                                        echo '<th>公会数量</th>';
                                        echo '<th>占全部公会比例</th>';
                                    }
                                ?>
                            </tr>
                            </thead>
                            <tbody id="reportBody">
                            <?php foreach ( $memberNumMap as $nums) { ?>
                            <tr>
                                <td style="text-align: center;vertical-align: middle;"><?=$nums?></td>
                                <?php foreach ( $staData as $row) {?>
                                    <td style="text-align: center;vertical-align: middle;"><?=$row[$nums]['nums'] ?? '-'?></td>
                                    <td style="text-align: center;vertical-align: middle;"><?=$row[$nums]['percent'] ?? '-'?></td>
                                <?php }?>
                            </tr>
                            <?php }?>
                            </tbody>
                            <?php } else{?>
                                <thead>
                                <tr>
                                    <th rowspan="2">数据为空</th>
                                </tr>
                                </thead>
                            <?php }?>
                        </table>
                    </div>
                </aside>
            </div>
        </div>


    </div>
</div>
</div>
<script src="<?php echo base_url();?>public/js/common.js"></script>
<script>
    $('.selectpicker').on('changed.bs.select',function(e){
        console.log($(this).parents('.form-group').find('.formValue'))
        $(this).parents('.form-group').find('.formValue').val($(this).val())
    });
    $(document).ready(function() {
        $('.selectpicker').selectpicker({
            'selectedText': 'cat'
        });
        $('#addressTemp').selectpicker('val',['<?php echo is_array($address)?implode("','",$address):$address;?>']);
        $('#trackers_group_type').selectpicker('val',['<?php echo is_array($trackers_group_type) ? implode("','",$trackers_group_type):$trackers_group_type;?>']);
    });

    function show(){
        window.location.href = "/adjuststa/exportAdjustData/<?php echo $stime; ?>/<?php echo $etime; ?>/<?php echo $type; ?>/<?php echo $address; ?>/<?php echo is_array($trackers_group_type) ? implode("___",$trackers_group_type):$trackers_group_type;?>/<?php echo $user_os; ?>"
    }
</script>
<script type="text/javascript">

        //选择日期
        $('.datetimepicker').datepicker({
            language:'zh-CN',
            format:'yyyy-mm-dd',
            autoclose:true,
            zIndexOffset:906  //控制z-index
        });


</script>