@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="page-header">
                <h3 class="page-title">
                     <span class="page-title-icon bg-gradient-primary text-white mr-2">
                        <i class="mdi mdi-settings"></i>
                    </span>
                    {{ __('auto.实时数据') }}
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">{{ __('auto.游戏数据') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('auto.实时数据') }}</li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.实时数据') }}</h4>
                            <form class="well form-inline margin-top-20" method="get" action='/admin/game/user/online'>
                                <span style="padding-left: 5px" >{{ __('auto.游戏：') }}</span >
                                <select class="form-control" name="game_id" id="game_id" value="" style="color: black">
                                    <option value="">{{ __('auto.请选择游戏') }}</option>
                                    @foreach($game_name as $k=>$v)
                                        <option value="{{$k}}">{{$v}}</option>
                                    @endforeach
                                </select>

                                <spen style="padding-left: 10px" >{{ __('auto.选择时间：') }}</spen>
                                <input type="date"  step="01" id="start_date" name="start_date" class="form-control" value="{{$start_date}}" />&nbsp;&nbsp;
                                <button type="button" class="btn btn-sm btn-gradient-dark btn-icon-text" onclick="update(0)">
                                    {{ __('auto.搜索') }}
                                </button>
                                <!-- <input type="submit" class="btn btn-sm btn-gradient-dark btn-icon-text" value="搜索"/>&nbsp;&nbsp; -->
                                <a href="/admin/game/user/online" class="btn btn-sm btn-gradient-warning btn-icon-text">{{ __('auto.清空') }}</a>&nbsp;&nbsp;
                            </form>
                            <br>
                            <button onclick="update(0)" class="btn-sm btn btn-gradient-dark">{{ __('auto.在线') }}</button>

                            <button onclick="update(1)" class="btn-sm btn btn-gradient-dark">{{ __('auto.注册') }}</button>

                            <button onclick="update(2)" class="btn-sm btn btn-gradient-dark">{{ __('auto.活跃') }}</button>
                            @if (hidden() != 'service')

                            <button onclick="update(3)" class="btn-sm btn btn-gradient-dark">{{ __('auto.充值') }}</button>

                            <button onclick="update(4)" class="btn-sm btn btn-gradient-dark">{{ __('auto.提现') }}</button>

                            <button onclick="update(5)" class="btn-sm btn btn-gradient-dark">{{ __('auto.充减提') }}</button>
                            @endif
                            <div id="main" style="width: 100%;height:600px;"></div>

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script src="/assets/js/echarts.min.js"></script>
    <script type="text/javascript">
        let lastUpdate=0
        function update(type){
            lastUpdate=type;
            var start_date= document.getElementById('start_date').value;
            var game_id= document.getElementById('game_id').value;
            myRequest("/admin/game/user/onlines","get",{start_date:start_date,game_id:game_id,type:type},function(data){
                var myChart = echarts.init(document.getElementById('main'));

                if(type == 0){
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日在线') }}','{{ __('auto.昨日在线') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },
                        xAxis: {
                            data: data.created_at,
                        },
                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日在线') }}',
                                type: 'line',
                                data: data.online
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日在线') }}',
                                type: 'line',
                                data: data.yonline
                            }
                        ]
                    },true);
                }

                if(type == 1){
                    // myChart.setOption({
                    //     xAxis: {
                    //         data: data.created_at
                    //     },
                    //     series: [
                    //         {
                    //             // 根据名字对应到相应的系列
                    //             name: '今日注册',
                    //             data: data.reg
                    //         },{
                    //             // 根据名字对应到相应的系列
                    //             name: '昨日注册',
                    //             data: data.yreg
                    //         }
                    //     ]
                    // },true);

                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日注册') }}','{{ __('auto.昨日注册') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },
                        xAxis: {
                            data: data.created_at,
                        },
                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日注册') }}',
                                type: 'line',
                                data: data.reg
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日注册') }}',
                                type: 'line',
                                data: data.yreg
                            }
                        ]
                    },true);
                }

                if(type == 2){
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日活跃') }}','{{ __('auto.昨日活跃') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },

                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        xAxis: {
                            data: data.created_at
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日活跃') }}',
                                type: 'line',
                                data: data.active
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日活跃') }}',
                                type: 'line',
                                data: data.yactive
                            }
                        ]
                    },true);
                }

                if(type == 3){
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日充值') }}','{{ __('auto.昨日充值') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },

                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        xAxis: {
                            data: data.created_at
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日充值') }}',
                                type: 'line',
                                data: data.recharge
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日充值') }}',
                                type: 'line',
                                data: data.yrecharge
                            }
                        ]
                    },true);
                }

                if(type == 4){

                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日提现') }}','{{ __('auto.昨日提现') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },

                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        xAxis: {
                            data: data.created_at
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日提现') }}',
                                type: 'line',
                                data: data.withdraw
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日提现') }}',
                                type: 'line',
                                data: data.ywithdraw
                            }
                        ]
                    },true);
                }

                if(type == 5){

                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'cross'
                            },
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        legend: {
                            data:['{{ __('auto.今日充减提') }}','{{ __('auto.昨日充减提') }}'],
                            // orient: 'vertical' ,
                            align: 'auto' ,
                            top:'2%',
                            // right:'0%',
                            // bottom:'50%',
                            textStyle:{
                                fontSize: 16 ,
                            }
                        },

                        yAxis: [
                            { type: 'value',show: true},
                            { type: 'value',show: true}
                        ],
                        xAxis: {
                            data: data.created_at
                        },
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.今日充减提') }}',
                                type: 'line',
                                data: data.profit
                            },{
                                // 根据名字对应到相应的系列
                                name: '{{ __('auto.昨日充减提') }}',
                                type: 'line',
                                data: data.yprofit
                            }
                        ]
                    },true);
                }
            });
        }
        var myChart = echarts.init(document.getElementById('main'));


        setTimeout(function (){
            $.get('/admin/game/user/onlines').done(function (data) {
                // 填入数据
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type:'cross'
                        },
                        textStyle: {
                            fontSize: 16
                        }
                    },
                    legend: {
                        data:['{{ __('auto.今日在线') }}','{{ __('auto.昨日在线') }}'],
                        // orient: 'vertical' ,
                        align: 'auto' ,
                        top:'2%',
                        // right:'0%',
                        // bottom:'50%',
                        textStyle:{
                            fontSize: 16 ,
                        }
                    },
                    yAxis: [
                        { type: 'value',show: true},
                        { type: 'value',show: true}
                    ],
                    xAxis: {
                        data: data.created_at
                    },
                    series: [
                        {
                            // 根据名字对应到相应的系列
                            name: '{{ __('auto.今日在线') }}',
                            type: 'line',
                            data: data.online
                        },{
                            // 根据名字对应到相应的系列
                            name: '{{ __('auto.昨日在线') }}',
                            type: 'line',
                            data: data.yonline
                        }
                    ]
                },true);
            });
        },1000)
        setInterval(()=>{
            update(lastUpdate);
        },300000)
    </script>
@endsection