@extends('admin.layout')

@section('content')
    <script type="text/javascript" src="{{ session()->get('is_we7')=='true'?'/addons/furnitureWe7/public':'' }}/base/js/echarts.min.js"></script>
    {{--<script type="text/javascript" src="{{ session()->get('is_we7')=='true'?'/addons/furnitureWe7/public':'' }}/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" src="{{ session()->get('is_we7')=='true'?'/addons/furnitureWe7/public':'' }}/base/js/china.js"></script>
    <script type="text/javascript">
        var dataMap = "{{ $data }}";
        dataMap = JSON.parse(dataMap.replace(/&quot;/g,'\"'));
        var geoCoordMaps = "{{ $geoCoordMap }}";
        geoCoordMaps = JSON.parse(geoCoordMaps.replace(/&quot;/g,'\"'));
        var dom_map = document.getElementById("container_map");
        var myChart_map = echarts.init(dom_map);
        var app = {};
        option = null;
        var data = [
            { name: "上海", value: 29780},
            { name: "珠海", value: 2186},
            { name: "三亚", value: 1135},
            { name: "惠州", value: 1973},
            { name: "海口", value: 2568},
            { name: "合肥", value: 4039},
            { name: "南京", value: 6959},
            { name: "杭州", value: 5632},
            { name: "苏州", value: 6707},
            { name: "无锡", value: 3393},
            { name: "昆山", value: 1894},
            { name: "广州", value: 15769},
            { name: "深圳", value: 8259},
            { name: "佛山", value: 5741},
            { name: "东莞", value: 3030},
            { name: "福州", value: 4542},
            { name: "厦门", value: 3329},
            { name: "南宁", value: 3157},
            { name: "郑州", value: 6690},
            { name: "武汉", value: 8678},
            { name: "长沙", value: 5303},
            { name: "南昌", value: 3025},
            { name: "北京", value: 20259},
            { name: "长春", value: 3016},
            { name: "大连", value: 3202},
            { name: "沈阳", value: 4540},
            { name: "哈尔滨", value: 3141},
            { name: "天津", value: 8626},
            { name: "济南", value: 4361},
            { name: "青岛", value: 6667},
            { name: "太原", value: 4080},
            { name: "石家庄", value: 6137},
            { name: "西安", value: 6991},
            { name: "成都", value: 13873},
            { name: "重庆", value: 13283},
            { name: "昆明", value: 4633},


        ];

        var geoCoordMap = {
            "上海": [121.48, 31.22],
            "珠海": [113.52, 22.3],
            "三亚": [109.31, 18.14],
            "惠州": [114.4, 23.09],
            "海口": [110.35, 20.02],
            "合肥": [117.27, 31.86],
            "南京": [118.78, 32.04],
            "杭州": [120.19, 30.26],
            "苏州": [120.62, 31.32],
            "无锡": [120.29, 31.59],
            "昆山": [120.95, 31.39],
            "广州": [113.23, 23.16],
            "深圳": [114.07, 22.62],
            "佛山": [113.11, 23.05],
            "东莞": [113.75, 23.04],
            "福州": [119.3, 26.08],
            "厦门": [118.1, 24.46],
            "南宁": [108.33, 22.84],
            "郑州": [113.65, 34.76],
            "武汉": [114.31, 30.52],
            "长沙": [113, 28.21],
            "南昌": [115.89, 28.68],
            "北京": [116.46, 39.92],
            "长春": [125.35, 43.88],
            "大连": [121.62, 38.92],
            "沈阳": [123.38, 41.8],
            "哈尔滨": [126.63, 45.75],
            "天津": [117.2, 39.13],
            "济南": [117, 36.65],
            "青岛": [120.33, 36.07],
            "太原": [112.53, 37.87],
            "石家庄": [114.48, 38.03],
            "西安": [108.95, 34.27],
            "成都": [104.06, 30.67],
            "重庆": [106.54, 29.59],
            "昆明": [102.73, 25.04],
        };

        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)
                    });
                }
            }
            return res;
        };

        var convertedData = [
            convertData(data),
            convertData(data.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        data.sort(function(a, b) {
            return a.value - b.value;
        })

        var selectedItems = [];
        var categoryData = [];
        var barData = [];
        //   var maxBar = 30;
        var sum = 0;
        var count = data.length;
        for (var i = 0; i < data.length; i++) {
            categoryData.push(data[i].name);
            barData.push(data[i].value);
            sum += data[i].value;
        }
        console.log(categoryData);
        console.log(sum + "   " + count)
        option = {
            backgroundColor: '#404a59',
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            title: [{
                text: '全国经销商门店访问数据',
                link: 'http://www.9026.com',
                subtext: 'data from fanyun',
                sublink: 'http://www.9026.com',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            }, {
                id: 'statistic',
                text: count ? '平均: ' + parseInt((sum / count).toFixed(4)) : '',
                right: 120,
                top: 40,
                width: 100,
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            }],
            toolbox: {
                iconStyle: {
                    normal: {
                        borderColor: '#fff'
                    },
                    emphasis: {
                        borderColor: '#b1e4ff'
                    }
                },
                feature: {
                    dataZoom: {},
                    brush: {
                        type: ['rect', 'polygon', 'clear']
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            brush: {
                outOfBrush: {
                    color: '#abc'
                },
                brushStyle: {
                    borderWidth: 2,
                    color: 'rgba(0,0,0,0.2)',
                    borderColor: 'rgba(0,0,0,0.5)',
                },
                seriesIndex: [0, 1],
                throttleType: 'debounce',
                throttleDelay: 300,
                geoIndex: 0
            },
            geo: {
                map: 'china',
                left: '10',
                right: '35%',
                center: [117.98561551896913, 31.205000490896193],
                zoom: 0.8,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            tooltip: {
                trigger: 'item'
            },
            /* tooltip : {
                   trigger: 'item',
                   formatter: function(data){
                       //console.log(data)
                       return data.name+': '+data.value[2];
                   }
               },*/
            grid: {
                right: 40,
                top: 100,
                bottom: 40,
                width: '30%'
            },
            xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 2,
                    textStyle: {
                        color: '#aaa'
                    }
                },
            },
            yAxis: {
                type: 'category',
                //  name: 'TOP 20',
                nameGap: 16,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#ddd'
                    }
                },
                data: categoryData
            },
            series: [{
                // name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertedData[0],
                symbolSize: function(val) {
                    return Math.max(val[2] / 300, 8);
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FF8C00',
                        position: 'right',
                        show: true
                    }
                }
            }, {
                //  name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertedData[0],
                symbolSize: function(val) {
                    return Math.max(val[2] / 500, 8);
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 50,
                        shadowColor: '#EE0000'
                    }
                },
                zlevel: 1
            }, {
                id: 'bar',
                zlevel: 2,
                type: 'bar',
                symbol: 'none',
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                },

                data: data
            }]
        };



        function renderBrushed(params) {
            var mainSeries = params.batch[0].selected[0];

            var selectedItems = [];
            var categoryData = [];
            var barData = [];
            var maxBar = 30;
            var sum = 0;
            var count = 0;

            for (var i = 0; i < mainSeries.dataIndex.length; i++) {
                var rawIndex = mainSeries.dataIndex[i];
                var dataItem = convertedData[0][rawIndex];
                var pmValue = dataItem.value[2];

                sum += pmValue;
                count++;

                selectedItems.push(dataItem);
            }

            selectedItems.sort(function(a, b) {
                //   return b.value[2] - a.value[2];
                return a.value - b.value;
            });

            for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
                categoryData.push(selectedItems[i].name);
                barData.push(selectedItems[i].value[2]);
            }

            this.setOption({
                yAxis: {
                    data: categoryData
                },
                xAxis: {
                    axisLabel: {
                        show: !!count
                    }
                },
                title: {
                    id: 'statistic',
                    text: count ? '平均: ' + (sum / count).toFixed(4) : ''
                },
                series: {
                    id: 'bar',
                    //        sort:'descending',
                    data: barData
                }
            });
        }
        if (option && typeof option === "object") {
            myChart_map.setOption(option, true);
        }
    </script>
@endsection