@extends('layouts.app')
@section('title')盘点-任务-{!! $inventory->id !!}@endsection


@section('content')
    @component('inventory.stockInventory.menu')
        <li class="nav-item">
            <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('enterStockInventory',3)}">盘点中({!! $inventory->id !!})</a>
        </li>
    @endcomponent
    <div id="list" class="container-fluid" style="min-width: 1500px">
        <div class="mt-3 pl-5">
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">货主:</label><span>@{{ inventory.owner.name }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">盘点单号:</label><span>@{{ inventory.id }}</span>
        </span>
        </div>
        <div class="mt-3 pl-5">
        <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">时间范围:</label><span>@{{ inventory.start_at }}——@{{ inventory.end_at }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">已盘点:</label><span>@{{ inventory.processed }}/总数:@{{ inventory.total }}</span>
        </span>
            <span class="form-group pl-5 shadow-sm p-2 mb-5 bg-white rounded">
            <label class="col-1 font-weight-bold">剩余数:</label><span>@{{ inventory.surplus }}</span>
        </span>
        </div>
        <div class="mt-4 ml-5" >
        <span class="btn col-1 font-weight-bold"  style="cursor: default" :class="inventory.surplus!=0?'bg-info':''">
            @{{ inventory.type }}
        </span>
            <span class="btn btn-outline-info col-1 disabled font-weight-bold">复盘</span>
        </div>
{{--        method="POST"  action='{{url('inventory/stockInventory/stockInventory/'.$inventory->owner['id'])}}' @csrf   @method('PUT')--}}
        <form id="form"   class="mt-3 pl-5">
            <div class="row row-cols-3">
        <span>
            <label class="text-secondary font-weight-bold">请输入库位</label>
            <input id="inventoryInput" name="location" type="text" class="form-control col-6 input"  autocomplete="off">
        </span>
                <span>
                    <label class="text-secondary font-weight-bold">请输入产品条码</label>
                    <input id="barcode" name="barcode" type="text" class="form-control col-6 input" autocomplete="off" @blur="searchBarcode">
                </span>
                <span>
            <label class="text-secondary font-weight-bold">请输入盘点数</label>
            <input type="text" id="count" name="count" class="form-control col-6 input"  autocomplete="off">
        </span>
            </div>
        </form>

        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2">
            <tr>
                <th>序号</th>
                <th>库位</th>
                <th>产品名</th>
                <th>产品条码</th>
                <th>生产日期</th>
                <th>失效日期</th>
                <th>入库日期</th>
                <th>批号</th>
                <th>ERP属性仓</th>
                <th>质量状态</th>
                <th>库存数量</th>
                <th>可用数量</th>
                <th>盘点数量</th>
                <th>复盘数量</th>
                <th>盘点差异</th>
                <th>分配数量</th>
            </tr>
            <tr v-for="(inventoryMission,i) in inventoryMissions" v-if="inventoryMission.checked=='是'"  @click="selectedColor(inventoryMission.id)" :style="{'font-weight': inventory.id==selectedStyle?'bold':''}">
                <td>@{{ i+1 }}</td>
                <td>@{{ inventoryMission.location }}</td>
                <td v-if="inventoryMission.commodity">@{{ inventoryMission.commodity.name }}</td>
                <td v-if="inventoryMission.commodity">@{{ inventoryMission.commodity.barcode }}</td>
                <td >@{{ inventoryMission.produced_at }}</td>
                <td >@{{ inventoryMission.valid_at }}</td>
                <td >@{{ inventoryMission.stored_at }}</td>
                <td class="text-muted">@{{ inventoryMission.batch_number }}</td>
                <td >@{{ inventoryMission.erp_type_position }}</td>
                <td >@{{ inventoryMission.quality }}</td>
                <td >@{{ inventoryMission.stored_amount }}</td>
                <td >@{{ inventoryMission.valid_amount }}</td>
                <td>@{{ inventoryMission.verified_amount }}</td>
                <td>@{{ inventoryMission.re_checked_amount }}</td>
                <td>@{{ inventoryMission.difference_amount }}</td>
                <td>@{{ inventoryMission.occupied_amount }}</td>
            </tr>
        </table>
    </div>

@endsection

@section('lastScript')
    <script>
        let listVue = new Vue({
            el: "#list",
            data: {
                inventory:{!! $inventory!!},
                inventoryMissions:{!! $inventoryMissions !!},
                checkData: [],
                selectedStyle:'',
            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $("#list").removeClass('d-none');
                document.getElementById('inventoryInput').focus();
            },
            methods:{
                selectedColor(id){
                    if (id==this.selectedStyle){
                        this.selectedStyle='';
                        return;
                    }
                    this.selectedStyle=id;
                },
                //验证输入盘点产品条码对应是否有商品
                searchBarcode(){
                    let barcode=document.getElementById('barcode').value;
                    let _this=this;
                    let barcodes=[];
                    _this.inventoryMissions.forEach(function (inventoryMission) {
                        barcodes.push(inventoryMission.commodity.barcode);
                    });
                    if (!barcodes.includes(barcode)){
                        tempTip.setDuration(2000);
                        tempTip.show('你输入的产品条码没有对应的产品!');
                    }
                },
                //提交盘点
                submitStockInventory(){
                    let _this=this;
                    let url='{{url('inventory/stockInventory')}}';
                    let location=document.getElementById('inventoryInput').value;
                    let barcode=document.getElementById('barcode').value;
                    let count=document.getElementById('count').value;
                    let inventoryId=_this.inventory.id;
                    axios.post(url,{location:location,barcode:barcode,count:count,inventoryId:inventoryId})
                        .then(function (response) {
                            if (!response.data.success){
                                tempTip.setDuration(2000);
                                tempTip.show('盘点失败!'+'   '+response.data.data);
                            }else {
                                if (_this.inventory.id==response.data.inventory.id){
                                    _this.inventory.processed=response.data.inventory.processed;
                                    _this.inventory.surplus=response.data.inventory.surplus;
                                }
                                _this.inventoryMissions.every(function (inventoryMission,i) {
                                    if (inventoryMission.id==response.data.inventoryMission.id){
                                        inventoryMission.checked=response.data.inventoryMission.checked;
                                        inventoryMission.verified_amount=response.data.inventoryMission.verified_amount;
                                        inventoryMission.difference_amount=response.data.inventoryMission.difference_amount;
                                        _this.inventoryMissions.splice(i,1)
                                        _this.inventoryMissions.unshift(inventoryMission);
                                        return false;
                                    }
                                    return true;
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('盘点成功！');
                            }
                    }).catch(function (err) {
                        tempTip.setDuration(2000);
                        tempTip.show('盘点失败!'+'网络错误'+err);
                    })
                },
            }
        });
        $("#form").on("keydown","input",function(){
            let _this=this;
            let e = event || window.event;
            if(e && e.keyCode==13) {
                let inputs = $("#form .input");
                let idx = inputs.index(this);     // 获取当前焦点输入框所处的位置
                let location=document.getElementById('inventoryInput').value;
                if (idx == inputs.length - 1) {       // 判断是否是最后一个输入框
                    if (location==''||location==undefined||location==null){
                        document.getElementById('inventoryInput').focus();
                        return;
                    }
                    listVue.submitStockInventory();
                    $("#form .input").val('');
                    document.getElementById('inventoryInput').focus();
                } else {
                    inputs[idx + 1].focus(); // 设置焦点
                    inputs[idx + 1].select(); // 选中文字
                }
            }
        });
    </script>
@endsection

