@extends('admin.layout-content')

@section('header')
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
    <style>
        .sg-top-card {
            color: #87888A;
        }
        .sg-top-card .layui-card-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-top-card .sg-top-left {
            display: flex;
            align-items: flex-end;
        }
        .sg-top-card .sg-top-left .sg-name {
            margin-left: 30px;
        }
        .sg-top-card .sg-top-left .sg-avatar {
            width: 50px;
            height: 50px;
        }
        .sg-top-right .sg-list {
            display: flex;
            align-items: center;
        }
        .sg-top-right .sg-list .sg-item {
            text-align: center;
        }
        .sg-divider {
            border-left: 1px solid rgba(233, 233, 233, 100);
            height: 30px;
        }
        .sg-top-right .sg-list .sg-item {
            margin: 15px;
        }
        .sg-top-right .sg-list .sg-item .sg-name {
            margin-top: 15px;
        }
        .sg-top-right .sg-list .sg-item .sg-name span {
            font-size: 2rem;
            font-weight: bold;
            color: rgba(38, 38, 38, 100);
        }
        .sg-project-list {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-project-list .sg-item {
            width: 33%;
            border-top: 1px solid #e9e9e9;
            border-right: 1px solid #e9e9e9;
            padding: 15px;
            box-sizing: border-box;
        }
        .sg-project-list .sg-item:nth-child(3n) {
            border-right-width: 0;
        }
        .sg-project-list .sg-item .sg-header,
        .sg-project-list .sg-item .sg-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-project-list .sg-item .sg-desp {
            margin: 15px 0;
        }
        .sg-project-list .sg-item .sg-footer {
            color: #87888A;
        }
        .sg-project-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-project-header .sg-right {
            color: #1990FF;
        }
        .sg-quick-list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #101010;
        }
        .sg-quick-list .sg-quick-item .sg-icon,
        .sg-quick-list .sg-quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sg-quick-list .sg-quick-item .sg-icon {
            border-radius: 50%;
            height: 50px;
            width: 50px;
            line-height: 50px;
            color: white;
        }
        .sg-quick-list .sg-quick-item .sg-name {
            margin-top: 10px;
            font-size: 0.8rem;
        }
        .sg-icon.sg-create {
            background: #3894FF;
        }
        .sg-icon.sg-draft {
            background: #85888E;
        }
        .sg-icon.sg-point {
            background: #E29836;
        }
        .sg-icon.sg-revise {
            background: #4CA3AD;
        }
        .sg-zone-list .sg-zone-item {
            display: flex;
            align-items: center;
            width: 100%;
            color: #505559;
            margin: 15px 0;
        }
        .sg-zone-list .sg-zone-item .sg-process-bar {
            background: #0095D8;
            height: 16px;
            border-radius: 8px;
            margin: 0 15px;
        }
        .sg-zone-list .sg-zone-item .sg-process {
            display: flex;
            align-items: center;
        }
        .sg-zone-list .sg-zone-item .sg-zone-name {
            width: 100px;
        }
        .sg-project-2-list {
            display: flex;
            flex-wrap: wrap;
        }
        .sg-project-2-list .sg-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            margin: 20px;
            padding: 20px;
            width: calc(50% - 40px);
            box-sizing: border-box;
            color: white;
            border-radius: 20px;
        }
        .sg-project-2-list .sg-item div:first-child {
            margin-bottom: 20px;
        }
        .sg-gray-bg {
            background: grey;
        }
        .sg-font-lg {
            font-size: 2rem;
        }
        #sg-search-form .layui-form-item .layui-inline {
            margin-bottom: 0;
        }
    </style>
@endsection

@section('content')
    <div class="sg-index-container">
        <div class="layui-card sg-top-card">
            <div class="layui-card-body">
                <div class="sg-top-left">
                    <img src="/images/avatar.png" class="sg-avatar">
                    <div class="sg-name">{{ $_user->name }}|管理员</div>
                </div>
                <div class="sg-top-right">
                    <div class="sg-list">
                        <div class="sg-item">
                            <div class="sg-label">项目数</div>
                            <div class="sg-name">
                                <span>{{$total_project}}</span>
                            </div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-divider"></div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-label">内部设备总数</div>
                            <div class="sg-name">
                                <span>{{$total_device}}</span>
                            </div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-divider"></div>
                        </div>
                        <div class="sg-item">
                            <div class="sg-label">累计花费总金额</div>
                            <div class="sg-name">
                                <span>{{$total_money}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header" style="display: flex; align-items: center; justify-content: space-between">
                        <div>项目数据一览图</div>
                        <form class="layui-form" id="sg-search-form">
                            <div class="layui-form-item layui-row" style="margin-bottom: 0">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="year">
                                            @foreach($year_options as $option)
                                                <option value="{{ $option['id'] }}" {{ $select_year == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="month">
                                            @foreach($month_options as $option)
                                                <option value="{{ $option['id'] }}" {{ $select_month == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body">

                        <div id="my-chart" style="width: 100%;height:400px;"></div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="sg-project-header">
                            <div class="sg-left">待授权用户</div>
                            <a class="sg-right" href="/admin/UserAuth/index">全部待授权用户</a>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="sg-list sg-project-list">
                            @foreach($user_auths as $item)
                                <a class="sg-item" href="/admin/UserAuth/index">
                                    <div class="sg-header">
                                        <h3 class="sg-name">
                                            <b>{{ $item->name }}</b>
                                        </h3>
                                        <span class="layui-badge layui-bg-orange">待授权</span>
                                    </div>
                                    <div class="sg-desp">{{ $item->remark }}</div>
                                    <div class="sg-footer">
                                        <div class="sg-zone">{{ $item->project ? $item->project->name : ''  }}</div>
                                        <div class="sg-date">{{ substr($item->updated_at, 0, 10) }}</div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">快速开始  /  便捷导航</div>
                    <div class="layui-card-body">
                        <div class="sg-quick-list">
                            <a class="sg-quick-item" href="/admin/UserAuth/index">
                                <div class="sg-icon sg-create"><i class="iconfont iconbi"></i></div>
                                <div class="sg-name">用户授权</div>
                            </a>
                            <a class="sg-quick-item" href="/admin/InnerDevice/index">
                                <div class="sg-icon sg-draft"><i class="iconfont iconyouxiang"></i></div>
                                <div class="sg-name">设备管理</div>
                            </a>
                            <a class="sg-quick-item" href="/admin/Project/index">
                                <div class="sg-icon sg-point"><i class="iconfont iconxingxing"></i></div>
                                <div class="sg-name">项目管理</div>
                            </a>
                            <a class="sg-quick-item" href="#">
                                <div class="sg-icon sg-revise"><i class="iconfont iconduihao"></i></div>
                                <div class="sg-name">尽情期待</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">用户人数</div>
                    <div class="layui-card-body">
                        <div class="sg-zone-list">
                            <div class="sg-zone-item">
                                <div class="sg-zone-name">注册总人数</div>
                                <div class="sg-process">
                                    <div class="sg-process-bar" style="width: 100px"></div>
                                    <div class="sg-total">{{ $users_total }}个</div>
                                </div>
                            </div>
                            <div class="sg-zone-item">
                                <div class="sg-zone-name">待授权人数</div>
                                <div class="sg-process">
                                    <div class="sg-process-bar" style="width: {{ $users_not_auth_total / $users_total * 100 }}px"></div>
                                    <div class="sg-total">{{ $users_not_auth_total }}个</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">内部设备情况</div>
                    <div class="layui-card-body">
                        <div class="sg-project-2-list">
                            <div class="sg-item sg-device-card sg-green-bg">
                                <div>闲置</div>
                                <div class="sg-font-lg">{{ $device_stat['free'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-red-bg">
                                <div>在用</div>
                                <div class="sg-font-lg">{{ $device_stat['using'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-orange-bg">
                                <div>维修</div>
                                <div class="sg-font-lg">{{ $device_stat['repair'] }}</div>
                            </div>
                            <div class="sg-item sg-device-card sg-gray-bg">
                                <div>报废</div>
                                <div class="sg-font-lg">{{ $device_stat['scrap'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(function() {
            layui.use(['table', 'layer'], function() {
                var form = layui.form,
                    top_window = window;
                var myChart = echarts.init(document.getElementById('my-chart'));

                form.on('select()', function(){
                    getChartData();
                });

                getChartData();

                function transformToJson(formData){
                    var obj={};
                    for (var i in formData) {
                        obj[formData[i].name]=formData[i]['value'];
                    }
                    return obj;
                }

                function getChartData() {
                    $.ajax({
                        method: 'POST',
                        url: '/admin/Project/getStat',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: transformToJson($('#sg-search-form').serializeArray()),
                        success: function (data) {
                            if(data.status === 'success') {
                                // console.log(data.data);
                                updateChart(data.data);
                            }
                        },
                        error: function () {

                        }
                    });
                }

                function updateChart(data) {
                    // 指定图表的配置项和数据
                    var option = {
                        color: ['#71D4D4', '#C3B6E6'],
                        legend: {
                            data: ['订单数', '订单金额']
                        },
                        tooltip: {},
                        xAxis: [
                            {
                                type: 'category',
                                data: data['names']
                            }
                        ],
                        yAxis: [{
                            type: 'value',
                            name: '订单数',
                            splitLine: {
                                show: false
                            }
                        }, {
                            type: 'value',
                            name: '订单金额',
                            splitLine: {
                                show: false
                            }
                        }],
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {
                                name: '订单数',
                                type: 'bar',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                data: data.data[0]
                            },
                            {
                                name: '订单金额',
                                type: 'bar',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                yAxisIndex: 1,
                                data: data.data[1]
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });
        })
    </script>
@endsection