<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>public/plugins/datatables/jquery.dataTables.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>public/plugins/datatables/extensions/Responsive/css/dataTables.responsive.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="#payment/total1" id="totalForm">

                                        <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="payment_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="payment_etime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>国家</label>
                                            <input type="text" class="form-control" value="<?php if($address) echo $address;?>" placeholder="国家" name="address" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>用户属性</label>
                                            <select name="userType" class="form-control">
                                                <option value="" <?php if($userType=="") echo "selected";?> >所有</option>
                                                <option value="natural" <?php if($userType=="natural") echo "selected";?> >自然量</option>
                                                <option value="buy" <?php if($userType=="buy") echo "selected";?> >买量</option>
                                            </select>
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>付费等级</label>
                                            <select name="groupId" class="form-control">
                                                <option value="0">所有</option>
                                                <?php
                                                foreach($groupList as $row){
                                                    echo '<option value="'.$row['id'].'" '.($groupId==$row['id']?'selected':'').' >'.$row['name'].'</option>';
                                                }
                                                ?>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-primary">查询</button>
                                    </form>
                                </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>
                            <button type="button" class="btn btn-primary" id="all_checked1">全选</button>
                            <button type="button" class="btn btn-primary" id="all_no_checked1">全不选</button>
                            <button type="button" class="btn btn-primary" onclick="initContainer()">折线图</button>
                            <button type="button" class="btn btn-primary" onclick="initContainer('column')">柱形图</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">
                                        <table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th>日期</th>
                                                <th>成功订单数</th>
                                                <th>人数</th>
                                                <th>Google订单成功数</th>
                                                <th>IOS订单成功数</th>
<!--                                                <th>VIVO订单成功数</th>-->
                                                <th>成功订单率</th>
                                                <th>Google订单成功率</th>
                                                <th>IOS订单成功率</th>
                                                <th>支付点击次数</th>
                                                <th>Google支付点击次数</th>
                                                <th>IOS支付点击次数</th>
                                                <th>支付上报成功次数</th>
                                                <th>支付上报取消次数</th>
                                                <th>支付上报失败次数</th>
                                                <th>总金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
												<?php
													foreach($dayList as $k => $v){
												?>
													<tr>
														<td><?php echo $v; ?></td>	
														<td><?php echo $totalRecord[$k]; ?></td>
														<td><?php echo $totalUid[$k]; ?></td>
														<td><?php echo $sidList[1][$k]; ?></td>
                                                        <td><?php echo $sidList[2][$k]; ?></td>
<!--                                                        <td>--><?php //echo $sidList[3][$k]; ?><!--</td>-->
														<td><?php echo $successPercentage[$k]; ?>%</td>
														<td><?php echo $sidPerlList[1][$k]; ?>%</td>
														<td><?php echo $sidPerlList[2][$k]; ?>%</td>
														<td><?php echo $payClickAll[$k]; ?></td>
														<td><?php echo $payClickList[1][$k]; ?></td>
														<td><?php echo $payClickList[2][$k]; ?></td>
														<td><?php echo $payClickSuccess[$k]; ?></td>
														<td><?php echo $payClickCancel[$k]; ?></td>
														<td><?php echo $payClickError[$k]; ?></td>
														<td><?php echo sprintf('%.2f', $totalMoney[$k]); ?></td>
													</tr>
												<?php
													}
												?>
												
												<tr>
													<th>合计</th>
													<td><?php echo array_sum($totalRecord); ?></td>
													<td><?php echo array_sum($totalUid); ?></td>
													<td><?php echo array_sum($sidList[1]); ?></td>
                                                    <td><?php echo array_sum($sidList[2]); ?></td>
<!--                                                    <td>--><?php //echo array_sum($sidList[3]); ?><!--</td>-->
													<td><?php echo array_sum($successPercentage); ?>%</td>
													<td><?php echo array_sum($sidPerlList[1]); ?>%</td>
													<td><?php echo array_sum($sidPerlList[2]); ?>%</td>
													<td><?php echo array_sum($payClickAll); ?></td>
													<td><?php echo array_sum($payClickList[1]); ?></td>
													<td><?php echo array_sum($payClickList[2]); ?></td>
													<td><?php echo array_sum($payClickSuccess); ?></td>
													<td><?php echo array_sum($payClickCancel); ?></td>
													<td><?php echo array_sum($payClickError); ?></td>
													<td><?php echo sprintf('%.2f', array_sum($totalMoney)); ?></td>
												</tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </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 class="col-sm-12">
                                    <div class="table-responsive">
                                        <table id="goodsTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>商品ID</th>
                                                <th>商品名称</th>
                                                <th>购买数量</th>
                                                <th>商品单价($)</th>
                                                <th>商品渠道</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/highcharts.js"></script>
<script src="<?php echo base_url();?>public/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>public/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="<?php echo base_url();?>public/plugins/validate/jquery.validate-1.15.0.min.js"></script>
<script src="<?php echo base_url();?>public/js/payment/total.js"></script>
<script>
    //选择日期
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyy-mm-dd',
        zIndexOffset:906  //控制z-index
    });

    var chart1 = null;
    initContainer();
    function initContainer(type = 'line') {
        chart1 = Highcharts.chart('container', {
            chart: {
                // zoomType: 'xy'
                type: type
            },
            title: {
                text: '支付汇总'
            },
            subtitle: {
                text: '左坐标轴数量，右坐标轴百分比'
            },
            xAxis: [{
                categories: [<?php echo "'" . implode("','", $dayList) . "'";?>],
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '数值',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '百分比',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value} %',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },

            series: [{
                    name: '总金额',
                    data: [<?php echo implode(",", $totalMoney);?>],
                    tooltip: {
                        valueSuffix: '$'
                    }
                }, {
                    name: '安卓 总金额',
                    data: [<?php echo implode(",", $totalMoneyAndroid);?>],
                    tooltip: {
                        valueSuffix: '$'
                    }
                }, {
                    name: 'IOS 总金额',
                    data: [<?php echo implode(",", $totalMoneyIos);?>],
                    tooltip: {
                        valueSuffix: '$'
                    }
                }, {
                    name: 'VIVO 总金额',
                    data: [<?php echo implode(",", $totalMoneyVivo);?>],
                    tooltip: {
                        valueSuffix: '$'
                    }
                }
                , {
                    name: '成功订单数',
                    data: [<?php echo implode(",", $totalRecord);?>],
                    tooltip: {
                        valueSuffix: ' '
                    }
                }, {
                    name: '人数',
                    data: [<?php echo implode(",", $totalUid);?>],
                    tooltip: {
                        valueSuffix: ' '
                    }
                }, {
                    visible: true,
                    name: 'Google订单数',
                    data: [<?php echo implode(",", $totalOrder[1]);?>],
                    tooltip: {
                        valueSuffix: ''
                    }
                }
                , {
                    visible: true,
                    name: 'IOS订单数',
                    data: [<?php echo implode(",", $totalOrder[2]);?>],
                    tooltip: {
                        valueSuffix: ''
                    }
                }
                , {
                    visible: true,
                    name: 'VIVO订单数',
                    data: [<?php echo implode(",", $totalOrder[3]);?>],
                    tooltip: {
                        valueSuffix: ''
                    }
                },
            ]
        });
    }
	$(document).on("click","#all_checked1",function(){
    	$(".highcharts-legend-item").each(function(index){
    		chart1.series[index].show();//显示
    	})
    })
    $(document).on("click","#all_no_checked1",function(){
    	$(".highcharts-legend-item").each(function(index){
    		chart1.series[index].hide();//隐藏
    	})
    })
</script>
