@extends('layouts.app')
@section('title')查询-日志@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.log.menu')@endcomponent
    </span>
    <div class="container-fluid">
        <a class="btn btn-outline-dark"  href="{{url('maintenance/syncRedisLogs')}}">同步日志</a>
        <div class="card">
            <div id="form_div"></div>
            <div class="card-body">
                {{--TODO 错误信息提示 待抽离成为模板--}}
                @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                    @if(session()->has($msg))
                        <div class="flash-message">
                            <p class="alert alert-{{ $msg }}">
                                {{ session()->get($msg) }}
                            </p>
                        </div>
                    @endif
                @endforeach

                <table class="table table-striped table-sm" id="list">
                    <tr>
                        <th>ID</th>
                        <th>用户</th>
                        <th>类名</th>
                        <th>方法名</th>
                        <th>ip</th>
                        <th>时间</th>
                    </tr>
                    <tr v-for="(log,i) in logs" class="hover" style="cursor: pointer;"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td class="text-muted">@{{log.id}}<span class="badge badge-danger small pull-right mr-3" v-if="log.mark == 'Y'">异常</span></td>
                        <td><span v-if="log.user">@{{log.user.name}}</span></td>
                        <td><a :href="'{{url('maintenance/log')}}/'+log.id" target="_blank">@{{log.class}}</a></td>
                        <td>@{{log.method}}</td>
                        <td>@{{log.ip}}</td>
                        <td class="text-muted">@{{log.created_at}}</td>
                    </tr>
                </table>
                @if($logs)
                <!--带参分页查询-->
                    {{$logs->withQueryString()->links()}}
                @endif
            </div>
        </div>
    </div>
    <style>
        .hover:hover {
            color: #1f6fb2;
        }
    </style>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        new Vue({
            el: "#list",
            data: {
                logs: {!! json_encode($logs->toArray()['data'])??[] !!},
                selectTr:0,
            },
            mounted: function () {
                let data = [
                    [
                        {name: 'username', type: 'input', tip: '操作者', placeholder: '操作者'},
                        {name: 'type',
                            type: 'select_multiple_select',
                            tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的类型'],
                            placeholder: ['类型', '定位或多选类型'],
                            data: [{'name': 'log', 'value': 'log'},
                                {'name': 'warning', 'value': 'warning'},
                                {'name': 'error', 'value': 'error'},
                                {'name': 'panic', 'value': 'panic'},
                                {'name': 'fatal', 'value': 'fatal'}],},
                        {name: 'description', type: 'input', tip: '详情:可在两侧添加百分号(%)进行模糊搜索', placeholder: '详情'},
                        {name: 'class', type: 'input', tip: '类名:可在两侧添加百分号(%)进行模糊搜索', placeholder: '类名'},
                        {name: 'method', type: 'input', tip: '方法名:可在两侧添加百分号(%)进行模糊搜索', placeholder: '方法名'},
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间，只选一个或者不选，则查询当天'},
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的截止，只选一个或者不选，则查询当天'},
                        {name:'is_exception',type:'checkbox',tip:'仅显示异常', data: [{name: 'true', value: '仅显示异常'}]}
                    ]
                ];
                this.from = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.from.init();
            },
        });
    </script>
@endsection