<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>
<style type="text/css">
    .col-xs-5ths {
        border: solid lightgray 1px;
        width: 16.66%;
        float:left;
        border-left:none;
        text-align: center;
        height: 130px;
        border-bottom: none;
    }
    .col-xs-5ths:first-child {
        border-left:solid lightgray 1px;
    }
    .header-data {
        font-size: 35px;
        font-weight: 500;
    }
    .col-xs-5ths label {
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 0;
        margin-top:10px;
    }
    .second-row > .col-xs-5ths {
        border-bottom: solid lightgray 1px;
    }
    .section-first {
        margin-left: 15px;
        margin-right: 15px;
    }
    .chart-pos {
        margin-right: -65%;
    }

    @media screen and (max-width:700px) {
        .col-xs-5ths {
            position: relative;
        }
        .col-xs-5ths label {
            font-size: 1rem;
        }

        .header-data {
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 1rem;
        }

        .chart-pos {
            position: absolute;
            bottom: 9%;
        }
    }
</style>
<div class="content_wrapper">
    <div class="row">
        <div class="col-sm-12">
            <aside>
                <section class="section-first" style=" border: none;">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-5ths">
                                 <label>新增用户</label>
                                 <div class="header-data"><?php echo $todayNew ?? 0;?></div>
                                 <div class="header-data" style="font-size:12px;">
                                 <?php 
                                	$temp = end($newplayerData);
                                	echo $temp;
                                 ?>
                                 </div>
                                 <a href="#statistics/index" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths">
                                 <label>活跃用户</label>
                                <div class="header-data"><?php echo $todayLogin ?? 0;?></div>
                                <div class="header-data" style="font-size:12px;">
                                 <?php 
                                	$temp = end($loginData);
                                	echo $temp;
                                 ?>
                                 </div>
                                <a href="#statistics/login" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths">
                                 <label>付费用户</label>
                                <div class="header-data"><?php echo $todaySuccessPayNum ?? 0;?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $lastDaySuccessPayNum;
                                 ?>
                                 </div>
                                <a href="#payment/total1" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths">
                                 <label>付费金额</label>
                                <div class="header-data"><?php echo number_format($todayPayMoney,2,".","") ?? 0;?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	$temp = end($payment['totalMoney']);
                                	echo round($temp,2);
                                 ?>
                                 </div>
                                <a href="#payment/total1" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths" >
                                 <label data-toggle="tooltip" title="所有的用户中首次付费的用户数">首次付费用户</label>
                                <div class="header-data"><?php echo $firstPayPlayerNum ?? 0;?></div>
                                <div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $firstPayPlayerNumLastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/FP" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths">
                                 <label  data-toggle="tooltip" title="今日新增的用户中首次付费的用户数">新增付费用户</label>
                                <div class="header-data"><?php echo $newPayNum ?? 0;?></div>
                                <div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $newPayNumLastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/NPP" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>

                        </div>
                        <div class="row  second-row">
                            <div class="col-xs-5ths">
                                 <label   data-toggle="tooltip" title="(FB邀请+邀请码邀请)/新增" >自传播占比</label>
                                <div class="header-data"><?php echo $AARRR ?? '0%';?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $AARRRLastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/AARRR" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths" >
                                 <label data-toggle="tooltip" title="付费人数/DAU">付费率</label>
                                <div class="header-data"><?php echo $payRate ?? '0%';?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $payRateLastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/PR" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths" >
                                 <label data-toggle="tooltip" title="付费金额/DAU">ARPU</label>
                                <div class="header-data"><?php echo $payARPU ?? 0;?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $payARPULastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/ARPU" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths" >
                                 <label  data-toggle="tooltip" title="付费金额/付费人数">ARPPU</label>
                                <div class="header-data"><?php echo $payARPPU ?? 0;?></div>
								<div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $payARPPULastDay;
                                 ?>
                                 </div>
                                <a href="#welcome/keydataDetail/ARPPU" class="chart-pos"><i class="fa fa-line-chart"></i></a>
                            </div>
                            <div class="col-xs-5ths">
                                 <label>累计付费用户</label>
                                <div class="header-data"><?php echo $allPayNum ?? 0;?></div>
                            </div>
                            <div class="col-xs-5ths">
                                 <label>人均时长</label>
                                <div class="header-data"><?php echo $loginAvg ?? 0;?></div>
                                <div class="header-data" style="font-size:12px;">
                                 <?php 
                                	echo $loginAvgLastDay;
                                 ?>
                                 </div>
                                <a onclick="showTime()" class="chart-pos"><i class="fa fa-download"></i></a>
                            </div>
                        </div>
                    </div>
                </section>
            </aside>
        </div>
    </div>

    <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">-->
<!--                                    <aside>-->
<!--                                        <section>-->
<!--                                            <div class="container-fluid">-->
<!--                                                <div class="row">-->
<!--                                                    <div id="online"></div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </section>-->
<!--                                    </aside>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </section>-->
<!--                </aside>-->
<!--            </div>-->
            <div class="col-sm-6">
                <aside>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <aside>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="newplayremain"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
            <div class="col-sm-6">
                <aside>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <aside>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="activityremain"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
            <div class="col-sm-6">
                <aside>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <aside>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="loginplayer"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
            <div class="col-sm-6">
                <aside>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <aside>
                                        <section>
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div id="payment"></div>
                                                </div>
                                            </div>
                                        </section>
                                    </aside>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="top: 20%;width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">导出基本数据</h4>
            </div>
            <div class="modal-body" id="uploadImg" style="text-align: center;">
                <div class="form-group">
                    <label>开始时间：</label>
                    <input type="text" class="form-control datetimepicker" style="display: inline-block;width: 70%" value="" id="stime" placeholder="开始时间" name="moneyinout_stime" />
                </div>
                <span class="gap"></span>
                <div class="form-group">
                    <label>结束时间：</label>
                    <input type="text" class="form-control datetimepicker" style="display: inline-block;width: 70%" value="" id="etime" placeholder="结束时间" name="moneyinout_etime" />
                </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>
        </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" src="<?php echo base_url();?>public/js/highcharts/modules/export-data.js"></script>
<script type="text/javascript">

$(function () {
    //选择日期
    var curDate = new Date();
    var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyymmdd',
        zIndexOffset:906,
        endDate: preDate
    });
    $("[data-toggle='tooltip']").tooltip();

    $('#submit').click(function () {
        var stime = $('#stime').val();
        if(stime == ""){
            return false;
        }
        var etime = $('#etime').val();
        if(etime == ""){
            return false;
        }
        window.location.href = "/Export/welcome?stime="+stime+"&etime="+etime;
    })
});

//设置图表导出格式选项
Highcharts.setOptions({
    lang: {
        printChart: '打印图表',
        downloadJPEG: '下载 JPEG 文件',
        downloadPDF: '下载 PDF   文件',
        downloadPNG: '下载 PNG  文件',
        downloadSVG: '下载 SVG  文件',
        downloadCSV: '下载 CSV  文件',
        downloadXLS: '下载 XLS   文件',
        viewData: '查看数据表格'
    },
    navigation: {
        menuItemStyle: {
            padding: '6px 14px'
        }
    },
    exporting: {
        url: ''
    },
    credits: {
        text: '',
        url: ''
    }
});

Highcharts.chart('newplayremain', {
    chart: {
        type: 'line'
    },
    title: {
        text: '新增留存'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [<?php echo "'".implode("','", $remain['daylist'])."'";?>]
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '新增次日留存',
        data: [<?php echo implode(",", $remain['day1Remain']);?>]
    },{
        name: '新增3日留存',
        data: [<?php echo implode(",", $remain['day3Remain']);?>]
    },{
        name: '新增7日留存',
        data: [<?php echo implode(",", $remain['day7Remain']);?>]
    },{
        name: '新增30日留存',
        data: [<?php echo implode(",", $remain['day30Remain']);?>]
    }]
});

Highcharts.chart('activityremain', {
    chart: {
        type: 'line'
    },
    title: {
        text: '活跃留存'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [<?php echo "'".implode("','", $remain['daylist'])."'";?>]
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '活跃次日留存',
        data: [<?php echo implode(",", $remain['day1ActRemain']);?>]
    },{
        name: '活跃3日留存',
        data: [<?php echo implode(",", $remain['day3ActRemain']);?>]
    },{
        name: '活跃7日留存',
        data: [<?php echo implode(",", $remain['day7ActRemain']);?>]
    },{
        name: '活跃30日留存',
        data: [<?php echo implode(",", $remain['day30ActRemain']);?>]
    }]
});

Highcharts.chart('loginplayer', {
    chart: {
        type: 'line'
    },
    title: {
        text: '每日登陆新增玩家'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [<?php echo "'".implode("','", $remain['daylist'])."'";?>]
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '每日登陆',
        data: [<?php echo implode(",", $loginData);?>]
    },{
        name: '每日新增',
        data: [<?php echo implode(",", $newplayerData);?>]
    }]
});

Highcharts.chart('payment', {
    chart: {
        type: 'line'
    },
    title: {
        text: '支付数据'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [<?php echo "'".implode("','", $remain['daylist'])."'";?>]
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '每日收入',
        data: [<?php echo implode(",", $payment['totalMoney']);?>]
    },{
        name: '支付成功人数',
        data: [<?php echo implode(",", $payment['totalUid']);?>]
    },{
        name: '成功总订单数',
        data: [<?php echo implode(",", $payment['totalRecord']);?>]
    },{
        name: '成功率',
        data: [<?php echo implode(",", $payment['probability']);?>]
    }]
});

function showTime() {
    $('#myModal').modal('show');
}

</script>

<!--<script>-->
<!--    Highcharts.setOptions({-->
<!--        global: {-->
<!--            useUTC: false-->
<!--        }-->
<!--    });-->
<!--    function activeLastPointToolip(chart) {-->
<!--        var points = chart.series[0].points;-->
<!--        chart.tooltip.refresh(points[points.length -1]);-->
<!--    }-->
<!--    var chart = Highcharts.chart('online', {-->
<!--        chart: {-->
<!--            type: 'spline',-->
<!--            marginRight: 10,-->
<!--            events: {}-->
<!--        },-->
<!--        title: {-->
<!--            text: '实时在线人数'-->
<!--        },-->
<!--        xAxis: {-->
<!--            type: 'datetime',-->
<!--            tickPixelInterval: 150-->
<!--        },-->
<!--        yAxis: {-->
<!--            title: {-->
<!--                text: null-->
<!--            }-->
<!--        },-->
<!--        tooltip: {-->
<!--            formatter: function () {-->
<!--                return '<b>' + this.series.name + '</b><br/>' +-->
<!--                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +-->
<!--                    Highcharts.numberFormat(this.y, 2);-->
<!--            }-->
<!--        },-->
<!--        legend: {-->
<!--            enabled: false-->
<!--        },-->
<!--        series: [{-->
<!--            name: '在线人数',-->
<!--            data: (function () {-->
<!--                // 生成随机值-->
<!--                var data = [];-->
<!--//                console.log(data);-->
<!--//                return data;-->
<!--//            }())-->
<!--//        }]-->
<!--//    });
//</script>
//<script>
//    $(function () {
//        var wsUrl ="ws://47.90.250.184:8282";
//        testWebSocket();
//        function init() {
//            testWebSocket();
//        };
//        function checkreadyState(state) {
//            if(state === 0){
//                console.log('链接中...');
//            }
//            else if(state === 1){
//                console.log('连接成功');
//                var pong = {
//                    'cmd':8200,
//                };
//                websocket.send(JSON.stringify(pong));
//            }else{
//                setTimeout(init(),10000)
//            }
//        };
//
//        function testWebSocket() {
//            websocket = new WebSocket(wsUrl);
//            websocket.onopen = function(evt) {
//                onOpen(evt);
//            };
//            websocket.onclose = function(evt) {
//                onClose(evt)
//            };
//            websocket.onmessage = function(evt) {
//                onMessage(evt)
//            };
//            websocket.onerror = function(evt) {
//                onError(evt)
//            };
//        };
//        function onOpen(evt) {
//            checkreadyState(evt.currentTarget.readyState);
//        };
//        function onClose(evt) {
//            console.log('链接断开');
//            setTimeout(testWebSocket(),10000);
//        };
//        function onMessage(evt) {
//            var data = JSON.parse(evt.data);
//            if(data.cmd == 'Statistics_OnlineCount'){
//                var series = chart.series[0];
//                activeLastPointToolip(chart);
//                var x = (new Date()).getTime();
//                series.addPoint([x, data.count], true, true);
//                activeLastPointToolip(chart);
//            }
//
//            if(data.cmd == 24589){
//                setTimeout(function () {
//                    ping();
//                },10000);
//                getOnline();
//            }
//        }
//
//        closeSocket = function(){
//            websocket.onclose();
//        };
//
//        ping = function () {
//            var sendMsg = {
//                "cmd":8200,
//            };
//            websocket.send(JSON.stringify(sendMsg));
//        }
//
//        getOnline = function () {
//            var sendMsg = {
//                "cmd":'Statistics_OnlineCount',
//            };
//            websocket.send(JSON.stringify(sendMsg));
//        }
//    });
//</script>-->