<?php
/*
 * @author: CloudZA(云之安) <2922619853@qq.com>
 * @hitokoto: 一场秋雨一场凉，秋心酌满泪为霜。
 * Copyright (c) 2022 by CloudZA, All Rights Reserved.
 */

include_once 'common.php';
if ( !isset($islogin)) header("Location: /");//非法访问
$title = '订单地图';
include_once 'partials/head.php';


?>
<div id="pjax-container">
    <!--导航-->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        <?php echo $title ?>
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt">
                        <li class="breadcrumb-item">
                            <a class="link-fx" href="javascript:void(0)">首页</a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            <?php echo $title ?>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
</div>
    <!--导航结束-->
    <!--内容-->
    <div class="content animated fadeIn">
        <div class="row">
            <div class="col-xl-8">
                <div class="block block-bordered block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            支付<small>地图</small>
                        </h3>
                        <div class="block-options">
                            <button type="button" onclick="" class="btn-block-option" data-toggle="block-option" data-action="state_toggle" data-action-mode="demo">
                                <i class="si si-refresh"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="row">
                            <div class="w-100 h-100" id="map"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="block block-bordered block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">交易<small>概况</small></h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="state_toggle" data-action-mode="demo">
                                <i class="si si-refresh"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content block-content-full">
                        <ul class="list-group push">
                            <li class="list-group-item justify-content-between align-items-center">
                                <div class="text-muted">
                                    <div class="fs-3 fw-semibold mb-4">
                                        <span id="area-count">0</span>
                                    </div>
                                    <div class="fs-sm">总交易地区数量</strong></div>
                                </div>
                            </li>
                        </ul>

                        <ul class="list-group push">
                            <li class="list-group-item justify-content-between align-items-center">
                                <div class="text-muted">
                                    <div class="fs-3 fw-semibold mb-4"><span id="order_money">0</span>
                                        <small class="currenct currency-usd"> RMB</small></div>
                                    <div class="fs-sm">累计交易金额</div>
                                </div>
                            </li>
                        </ul>

                        <ul class="list-group push">
                            <li class="list-group-item justify-content-between align-items-center">
                                <div class="text-muted">
                                    <div class="fs-3 fw-semibold mb-4">
                                        <span id="unknown-area-count">0</span>
                                    </div>
                                    <div class="fs-sm">未知地区数量</strong></div>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <script>
        $(document).ready(function() {
            getData($("#area-query-time").val());
        });
        $("#area-query-time").change(function () {
            getData($(this).val());
        });
        function getData(time) {
            app.ajax('ajax_table.php?act=order_map',null,res=>{
                if(res.code === 200){
                    app.getval('#time',res.data.time + '到现在')
                    app.getval('#area-count',res.data.list.length)
                    app.getval('#order_money',res.data.orderMoney)

                    const map = new Highcharts.Map('map', {
                        chart: {
                            events: {
                                drilldown: function(e) {
                                    drilldown(e);
                                },
                                drillup: function(e) {
                                    map.setTitle({
                                        text: e.seriesOptions.name
                                    });
                                }
                            }
                        },
                        title: {
                            text: '中国地图 - 交易金额'
                        },
                        mapNavigation: {
                            enabled: true,
                            buttonOptions: {
                                verticalAlign: 'bottom'
                            }
                        },
                        tooltip: {
                            useHTML: true,
                            formatter: function() {
                                return '地区：' + this.point.name + '<br/>总交易金额：' + this.point.value + '元';
                            }
                        },
                        colorAxis: {
                            min: 0,
                            max: (res.data.list.length > 0 ? res.data.list[0].value : 100),
                            minColor: 'rgb(255,255,255)',
                            maxColor: '#006cee'
                        },
                        series: [{
                            data: res.data.list,
                            name: '中国',
                            mapData: Highcharts.maps['cn/china'],
                            joinBy: 'name', // 根据 name 属性进行关联
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}',
                                style: {
                                    fontSize: '10px'
                                }
                            },
                            states: {
                                hover: {
                                    color: '#a4edba'
                                }
                            }
                        }]
                    });
                    // 设置当前排行
                    var i = 0;
                    var u = 0;
                    // if($(".ephemeral").length > 0){
                    //     $(".ephemeral").remove();
                    // }
                    $.each(res.data.list, function(index, value) {
                        if (value.name !== '' && value.name !== 0 && value.name !== '其他' && i <= 9) {
                            i++;
                            //     $("#area").append(`
                            // <div class="nk-tb-item ephemeral">
                            //     <div class="nk-tb-col nk-tb-channel"> <span class="tb-lead">${i}</span> </div>
                            //     <div class="nk-tb-col nk-tb-channel"> <span class="tb-lead">${value.name}</span> </div>
                            //     <div class="nk-tb-col nk-tb-sessions"> <span class="tb-sub tb-amount"><span>${value.value==null?'0':value.value}</span></span> </div>
                            //     <div class="nk-tb-col nk-tb-prev-sessions"> <span class="tb-sub tb-amount"><span>${value.count===undefined?'0':value.count}</span></span> </div>
                            // </div>`);
                        } else if (value.name === '' || value.name === '其他' || value.name === '0') {
                            u++;
                            $('#unknown-area-count').html(u);
                        }
                    });
                    $('text.highcharts-credits').empty().remove();
                } else {
                    app.notify(res.msg,'warning')
                }
            })
        }

    </script>

    </div>
</div>
    <!--内容结束-->
<?php include_once 'partials/foot.php'; ?>
