@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">
                        <tr>
                            <th>纸箱ID</th>
                            <th>型号</th>
                            <th>长</th>
                            <th>宽</th>
                            <th>高</th>
                            <th>货主</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="paperBox in paperBoxes">
                            <td>@{{paperBox.id}}</td>
                            <td>@{{paperBox.model}}</td>
                            <td>@{{paperBox.length}}</td>
                            <td>@{{paperBox.width}}</td>
                            <td>@{{paperBox.weight}}</td>
                            <td>
                                <div v-if="paperBox.detailFolding && paperBox.owners.length>1">
                                    <a href="javascript:;" @click="paperBox.detailFolding=false">@{{paperBox.owners.length}}个货主，点击展开明细</a></div>
                                <div class="table table-sm" v-else>
                                    <p style="width:200px" v-for="owner in paperBox.owners">
                                        @{{owner.name}}
                                        @can('纸箱-编辑')
                                            <button class="btn btn-sm btn-outline-primary pull-right" @click="edit(paperBox)">改</button> @endcan
                                    </p>
                                    <p v-if="!paperBox.detailFolding && paperBox.owners.length>1">
                                        <a href="javascript:;" @click="paperBox.detailFolding=true">点击收起明细</a>
                                    </p>
                                </div>
                            </td>
                            <td>@can('纸箱-删除')
                                    <button class="btn btn-sm btn-outline-dark " @click="destroy(paperBox)">删</button> @endcan</td>
                        </tr>
                    </table>
                    {{$paperBoxes->links()}}
                </div>
            </div>
        </div>
    </div>
@endsection

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

                ],
            },
            methods:{
                edit:function(paperBox){
                    let id=paperBox.id;
                    location.href = "{{url('maintenance/paperBox')}}/"+id+"/edit";
                },
                 destroy:function(paperBox){
                     if(!confirm('确定要删除纸箱“' + paperBox.model + '”吗？')){return};
                     let data=this;
                     let url = "{{url('maintenance/paperBox')}}/"+paperBox.id;
                    axios.delete(url,{id:paperBox.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.paperBoxes.length; i++) {
                                    if (data.paperBoxes[i].id===paperBox.id){
                                        data.paperBoxes.splice(i,1);
                                        break;
                                    }
                                }
                                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