@extends('admin.layout')

@section('content')
    <script type="text/javascript" src="/base/js/echarts.min.js"></script>
    <script type="text/javascript" src="/base/js/bmap.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=5N76rPnIjhk6NXtinNK1zAkQd9la7MNH"></script>
    <style>
        .statistical {

            overflow: hidden;

        }



        .statistical ul li {

            float: left;

            width: 14.4%;

            margin: 0 24.5px 20px 0;

            color: #ffffff;

            padding: 10px 0;
            border-radius: 3px;

        }
        .statistical ul li:LAST-CHILD {

            margin-right: 0;

        }



        .statistical ul li header {

            /*	text-indent: 10px;*/
            text-align: center;

        }



        .statistical ul li p {

            margin: 0;

            text-align: center;

            padding: 20px;

            font-size: 20px;

            white-space: nowrap;

            text-overflow: ellipsis;

            overflow: hidden;
            color: #fff;
            font-size: 30px;

        }
        @media ( min-width : 0px) and (max-width: 1870px) {

            .statistical ul li {

                width: 30%;

            }

        }
        ul{
            list-style-type: none;
        }

        .goods-state {

            overflow: hidden;

            text-align: center;

        }



        .goods-state.a-line {

            /* 	padding: 46px 0; */

            padding: 0 0 10px;

        }



        .goods-state ul, .merchants-use ul {

            margin: 0;

            overflow: hidden;

        }



        .goods-state ul li {

            float: left;

            width: 20%;

            margin-top: 15px;

            color: #999999;

            cursor: pointer;

        }



        .goods-state.order ul li {

            width: 20%;

        }



        .goods-state.a-line ul li {

            margin: 0;

        }



        .goods-state ul li h4 {

            font-size: 26px;

            font-weight: normal;

            color: #333333;

            overflow: hidden;

            padding: 0 10px;

            white-space: nowrap;

            text-overflow: ellipsis;

            white-space: nowrap;

        }
        .goods-prompt, .merchants-help, .sales, .sales-ranking, .charts,

        .system-config {

            border: 1px solid #e3e3e3;

            width: 49%;

            float: left;

            height: 258px;

            background: #ffffff;

            margin: 0 0 15px 0;

        }



        .goods-prompt, .charts {

            width: 98%;

        }



        .system-config {

            width: 100%;

        }

        .switch div{
            float: left;
            text-align: center;
            line-height: 30px;
            margin-right: 1px;
            width: 62px;
            background-color: #fff;
            border: 2px solid #f3f3f4;
        }
        .active_switch{
            border: 2px solid #f8ac59 !important;
        }
        .goods-prompt {

            height: inherit;

        }
        .page-container .main-content {height: calc(100% - 51px) !important;    background: #f2f2f2 !important;}
        .new_index_tit {height:37px; line-height:37px;}
        .new_tit_box {border-left:5px solid #3bd98c;height:19px;font-size:16px; font-weight: bold;color:#4fa2ff;margin-top:18px;padding-left:10px;line-height:19px;}
        .index_icon_box { height:67px;line-height:67px;}
        .goods-state ul li{justify-content:center;display: flex;}
        .index_info_box {width:60px;}
    </style>
    <div class="wrapper wrapper-content">
        <div id="container_map" style="height: 500px;"></div>
        <div class="switch">
            <div id="7">7天</div>
            <div id="15" class="active_switch">15天</div>
            <div id="30">30天</div>
        </div>
        <div style="clear: both"></div>
        <div class="new_index_tit">
            <div class="new_tit_box">客户统计</div>
        </div>
        <div class="statistical">
            <ul>
                <li style="width: 17%;background: linear-gradient(to top right, #d86eec, #ae67f5);border-radius: 8px;margin-right:2% !important;" class="order-amount-statistics">
                    <header>
                        <i class="ns-icon-base i-order-amount"></i>
                        <span>新增客户数</span>
                    </header>
                    <p id="newUser" class="js-order-amount">0</p>
                </li>
                <li style="width: 17%;background: linear-gradient(to top right, #5facfe, #6993ff);border-radius: 8px;margin-right:2% !important;" class="focus-number-statistics">
                    <header>
                        <i class="ns-icon-base i-focus-number"></i>
                        <span>浏览客户数</span>
                    </header>
                    <p id="watchCount" class="js-weixin-fans-count">0</p>
                </li>
                <li style="width: 17%;background: linear-gradient(to top right, #fe8268, #ff758f);border-radius: 8px;margin-right:2% !important;" class="goods-release-statistics">
                    <header>
                        <i class="ns-icon-base i-goods-release"></i>
                        <span>被转发次数</span>
                    </header>
                    <p id="shareTimes" class="js-goods-release-count">0</p>
                </li>
                <li style="width: 17%;background: linear-gradient(to top right, #33c8c4, #1caace);border-radius: 8px;margin-right:2% !important;" class="order-total-statistics">
                    <header>
                        <i class="ns-icon-base i-order-total"></i>
                        <span>客户收藏次数</span>
                    </header>
                    <p id="favoriteTimes" class="js-order-total">0</p>
                </li>
                <li style="width: 17%;background: linear-gradient(to top right, #d870ed, #af68f6);border-radius: 8px;margin-right:2% !important;" class="month-sales-statistics">
                    <header>
                        <i class="ns-icon-base i-month-sales"></i>
                        <span>跟进客户数</span>
                    </header>
                    <p id="followCount" class="js-month-sales">0</p>
                </li>
            </ul>
        </div>
        <div class="new_index_tit">
            <div class="new_tit_box">15天用户活跃统计</div>
        </div>
        <div class="goods-prompt" style="border-radius: 6px !important; width:93% !important;">
            <div id="container" style="height: 500px"></div>
        </div>
    </div>

    <script>
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var day = "{{ $day }}"
        var count = "{{ $count }}"
        day = day.replace(/&quot;/g,'\"');
        day = JSON.parse(day);
        count = JSON.parse(count);
        console.log(day);
        option = null;
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: day
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: count,
                type: 'line',
                areaStyle: {}
            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        $('.switch div').click(function(e){
            $('.switch div').removeAttr('class');
            $(this).addClass('active_switch');
            $.ajax({
                type: 'POST',
                url: '<?php echo U('Base/Index/getData')?>',
                data: {
                    day:this.id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': '<?php echo csrf_token(); ?>'
                },
                success:function (data) {
                    $('#newUser').text(data.data.newUser);
                    $('#watchCount').text(data.data.watchCount);
                    $('#shareTimes').text(data.data.shareTimes);
                    $('#favoriteTimes').text(data.data.favoriteTimes);
                    $('#followCount').text(data.data.followCount);
                }
            });
        });
        $(document).ready(function(){
            $('#7').click();
        })


    </script>
    <script type="text/javascript">
        var data = "{{ $data }}";
        data = JSON.parse(data.replace(/&quot;/g,'\"'));
        var geoCoordMap = "{{ $geoCoordMap }}";
        geoCoordMap = JSON.parse(geoCoordMap.replace(/&quot;/g,'\"'));
        var dom_map = document.getElementById("container_map");
        var myChart_map = echarts.init(dom_map);
        var app = {};
        option = null;

        console.log(data)
        console.log(geoCoordMap)
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value,data[i].num)
                    });
                }
            }
            return res;
        };

        option = {
            title: {
                text: '全国经销商分布图',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            tooltip : {
                trigger: 'item',
                formatter: function(data){
                    //console.log(data)
                    return data.name+': '+data.value[3];
                }
            },
            bmap: {
                center: [104.114129, 37.550339],
                zoom: 5,
                roam: true,
                mapStyle: {
                    styleJson: [{
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#999999'
                        }
                    }]
                }
            },
            series : [
                {
                    name: '',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'purple'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 6)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'purple',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };;
        if (option && typeof option === "object") {
            myChart_map.setOption(option, true);
        }
    </script>
@endsection