{layout name="layout1" /}


<div class="layui-col-md12">
    <div class="layui-fluid">

        <div class="layui-form" lay-filter="">
            <div class="layui-card" >
                <div class="layui-card-body">
                    <div class="layui-input-inline">
                        <div class="layui-card-header" >概况</div>
                    </div>

                    <div class="layui-input-inline" style="left: 50px">
                        <div class="layui-input-inline">
                            <select name="day" lay-verify="required" lay-filter="days">
                                <option value="today" >今日实时</option>
                                <option value="ago_seven" >近7天</option>
                                <option value="ago_fifteen" >近15天</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
                        {$res.start} 至 {$res.end}
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6 layui-col-md3" >
                    <div class="layui-card" >
                        <div class="layui-card-header" >
                            商品浏览量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list" >
                            <p class="layuiadmin-big-font" id="goods_click">{$res.goods_click}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            用户浏览量
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="user_click">{$res.user_click}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" style="width: 100%;margin-top:20px">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-input-inline layui-card-header" style="">访问趋势分析</div>
                        <div class="layui-input-inline" style="right: 100px">
                            <select  lay-verify="required"  lay-filter="goods">
                                <option value="ago_seven">近7天</option>
                                <option value="ago_fifteen">近15天</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" id="goods_days" style="white-space: nowrap;top:8px;right:80px">
                            {$res.start_seven} 至 {$res.end_seven}
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div id="visitCharts" style="width: 100%;height: 80vh;"> </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','like','echarts','form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,like = layui.like
            ,echarts = layui.echarts;

        const color = ["#FFC005", "#00CA69","#0090FF"];
        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        };

        like.ajax({
            url: '{:url("statistics/visit")}',
            data: {'goods':'ago_seven'},
            type: "post",
            success: function (res) {
                var xData = res.data.days;
                var pvData = res.data.echarts_goods_click;
                var collectData = res.data.echarts_user_click;

                var option = setOption(xData, pvData, collectData);
                var visitCharts = echarts.init(document.getElementById('visitCharts'));
                visitCharts.setOption(option, true);
                window.addEventListener('resize', function () {
                    visitCharts.resize()
                });
            }
        });


        form.on('select(goods)', function(data){
            like.ajax({
                url: '{:url("statistics/visit")}',
                data: {'goods':data.value},
                type: "post",
                success: function (res) {
                    $('#goods_days').html(res.data.start+  ' 至 ' +res.data.end );
                    var xData = res.data.days;
                    var pvData = res.data.echarts_goods_click;
                    var collectData = res.data.echarts_user_click;
                    var saleData = res.data.echarts_goods_sale;
                    var option = setOption(xData, pvData, collectData, saleData);
                    var visitCharts = echarts.init(document.getElementById('visitCharts'));
                    visitCharts.setOption(option, true);
                    window.addEventListener('resize', function () {
                        visitCharts.resize()
                    });
                }
            });
        });



        form.on('select(days)', function(data){
            like.ajax({
                url:'{:url("statistics/visit")}',
                data:{'days':data.value},
                type:"post",
                success:function(res)
                {
                    $('#days').html(res.data.start+  ' 至 ' +res.data.end );
                    $('#goods_click').html(res.data.goods_click);
                    $('#user_click').html(res.data.user_click);
                }
            });
        });

        //图表设置
        function setOption(xData, pvData, collectData) {
            option = {
                backgroundColor: '#fff',
                color: color,
                legend: {
                    top: 20,
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function(params) {
                        let html = '';
                        params.forEach(v => {
                            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                次`;
                        })
                        return html
                    },
                    extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: '#ffffff',
                            shadowColor: 'rgba(225,225,225,1)',
                            shadowBlur: 5
                        }
                    }
                },
                grid: {
                    top: 100,
                    containLabel: true
                },
                xAxis: [{
                    type: "category",
                    name: '(日期)',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "#333"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#D9D9D9"
                        }
                    },
                    data: xData,
                }],
                yAxis: [{
                    type: "value",
                    name: '(次)',
                    axisLabel: {
                        textStyle: {
                            color: "#666"
                        }
                    },
                    nameTextStyle: {
                        color: "#666",
                        fontSize: 12,
                        lineHeight: 40
                    },
                    // 分割线
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#E9E9E9"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: "商品浏览量",
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[0],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[0], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    symbol: 'circle',//数据交叉点样式
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3)
                                },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[0], 0.1)
                                    }
                                ],
                                false
                            ),
                            shadowColor: hexToRgba(color[0], 0.1),
                            shadowBlur: 10
                        }
                    },
                    data: pvData
                }, {
                    name: "用户浏览量",
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[1],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[1], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    symbol: 'circle',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: hexToRgba(color[1], 0.3)
                                },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[1], 0.1)
                                    }
                                ],
                                false
                            ),
                            shadowColor: hexToRgba(color[1], 0.1),
                            shadowBlur: 10
                        }
                    },
                    data: collectData
                }]
            };
            return option;
        }

    });

</script>