@extends('layouts.app')
@section('title')纸箱（按货主）@endsection

@section('content')
<div id="list">
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.paperBox.menu')@endcomponent
<div class="container-fluid">
    <div class="form-inline" style="transform: scale(0.9)">
        <button class="btn btn-outline-primary" onclick="window.location.href='{{url('maintenance/paperBox/index/model')}}'"  :class="{active:isActive('model',4)}">按型号查询</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-outline-primary" onclick="window.location.href='{{url('maintenance/paperBox/index/owner')}}'"   :class="{active:isActive('owner',4)}">按货主查询</button>
    </div>
</div>
    </span>
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-striped table-sm table-bordered">
                    <tr>
                        <th style="width: 14%">货主</th>
                        <th style="width: 14%">纸箱ID</th>
                        <th style="width: 14%">型号</th>
                        <th style="width: 14%">长</th>
                        <th style="width: 14%">宽</th>
                        <th style="width: 14%">高</th>
                        <th style="width: 14%">操作</th>
                    </tr>
                    <tr v-for="(paperBox_owner,i) in paperBoxes_owner" v-if="paperBox_owner.paperBox.length>0"
                        @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td>@{{paperBox_owner.name}}</td>
                        <td colspan="6">
                            <table class="table table-striped table-sm">
                                <tr v-for="paperBox in paperBox_owner.paperBox">
                                    <td style="width: 16.5%">@{{paperBox.id}}</td>
                                    <td style="width: 16.5%">@{{paperBox.model}}</td>
                                    <td style="width: 16.5%">@{{paperBox.length}}</td>
                                    <td style="width: 16.5%">@{{paperBox.width}}</td>
                                    <td style="width: 16.5%">@{{paperBox.height}}</td>
                                    <td style="width: 16.5%">
                                        @can('纸箱-删除')
                                            <button class="btn btn-sm btn-outline-dark " @click="destroy(paperBox)">删</button> @endcan
                                        @can('纸箱-编辑')
                                            <button class="btn btn-sm btn-outline-primary " @click="edit(paperBox)">改</button> @endcan</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                {{$paperBoxes_owner->links()}}
            </div>
        </div>
    </div>
</div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                paperBoxes_owner:[
                    @foreach( $paperBoxes_owner as $paperBox_owner )
                    {id:'{{$paperBox_owner->id}}',name:'{{$paperBox_owner->name}}',
                     paperBox:[
                        @foreach($paperBox_owner->paperBoxes as $paperBox)
                        {id:'{{$paperBox->id}}',model:'{{$paperBox->model}}',length:'{{$paperBox->length}}',width:'{{$paperBox->width}}',height:'{{$paperBox->height}}'},
                        @endforeach
                            ],
                    },
                    @endforeach

                ],
                selectTr:''
            },
             methods:{
                 edit:function(paperBox){
                     let id=paperBox.id;
                     location.href = "{{url('maintenance/paperBox')}}/"+id+"/edit";
                 },
                 destroy:function(paperBox){
                     if(!confirm('确定要删除纸箱“' + paperBox.model + '”吗？')){return};
                     let url = "{{url('maintenance/paperBox')}}/"+paperBox.id;
                     let _this=this;
                     axios.delete(url,{id:paperBox.id})
                         .then(function (response) {
                             if(response.data.success){
                                 _this.paperBoxes_owner.some(function (owner) {
                                     for (let i = 0; i < owner.paperBox.length; i++) {
                                         if (owner.paperBox[i].id===paperBox.id){
                                             owner.paperBox.splice(i,1);
                                         }
                                     }
                                 });
                                 tempTip.setDuration(1000);
                                 tempTip.showSuccess('删除纸箱"'+paperBox.model+'"成功!')
                             }else{
                                 tempTip.setDuration(1000);
                                 tempTip.show('删除纸箱"'+paperBox.model+'"失败!')
                             }
                         })
                         .catch(function (err) {
                             tempTip.setDuration(3000);
                             tempTip.show('删除纸箱失败!'+'网络错误：' + err);
                         });
                 },
            }
        });
    </script>
@endsection