@extends("admin.layouts.layout")

@php
    $pageTitle = "首页";
@endphp

@push("header")
    <style>
        .toll-free-box i {
            transform: none !important;
            left: 1rem;
            bottom: .4rem;
        }
        .static-container {
            display: flex;
            flex-wrap: wrap;
        }
        .static-container > .card1 {
            margin-bottom: 20px;
        }
        .static-container > .card1 + .card1 {
            margin-left: 20px;
        }
        .static-container > .card1:nth-child(1) {
            flex-basis: 60%;
        }
        .static-container > .card1:nth-child(2) {
            flex-basis: calc(40% - 20px);
        }
        .static-container > .card1:nth-child(3) {
            flex-basis: 68%;
            height: 300px;
            margin-left: 0 !important;
        }
        .card1 {
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
            overflow: hidden;
            position: relative;
        }
        .card1::before {
            content: "";
            height: 28px;
            width: 28px;
            border-radius: 100%;
            background: #78d3a9;
            opacity: .25;
            position: absolute;
            bottom: -14px;
            right: 12px;
        }
        .card1::after {
            content: "";
            height: 42px;
            width: 42px;
            border-radius: 100%;
            background: #78d3a9;
            opacity: .25;
            position: absolute;
            bottom: -4px;
            right: -14px;
        }
        .card1-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8eaec;
            padding: 12px 14px;
            line-height: 1;
        }
        .card1-title > div:nth-child(1) {
            color: #333;
            position: relative;
        }
        .card1-title > div:nth-child(1)::before {
            content: '';
            height: 14px;
            width: 140px;
            background: radial-gradient(12px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 0 0/12px 12px no-repeat,
            radial-gradient(120px 9px at 10px 40%,#7ed3b155 20%,#0000 70%) 12px 0/130px 12px no-repeat;

            position: absolute;
            bottom: -6px;
            left: -6px;
        }
        .card1-title__arrow {
            padding-right: 20px;
            cursor: pointer;
            position: relative;
        }
        .card1-title__arrow::before {
            content: "\F142";
            display: inline-block;
            font-family: 'Material Design Icons';
            text-rendering: auto;
            font-size: 1.1rem;
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
        }
        .card1-body {
            padding: 7px;
        }
        .card1-body .static1, .card1-body .static2{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .static1 .static1__item, .static2 .static2__item{
            margin: 14px;
            padding-left: 20px;
            font-size: 14px;
        }
        .static1 .static1__item .static1__item--label,.static2 .static2__item .static2__item--label {
            color: #666;

            position: relative;
        }
        .static1 .static1__item .static1__item--label::before {
            content: "";
            width: 4px;
            height: 78%;
            background: #73cdb9;
            border-radius: 4px;
            transform: translateY(11%);

            position: absolute;
            left: -10px;
            top: 0;
        }
        .static2 .static2__item--label {
            padding-left: 4px;
        }
        .static2 .static2__item .static2__item--label::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #f2b34e;
            border-radius: 100%;
            transform: translateY(-50%);

            position: absolute;
            left: -10px;
            top: 50%;
        }
        .static2 .static2__item:nth-child(2) .static2__item--label::before {
            background: #548fee;
        }
        .static2 .static2__item:nth-child(3) .static2__item--label::before {
            background: #78d3a9;
        }
        .static1 .static1__item .static1__item--value,.static2 .static2__item .static2__item--value {
            font-weight: 600;
            color: #333;
            line-height: 2;
            font-size: 15px;
        }
        .static2 .static2__item .static2__item--value {
            text-align: center;
        }
        .card1-body:has(#pie-chart) {
            height: calc(100% - 39px);
        }
        #pie-chart {
            height: 100%;
            width: 100%;
        }
        #bar-chart {
            height: 100%;
            width: 100%;
        }
    </style>
@endpush

@section("content")
    <div class="static-container">

        <div class="card1">
            <div class="card1-title">
                <div>数据统计</div>
                <div>
                    <span class="card1-title__arrow">更多</span>
                </div>
            </div>
            <div class="card1-body">
                <div class="static1">
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">{$counts['bill_today']}</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                    <div class="static1__item">
                        <div class="static1__item--label">今日应收（元）</div>
                        <div class="static1__item--value">9040.00</div>
                    </div>
                </div>

                <div class="static2">
                    <div class="static2__item">
                        <div class="static2__item--label">待处理</div>
                        <div class="static2__item--value">0</div>
                    </div>
                    <div class="static2__item">
                        <div class="static2__item--label">待处理</div>
                        <div class="static2__item--value">0</div>
                    </div>
                    <div class="static2__item">
                        <div class="static2__item--label">待处理</div>
                        <div class="static2__item--value">0</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card1">
            <div class="card1-title">
                <div>各产品占比</div>
                <div>
                    <span class="card1-title__arrow">更多</span>
                </div>
            </div>
            <div class="card1-body">
                <div id="pie-chart"></div>
            </div>
        </div>

        <div class="card1">
            <div class="card1-title">
                <div>营收</div>
                <div>
                    <span class="card1-title__arrow">更多</span>
                </div>
            </div>
            <div class="card1-body">
                <div id="bar-chart"></div>
            </div>
        </div>
    </div>
@endsection

<script>
    function jump(url){
        window.open(url)
    }

</script>
@push("footer")
    <script src="/plugins/echarts/echarts.min.js"></script>
    <script>
        function initPieChart () {
            var datas = [
                [
                    {
                        name: '180/天',
                        value: 33,
                        label: {
                            show: true,
                            fontWeight: "bold",
                            formatter: function (params) {
                                return params.name + "\n" + params.value + "%"
                            }
                        },
                        itemStyle: {
                            color: "#609ff9"
                        }
                    },
                    {
                        name: '未完成',
                        value: 67,
                        itemStyle: {
                            color: "#f1f2f5"
                        }
                    }
                ],
                [
                    {
                        name: '220/天',
                        value: 44,
                        label: {
                            show: true,
                            fontWeight: "bold",
                            formatter: function (params) {
                                return params.name + "\n" + params.value + "%"
                            }
                        },
                        itemStyle: {
                            color: "#8dd191"
                        }
                    },
                    {
                        name: '未完成',
                        value: 56,
                        itemStyle: {
                            color: "#f1f2f5"
                        }
                    },
                ],
                [
                    {
                        name: '300/天',
                        value: 13,
                        label: {
                            show: true,
                            fontWeight: "bold",
                            formatter: function (params) {
                                return params.name + "\n" + params.value + "%"
                            }
                        },
                        itemStyle: {
                            color: "#f6db7c"
                        }
                    },
                    {
                        name: '未完成',
                        value: 87,
                        itemStyle: {
                            color: "#f1f2f5"
                        }
                    },
                ]
            ];
            var pieChart = echarts.init(document.querySelector("#pie-chart"));
            var option = {
                series: datas.map(function (data, idx) {
                    var left = idx * 33.3;
                    return {
                        type: 'pie',
                        radius: [40, 60],
                        top: 'center',
                        height: '33.33%',
                        left: left + '%',
                        width: '33.33%',
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: 15,
                                    fontWeight: 'bold',
                                    fontColor: "#666",
                                }
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    };
                })
            };

            // 使用刚指定的配置项和数据显示图表。
            pieChart.setOption(option);
        }
        function initBarChart () {
            var barChart = echarts.init(document.querySelector("#bar-chart"));
            var option = {
                title: {
                    text: '销售额趋势'
                },
                // grid: {
                //     top: "10%",
                //     left: "15%",
                //     right: "15%",
                //     height: "80%"
                // },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['10月', '11月', '12月', '01月', '02月', '03月']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            }
            barChart.setOption(option)
        }
        (function () {
            initPieChart()
            initBarChart()
        })()
    </script>
@endpush