{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="city" 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="order_amount">{$res.order_amount}</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="order_num">{$res.order_num}</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="after_num">{$res.after_num}</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-card" style="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="deal">
                                <option value="ago_seven">近7天</option>
                                <option value="ago_fifteen">近15天</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" id="deal_days" style="white-space: nowrap;top:8px;right:80px">
                            {$res.start_seven} 至 {$res.end_seven}
                        </div>
                    </div>

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

                    <div class="layui-form-item">
                        <div id="amountCharts" 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 = ["#0090FF","#00CA69","#FFC005",];
        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/deal")}',
            data: {deal:'ago_seven'},
            type: "post",
            success: function (res) {
                var xData = res.data.days;
                var orderNum = res.data.echarts_order_num;
                var afterNUm = res.data.echarts_after_num;
                var orderAmount = res.data.echarts_order_amount;

                var numOption = setNumOption(xData, orderNum, afterNUm);
                var dealCharts = echarts.init(document.getElementById('dealCharts'));
                dealCharts.setOption(numOption, true);
                window.addEventListener('resize', function () {
                    dealCharts.resize()
                });

                var amountOption = setAmountOption(xData, orderAmount);
                var amountCharts = echarts.init(document.getElementById('amountCharts'));
                amountCharts.setOption(amountOption, true);
                window.addEventListener('resize', function () {
                    amountCharts.resize()
                });
            }
        });


        form.on('select(deal)', function(data){
            like.ajax({
                url: '{:url("statistics/deal")}',
                data: {deal:data.value},
                type: "post",
                success: function (res) {
                    $('#deal_days').html(res.data.start+  ' 至 ' +res.data.end );
                    var xData = res.data.days;
                    var orderNum = res.data.echarts_order_num;
                    var afterNUm = res.data.echarts_after_num;
                    var orderAmount = res.data.echarts_order_amount;

                    var numOption = setNumOption(xData, orderNum, afterNUm);
                    var dealCharts = echarts.init(document.getElementById('dealCharts'));
                    dealCharts.setOption(numOption, true);
                    window.addEventListener('resize', function () {
                        dealCharts.resize()
                    });

                    var amountOption = setAmountOption(xData, orderAmount);
                    var amountCharts = echarts.init(document.getElementById('amountCharts'));
                    amountCharts.setOption(amountOption, true);
                    window.addEventListener('resize', function () {
                        amountCharts.resize()
                    });
                }
            });
        });


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


        //图表设置
        function setNumOption(xData, orderData, afterData) {
            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: orderData
                }, {
                    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: afterData
                }]
            };
            return option;
        }

        function setAmountOption(xData, amountData) {
            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: amountData
                }]
            };
            return option;
        }
    });

</script>