@extends('layouts.app')
@section('title')查询-商品@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.commodity.menu')@endcomponent
    </span>
    <div class="container-fluid" id="list">
        <div class="card">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-body" style="text-align:center;height: 150px">
                                <div class="row col-12 mt-5">
                                    <label class="col-2 text-info">选择货主：</label>
                                    <select class="form-control form-control-sm col-6" name="owner_code" v-model="owner_code">
                                        <option v-for="owner in owners" :value="owner.code">@{{ owner.name }}</option>
                                    </select>
                                    <input placeholder="搜索货主" @input="seekOwner($event)" class="form-control form-control-sm col-3">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="col-12 btn btn-success" @click="syncCommodity()">开始同步</button>
                            </div>
                        </div>
                    </div>
                </div>

                @can('商品信息-编辑')<button class="btn btn-sm btn-outline-info mb-1" @click="openModal()" >同步商品</button>@endcan
                <table class="table table-striped table-sm">
                    <tr>
                        <th>ID</th>
                        <th>SKU</th>
                        <th>商品名</th>
                        <th>条码</th>
                        <th>货主</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="commodity in commodities" @click="selectTr===commodity.id?selectTr=0:selectTr=commodity.id" :class="selectTr===commodity.id?'focusing' : ''">
                        <td class="text-muted">@{{commodity.id}}</td>
                        <td>@{{commodity.sku}}</td>
                        <td>@{{commodity.name}}</td>
                        <td>@{{commodity.barcode}}</td>
                        <td>@{{commodity.owner_name}}</td>
                        <td class="text-muted">@{{commodity.created_at}}</td>
                        <td>
                            @can('商品信息-编辑')
                            <button class="btn btn-sm btn-outline-primary" @click="edit(commodity.id)">改</button> @endcan
                            @can('商品信息-删除')
                            <button class="btn btn-sm btn-outline-dark" @click="destroy(commodity)">删</button> @endcan
                        </td>
                    </tr>
                </table>
                {{$commodities->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                commodities:[
                    @foreach( $commodities as $commodity )
                    {
                        id:'{{$commodity->id}}',name:'{{$commodity->name}}',created_at:'{{$commodity->created_at}}',
                        sku:'{{$commodity->sku}}',barcode:'{{$commodity->barcode}}',owner_name:'{{$commodity->owner_name}}'
                    },
                    @endforeach
                ],
                owners : [],
                owner_code : '',
                selectTr:0
            },
            methods:{
                edit:function(id){
                    location.href = "{{url('maintenance/commodity')}}/"+id+"/edit";
                },
                destroy:function(commodity){
                    if(!confirm('确定要删除商品信息“' + commodity.name + '”吗？')){return};
                    let data=this;
                    let url = "{{url('maintenance/commodity')}}/"+commodity.id;
                    axios.delete(url,{id:commodity.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.commodities.length; i++) {
                                    if (data.commodities[i].id===commodity.id){
                                        data.commodities.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除商品信息"'+commodity.name+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除商品信息"'+commodity.name+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除商品信息失败!'+'网络错误：' + err)
                        });
                },
                openModal(){
                    axios.post('{{url('apiLocal/maintenance/owner/getOwners')}}')
                        .then(res=>{
                            this.owners = res.data;
                            $("#modal").modal('show');
                        });
                },
                syncCommodity(){
                    if (!this.owner_code){
                        tempTip.setDuration(3000);
                        tempTip.show('未选择货主');
                        return;
                    }
                    let owner_id = "";
                    this.owners.some(owner => {
                        if (owner.code === this.owner_code){
                            owner_id = owner.id;
                            return true;
                        }
                    });
                    window.tempTip.setIndex(1099);
                    window.tempTip.setDuration(9999999);
                    window.tempTip.waitingTip("处理中(如若数据量过多，因需要逐条对比矫正耗时较长，请耐心等候)。。。");
                    axios.post('{{url('maintenance/commodity/syncWMS')}}',{owner_code : this.owner_code, owner_id : owner_id})
                        .then(res => {
                            if (res.data.success){
                                tempTip.setDuration(2000);
                                tempTip.cancelWaitingTip();
                                tempTip.setIndex(1099);
                                tempTip.showSuccess("同步成功");
                                return true;
                            }
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.data);
                        }).catch(err => {
                            tempTip.setDuration(3000);
                            tempTip.showSuccess("网络错误："+err);
                        });
                },
                seekOwner(e){
                    this.owners.some(owner => {
                        if (owner.name.indexOf(e.target.value) !== -1){
                            this.owner_code = owner.code;
                            return true;
                        }
                    });
                }
            }
        });
    </script>
@endsection