<?php include_once(mvc::$cfg['PATH_TPL'] . 'public/headBase2.php'); ?>
<div class="layui-card">
    <div class="layui-card-body">
        <div style="padding:0 10px 10px 0;">
            <form class="layui-form">
                <input style="display:none;" type="text" name="zsl_showname"
                       value="<?php echo $Params['zsl_showname']; ?>">
                <input style="display:none;" type="text" name="zsl_id" value="<?php echo $Params['zsl_id'] ?>">
                <div class="layui-inline">
                    <label class="layui-form-label">时间区间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="betime" id="betime" class="layui-input"
                               value="<?php echo $Params['betime']; ?>" placeholder=" ~ ">
                    </div>
                    <div class="layui-input-inline">
                        <?php foreach ($fastTime as $k => $v) { ?>
                            <a href="javascript:;" c data-betime="<?php echo $v; ?>" style="margin-left:10px;"
                               class="a_blue active_index"><?php echo $k; ?></a>

                        <?php } ?>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">统计类型</label>
                    <div class="layui-input-block w100">
                        <select name="group">
                            <?php foreach ($groupByArr as $k => $v) { ?>
                                <option value="<?php echo $k; ?>"<?php if ($Params['group'] === $k) echo ' selected'; ?>><?php echo $v[0]; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn act-btn" type="submit">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </form>
        </div>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-body" style="width: 11.5%;float: left;">
                            <div style="width:100%;max-height: 300px;overflow:auto;">
                                <table class="layui-table layui-tables w200" style="max-height: 400px;">
                                </table>
                            </div>
                        </div>
                        <div class="layui-card-body" style="width: 83%;float: left;">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-logline">
                                <div carousel-item id="LAY-index-logline">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-body" style="width: 11.5%;float: left;">
                            <div style="width:100%;max-height: 400px;overflow:auto;">
                                <table class="layui-table layui-table1 w200" style="max-height: 400px;">
                                </table>
                            </div>

                        </div>
                        <div class="layui-card-body" style="width: 35%;float: left;">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-plat">
                                <div carousel-item id="LAY-index-plat">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body" style="width: 35%;float: left;">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-plats">
                                <div carousel-item id="LAY-index-plats">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php include_once(mvc::$cfg['PATH_TPL'] . 'public/footBase.php'); ?>
        <script>
            layui.use(['index', 'echarts', 'table', 'laydate'], function () {
                var table = layui.table, laydate = layui.laydate;
                var echarts = layui.echarts;
                laydate.render({
                    elem: '#betime'
                    , range: '~'
                });
                $('[data-betime]').click(function () {
                    $('[name="betime"]').val($(this).data('betime'));
                    $("form").submit();
                });
                areaLists();
                telList();
                list();
            });

            areaList = JSON.parse('<?php echo $areaList; ?>');
            function areaLists() {
                var res = areaList;
                var html = "<thead><tr><td>省份</td><td>展示数</td><td>电话数</td></tr></thead><tbody style='overflow:auto;'>";
                for (var i in res.data) {
                    html += '<tr><th>' + res.data[i].name + '</th><th>' + res.data[i].value + '</th><th>'+res.data[i].tel_count+'</th></tr>';
                }
                html += '</tbody>';
                $('.layui-table1').html('');
                $('.layui-table1').append(html);

                var echplat = [], plat = [
                    {
                        title: {
                            text: '招商省展示数分布情况',
                            //  subtext: '888'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        dataRange: {
                            orient: 'horizontal',
                            min: 0,
                            max: res.max,
                            text: ['高', '低'],           // 文本，默认为数值文本
                            splitNumber: 0
                        },
                        series: [
                            {
                                name: '全国招商展示数分布',
                                type: 'map',
                                mapType: 'china',
                                mapLocation: {
                                    x: 'center'
                                },
                                selectedMode: 'multiple',
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                               data: res.data
                            }
                        ]
                    }
                ]
                    , elemplat = $('#LAY-index-plat').children('div')
                    , renderplat = function (index) {
                    echplat[index] = echarts.init(elemplat[index], layui.echartsTheme);
                    echplat[index].setOption(plat[index]);
                    window.onresize = echplat[index].resize;
                };
                if (!elemplat[0]) return;
                renderplat(0);
            }

            function telList() {
                var max = 0;
                for (var i in areaList['data']){
                    if(areaList['data'][i]['tel_count'] > max){
                        max = areaList['data'][i]['tel_count'];
                    }
                    areaList['data'][i]['value'] = areaList['data'][i]['tel_count'];
                }
                var echplat = [], plat = [
                    {
                        title: {
                            text: '招商打电话分布情况',
                            //  subtext: '888'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        dataRange: {
                            orient: 'horizontal',
                            min: 0,
                            max: max,
                            text: ['高', '低'],           // 文本，默认为数值文本
                            splitNumber: 0
                        },
                        series: [
                            {
                                name: '全国打电话分布',
                                type: 'map',
                                mapType: 'china',
                                mapLocation: {
                                    x: 'center'
                                },
                                selectedMode: 'multiple',
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: areaList['data']
                            }
                        ]
                    }
                ]
                    , elemplat = $('#LAY-index-plats').children('div')
                    , renderplat = function (index) {
                    echplat[index] = echarts.init(elemplat[index], layui.echartsTheme);
                    echplat[index].setOption(plat[index]);
                    window.onresize = echplat[index].resize;
                };
                if (!elemplat[0]) return;
                renderplat(0);
            }

            function list() {
                var res = JSON.parse('<?php echo $list;?>');
                var html = "<thead><tr><td>时间</td><td>展示数</td><td>电话数</td></tr></thead><tbody style='overflow:auto;'>";
                for (var i  = 0 ; i < res['key'].length; i++)
                {
                    html += '<tr><th>' + res['key'][i] + '</th><th>' + res['value'][i] + '</th><th>'+res['tel_count'][i]+'</th></tr>';
                }
                html += '</tbody>';
                $('.layui-tables').html('');
                $('.layui-tables').append(html);
                var echheapline = [], heapline = [
                    {
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {data:['电话数','展示数']},
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : res['key']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'电话数',
                                type:'line',
                                stack: '电话数',
                                data:res['tel_count']
                            },
                            {
                                name:'展示数',
                                type:'line',
                                stack: '展示数',
                                data:res['value']
                            }

                        ]
                    }
                ]
                    ,elemheapline = $('#LAY-index-logline').children('div')
                    ,renderheapline = function(index){
                    echheapline[index] = echarts.init(elemheapline[index], layui.echartsTheme);
                    echheapline[index].setOption(heapline[index]);
                    window.onresize = echheapline[index].resize;
                };
                if(!elemheapline[0]) return;
                renderheapline(0);
            }

        </script>