@extends('layouts.app')
@section('title')波次分拣@endsection
@section('content')
    <div id="container" class="d-none container-fluid mt-2">
        <div class="card">
            <div class="card-header m-0">
                <b>波次信息</b>
                <button  class="btn text-white btn-sm btn-info pull-right" @click="isShow=!isShow" data-toggle="collapse" data-target="#body">@{{ isShow ? '隐藏' : '显示' }}</button>
            </div>
            <div class="card-body collapse" id="body">
                <div v-for="(val,index) in waves" class="mt-2">
                    <div class="card-title font-weight-bold mb-0">@{{ batch+'-'+(index+1) }}</div>
                    <div class="card-text text-muted small">
                        <div v-for="(obj,i) in val" class="row m-0" style="border-bottom: RGB(247,247,247) 1px solid">
                            <span class="col-6">@{{ obj.barcode }}</span>
                            <span class="col-6">@{{ obj.qty }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header row m-0 p-0">
                    <b class="col-4">分拣信息</b>
                    <input id="barcode" v-model="barcode" @keydown.13="searchBarcode()" class="form-control form-control-sm rounded-pill col-6 offset-2" placeholder="条码"></input>
                </div>
                <div class="card-body">
                    <div class="row border-info p-0" style="height:65vh;overflow-y: auto">
                        <div class="col-4 m-0 p-1" style="height: 55px;border: 1px solid #aaaaaa;z-index:100;position:relative;" v-for="index in waves.length"
                             :style="[waveQtyMap['_'+(index-1)] && waveQtyMap['_'+(index-1)].sum>0 ? {boxShadow: colorPool[colorIndex]+' 0 0 5px 5px inset'} : '']">
                            <div class="text-center small font-weight-bold h-25 text-secondary">@{{ 'W-'+index }}</div>
                            <div style="display:flex;align-items:center;justify-content:center;" class="w-100 h-50 text-primary font-weight-bold">
                                @{{ waveQtyMap['_'+(index-1)] ? waveQtyMap['_'+(index-1)].sum : '0' }}
                            </div>
                            <div class="text-center small font-weight-bold h-25 text-muted mb-1">@{{ waveQtyMap['_'+(index-1)] ? waveQtyMap['_'+(index-1)].lot : '0' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white w-100 row" id="searchBlock" style="position: fixed;top:0;left:0;
            width: 100%; text-align: center; border-radius: 3px;">
            <div class="position-relative offset-2 col-9 mt-3 mb-3">
                <input id="loadBatch" class="form-control form-control-sm w-100 rounded-pill" @keydown.enter="loadBatch()" v-model="batch" type="text" placeholder="波次号"></input>
                <a id="search" @click="loadBatch()"><button type="button" class="border btn btn-sm btn-primary text-white rounded-pill position-absolute" style="top: 0;right: 12px;">开始分拣</button></a>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#container",
            data:{
                batch:"",
                barcode:"",
                isShow:false,
                waves:[],
                waveQtyMap:{},
                colorIndex:0,
                colorPool:[
                    "RGB(224,41,43)","rgba(19,193,137)","RGB(97,179,233)"
                ]
            },
            mounted:function(){
                this.pageInit();
                setTimeout(()=>{
                    $("#container").removeClass('d-none');
                },100);
                setTimeout(()=>{
                    $("#loadBatch").focus();
                },200);
            },
            methods:{
                //页面初始化
                pageInit(){
                    let element = document.getElementById("navbarSupportedContent").parentElement;
                    element.className = "row";
                    element.children[0].className += " col-5";
                    element.children[0].href = "#";
                    element.innerHTML = element.children[0].outerHTML;
                    let e1 = document.getElementById("menu");
                    let e2 = document.getElementById("demand-div");
                    //let e3 = document.getElementsByClassName("navbar");
                    if (e1)e1.remove();
                    if (e2)e2.remove();
                    //if (e3.length>0)e3[0].remove();
                    element = document.getElementById("container");
                    if (element)element.style.height = (window.innerHeight-100)+"px";
                },
                loadBatch(){
                    window.tempTip.postBasicRequest("{{url('order/wave/loadBatch')}}",{code:this.batch},res=>{
                        this.waves = res;
                        $("#barcode").focus();
                    })
                },
                searchBarcode(){
                    let waveQtyMap = {};
                    try {
                        this.waves.forEach((wave,i)=>{
                            wave.forEach(order=>{
                                if (order.barcode === this.barcode){
                                    if (order.scanSign!==undefined){
                                        throw new Error("unique");
                                    }
                                    order.scanSign = true;
                                    if (waveQtyMap['_'+i]===undefined){
                                        waveQtyMap['_'+i] = {"sum":order.qty,"lot":order.location};
                                    } else waveQtyMap['_'+i].sum += order.qty;
                                }
                            })
                        })
                    }catch (e){
                        window.tempTip.setDuration(2000);
                        window.tempTip.setIndex(999);
                        window.tempTip.show("重复扫描");
                        return;
                    }finally {
                        this.waveQtyMap = waveQtyMap;
                        let el = $("#barcode");
                        el.focus();
                        el.select();
                    }
                    if (this.colorIndex===this.colorPool.length-1)this.colorIndex = 0;
                    else this.colorIndex++;
                },
            }
        });

    </script>
@endsection