@extends('layouts.app')
@section('title')查询-教程@endsection

@section('content')
    <div class="container-fluid" id="list">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body custom-rich-text-content" id="content"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
                <table class="table table-striped table-sm" >
                    <tr>
                        <th>ID</th>
                        <th>所属货主</th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(tutorial,i) in tutorials"  @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td class="text-muted">@{{tutorial.id}}</td>
                        <td>@{{ tutorial.owner_name }}</td>
                        <td>
                            <u @click="showContent(tutorial.id)" class="text-info" style="cursor:pointer">@{{tutorial.name}}</u>
                        </td>
                        <td class="text-muted">@{{tutorial.type}}</td>
                        <td class="text-muted">@{{tutorial.created_at}}</td>
                        <td>
                            @can('教程-编辑')
                                <button class="btn btn-sm btn-outline-primary" @click="edit(tutorial.id)">改</button> @endcan
                            @can('教程-删除')
                                <button class="btn btn-sm btn-outline-dark" @click="destroy(tutorial)">删</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$tutorials->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                tutorials:[
                    @foreach( $tutorials as $tutorial )
                    {!! $tutorial !!},
                    @endforeach
                ],
                selectTr:0
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/tutorial')}}/"+id+"/edit";
                },
                destroy:function(tutorial){
                    if(!confirm('确定要删除教程“' + tutorial.name + '”吗？')){return};
                    let data=this;
                    let url = "{{url('maintenance/tutorial')}}/"+tutorial.id;
                    axios.delete(url,{id:tutorial.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.tutorials.length; i++) {
                                    if (data.tutorials[i].id===tutorial.id){
                                        data.tutorials.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除教程"'+tutorial.name+'"成功!')
                                return;
                            }
                            tempTip.setDuration(1000);
                            tempTip.show('删除教程"'+tutorial.name+'"失败!')

                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除教程失败!'+'网络错误：' + err);
                        });
                },
                showContent(id) {
                    axios.post('{{url('maintenance/tutorial/showContent')}}'+"/"+id)
                        .then(function (response) {
                            if (response.data.success){
                                $("#content").html(response.data.data);
                                $("#myModal").modal('show');
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('获取教程失败!'+'网络错误：' + err);
                        });
                }
            }
        });
    </script>
@endsection