{extend name="main" /}
{block name="body"}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 5px;
        letter-spacing: 1px;
    }

    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 1);
    }

    .store-total-container .store-total-item {
        color: #fff;
        line-height: 3em;
        padding: 8px 25px;
        position: relative;
    }

    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 42px;
        line-height: 42px;
    }

    .layadmin-backlog-body p cite {
        font-size: 28px;
        color: #000;
    }

</style>

<div class="layui-fluid" id="data" style="display: none">

    <div class="layui-col-md12" style="margin-bottom: 10px;">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Today</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 300px;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space8 layui-this" id="today">
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Request</h5>
                                        <p><cite>{$today_data.request}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Bid</h5>
                                        <p><cite>{$today_data.bid}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Impression</h5>
                                        <p><cite>{$today_data.impression}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Revenue</h5>
                                        <p><cite>{$today_data.payout}</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Yesterday</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space8 layui-this" id="yesterday">
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Request</h5>
                                        <p><cite>{$yesterday_data.request}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Bid</h5>
                                        <p><cite>{$yesterday_data.bid}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Impression</h5>
                                        <p><cite>{$yesterday_data.impression}</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h5>Revenue</h5>
                                        <p><cite>{$yesterday_data.payout}</cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="">
            <div class="layui-card">
                <div class="layui-card-body layui-text">
                    <div id="my_chart" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

</div>
{/block}

{block name="js"}
<script src="/static/admin/js/echarts.js"></script>
<script>

    layui.use(['table', 'layer'], function () {
        let table = layui.table,
            layer = layui.layer;

        // render charts
        getData({}, function (data) {
            renderStatistics(data);
        });

        function renderStatistics(data) {
            let colors = ['#528fdc', '#86c3f9', '#E68F57', '#FBDE86'];
            render('statistics', {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    top: "17%",
                    right: "5%",
                    left: "7%",
                    backgroundColor: "#F3F3F3",
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['Today Request', 'Yesterday Request', 'Today Revenue', 'Yesterday Revenue'],
                    textStyle: {
                        color: "#000",
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {show: false},
                        data: data.xAis || [],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'Request',
                        min: 0,
                        position: 'left',
                        offset: 0,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            }
                        },
                        nameTextStyle: {
                            color: "#000",
                        },
                        axisLabel: {
                            // inside:true,
                            // rotate:20,
                            formatter: '{value}',
                            textStyle: {
                                color: "#000"
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: 'Revenue',
                        min: 0,
                        position: 'right',
                        offset: 0,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[1],
                            }
                        },
                        nameTextStyle: {
                            color: "#000",
                        },
                        axisLabel: {
                            // inside:true,
                            // rotate:20,
                            formatter: '{value}',
                            textStyle: {
                                color: "#000"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'Today Request',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 0,
                        lineStyle: {normal: {width: 3, type: "solid"}},
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: data.today.request || []
                    },
                    {
                        name: 'Yesterday Request',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 0,
                        lineStyle: {normal: {width: 3, type: "solid"}},
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: data.yesterday.request || []
                    },
                    {
                        name: 'Today Revenue',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        lineStyle: {normal: {width: 3, type: "solid"}},
                        data: data.today.payout || []
                    },
                    {
                        name: 'Yesterday Revenue',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        lineStyle: {normal: {width: 3, type: "solid"}},
                        data: data.yesterday.payout || []
                    }
                ]
            });
        }

        function getData(where, render) {
            $.ajax({
                url: "/admin/index/home",
                data: where,
                type: 'post',
                success: function (res) {
                    if (1 === res.code) {
                        $('#wu').hide();
                        $('#data').show();

                        render(res.data);

                    }else{
                        $('#data').hide();
                        $('#wu').show();
                    }
                }, error: function () {
                }
            });
        }

        function render(id, options) {

            let chart = echarts.init(document.getElementById('my_chart'));
            chart.setOption(options);
        }
    })

</script>
{/block}