@extends('layouts.app')
@section('title')料箱型号@endsection

@section('content')
    <div class="container-fluid card" id="container">
        @include("maintenance.materialBoxModel._modal")
        <div class="card-body">
            <button class="btn btn-outline-info mb-1 mr-3" @click="openModal()"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
            <table class="table table-bordered table-striped">
                <tr>
                    <th>编码</th>
                    <th>说明</th>
                    <th>最大商品种类</th>
                    <th>操作</th>
                </tr>
                <tr v-for="model in models">
                    <td>@{{ model.code }}</td>
                    <td>@{{ model.description }}</td>
                    <td>@{{ model.maximum_kind }}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" @click="openModal(model)">改</button>
                        <button class="btn btn-sm btn-outline-dark" @click="destroy(model)">删</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                models:[@foreach($models as $model)@json($model),@endforeach],
                model:{},
                errors:{},
            },
            methods:{
                openModal(model=null){
                    if (model) this.model = Object.assign({},model);
                    else this.model = {maximum_kind:1};
                    $("#modal").modal("show");
                },
                submitModel(){
                    window.tempTip.postBasicRequest("{{url('maintenance/materialBoxModel/save')}}",this.model,res=>{
                        if (res.errors){
                            this.errors = res.errors;
                            return;
                        }
                        if (!this.model.id){
                            this.models.unshift(res);
                        }else this.models.some((model,index)=>{
                            if (model.id===res.id){
                                this.$set(this.models,index,res);
                                return true;
                            }
                        });
                        $("#modal").modal("hide");
                        return this.model.id ? "修改成功" : '新增成功';
                    },true);
                },
                destroy(model){
                    window.tempTip.confirm("确定要剔除此模型记录吗?",()=>{
                        window.tempTip.postBasicRequest("{{url('maintenance/materialBoxModel/destroy')}}",{id:model.id},()=>{
                            this.models.some((m,index)=> {
                                if (m.id === model.id) {
                                    this.$delete(this.models, index);
                                    return true;
                                }
                            });
                            return "删除成功";
                        });
                    })
                },
            }
        });
    </script>
@endsection