@extends('layouts.app')
@section('title','耗材类型')

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
    </span>
    <div class="container-fluid d-none" id="material_div">
        @can('耗材类型-编辑')
            @include('maintenance.material._edit')
            @include('maintenance.material._create')
        @endcan
        <div class="card">
            <div class="card_body">
                <div class="row pull-left m-1">
                    @can('耗材类型-编辑')
                        <button class="btn btn-outline-info mb-1 mr-3" @click="store"><span class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增</button>
                    @endcan
                </div>
                @include('maintenance.material._table')
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
<script>
    let vue = new Vue({
        el:'#material_div',
        data:{
            materials:{!! $materials->toJson() !!}['data'],
            editMaterial:{},
            addMaterial:{},
            selectTr:0,
            selectIndex:0,
            materialError:{},
        },
        created(){
        },
        mounted() {
          $('#material_div').removeClass('d-none');
        },
        methods:{
            destroy(id,index){
                window.tempTip.setIndex(1099);
                window.tempTip.confirm("是否删除当前耗材？",()=>{
                    window.axios.delete('{{url("apiLocal/material/destroy")}}/'+id).then(res=>{
                        if(res.data.success){
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('删除成功');
                            this.$delete(this.materials,index);
                            return;
                        }
                        tempTip.setDuration(3000);
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.setDuration(3000);
                        tempTip.show(err);
                    });
                });
            },
            edit(material,i){
                this.editMaterial =JSON.parse(JSON.stringify(material));
                this.selectIndex = i;
                $('#editModal').modal('show');
            },
            store(){
                this.addMaterial = {};
                $('#addModal').modal('show');
            },
            // 耗材更新
            update(material,index){
                window.tempTip.setDuration(3000);
                window.tempTip.setIndex(1099);
                window.axios.post('{{url('apiLocal/material/update')}}',material).then(res=>{
                        if(res.data.success){
                            $('#editModal').modal('hide');
                            window.tempTip.showSuccess('修改成功');
                            console.log(res.data.data);
                            this.$set(this.materials,index,res.data.data);
                            this.selectIndex = 0;
                            return;
                        }else if(res.data.errors){
                            this.materialError = res.data.errors;
                            return;
                        }
                        window.tempTip.show(res.data.message);
                    }).catch(err=>{
                        window.tempTip.show(err);
                });
            },
            // 耗材创建
            create(addMaterial){
                window.tempTip.setDuration(3000);
                window.tempTip.setIndex(1099);
                axios.post('{{url('apiLocal/material/store')}}',addMaterial)
                    .then(res=>{
                        if(res.data.success){
                            $('#addModal').modal('hide');
                            window.tempTip.showSuccess('添加成功');
                            this.addMaterial={};
                            this.materials.unshift(res.data.data);
                            return;
                        }else if(res.data.errors){
                            this.materialError = res.data.errors;
                            return;
                        }
                        tempTip.show(res.data.message);
                    }).catch(err=>{
                        tempTip.show(err);
                });
            }
        }
    });
</script>

@endsection