@extends("layouts.app")
@section("title","图片")

@section("content")
    <div class="container-fluid d-noe" id="list">
        <div class="card">
            @include('maintenance.expressPrinting.image._create')
            <div class="card-body">
                <div class="row pull-left m-1">
                    <button class="btn btn-outline-info mb-1 mr-3" @click="showCreatedModel"><span
                            class="fa fa-plus"></span>&nbsp;新&nbsp;&nbsp;增
                    </button>
                </div>
                @include('maintenance.expressPrinting.image._table')
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let list = new Vue({
            el:'#list',
            data:{
                images:{!! $printPartImages->toJson() !!}['data'],
                notFindImgUrl:'{!! url('/icon/img404-thumbnail.jpg') !!}',
                imgPrefix:"{{asset("/storage")}}",
                selectTr:null,
                isCreated:null,
                editItem:{},
                index:null,
            },
            mounted(){
                $("#list").removeClass("d-none");
            },
            methods:{
                showCreatedModel(){
                    this.isCreated = true;
                    $("#imageModal").modal("show");
                },
                edit(item){
                    this.isCreated = false;
                    this.editItem = JSON.parse(JSON.stringify(item))
                    $("#imageModal").modal("show");
                },
                save(){
                    let url = '{{url("apiLocal/maintenance/expressPrinting/part/image/saveFile")}}';
                    let data = new FormData();
                    data.set("name",this.editItem.name);
                    let file= this.$refs.image.files[0];
                    data.set("file",file);
                    if (!this.isCreated)  {
                        url = '{{url("apiLocal/maintenance/expressPrinting/part/image/update")}}'
                        data.set("id",this.editItem.id);
                    }

                    window.tempTip.setIndex(2000);
                    window.axios.post(url,data,{
                        'Content-Type': 'multipart/form-data'
                    }).then(res=>{
                        if(res.data.success){
                            window.tempTip.showSuccess("文件保存成功");
                            if (this.isCreated){
                                this.images.unshift(res.data.data);
                            } else {
                                this.$set(this.images,this.index,res.data.data);
                                document.getElementById('img'+this.editItem.id).setAttribute('src',this.imgPrefix+res.data.data.file.url+'.'+res.data.data.file.type);
                            }
                            this.$forceUpdate();
                            $('#imageModal').modal('hide');
                            return
                        }
                        window.tempTip.show(res.data.message);
                    }).catch(err=>{
                        window.tempTip.show(err)
                    });
                },
                destroy(id,index){
                    let url = '{{url("apiLocal/maintenance/expressPrinting/part/image/destroy")}}'+"?id"+id;
                    window.axios.delete(url).then(res=>{
                        if(res.data.success){
                            window.tempTip.showSuccess("文件删除成功");
                            this.$delete(this.images,index)
                            this.$forceUpdate()
                            return
                        }
                        window.tempTip.show(res.data.message);
                    }).catch(err=>{
                        window.tempTip.show(err)
                    });
                },
                setImageStyle(item){
                }
            }
        })
    </script>
@endsection