@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 in logs" class="hover" @click="logsClick(log)" style="cursor: pointer">
                        <td class="text-muted">@{{log.id}}</td>
                        <td>@{{log.user_name}}</td>
                        <td>@{{log.operation}}</td>
                        <td>@{{log.type}}</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: [
                    @if($logs)

                        @foreach( $logs as $log )
                    {
                        id: '{{$log->id}}',
                        user_name: '{{$log->user_name}}',
                        operation: '{{$log->operation}}',
                        type: '{{$log->type}}',
                        ip: '{{$log->ip}}',
                        created_at: '{{$log->created_at}}'
                    },
                    @endforeach
                    @endif
                ],
            },
            mounted: function () {
                let data = [
                    [
                        {name: 'operation', type: 'input', tip: '操作', placeholder: '操作'},
                        {name: 'type', type: 'input', tip: '操作', placeholder: '类型'},
                        {name: 'description', type: 'input', tip: '详情:可在两侧添加百分号(%)进行模糊搜索', placeholder: '详情'},
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的截止'}
                    ]
                ];
                this.from = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.from.init();
            },
            methods: {
                logsClick: function (log) {
                    console.log(log);
                    window.open("{{url('maintenance/log')}}"+'/'+log.id,'_blank');
                }
            }
        });
    </script>
@endsection