@extends('layouts.app')
@section('title')手持入库-收货详情@endsection

@section('content')
    <div class="d-none" id="container">
        <div class="card offset-md-3 col-md-6 col-sm-12">
            <div class="card-header text-center bg-transparent" id="header_title">
                <span class="font-weight-bold h3">收货</span>
            </div>
            <div class="">
                <div class="form-group row m-1">
                    <span class="font-weight-bold text-sm-right" v-if="asnno">
                        @{{ asnno }}_已收/待收数量: <span class="h5">@{{ asn_receivedqty }}/@{{ asn_expectedqty }}</span></span>
                </div>
                <div class="form-group row m-1 mt-1">
                        <span class="text-right">
                            <span class="fa fa-search fa-lg" aria-hidden="true" @click="selectAsnDetails()"></span>
                            <label for="sku" class="text-right text-info font-weight-bold h5">产品*:</label>
                        </span>
                    <input type="text" class="form-control form-control-sm col-8 font-weight-bold" id="sku" autocomplete="off" placeholder="输入商品sku或商品条码"
                           :class="errors.sku ? 'is-invalid' : ''" @keydown.enter="enterVal($event)" v-model="info.sku" @blur="checkedSku()">
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.sku">
                            <strong>@{{ errors.sku[0] }}</strong>
                    </span>
                </div>
                <div v-if="isInit">
                    <div class="form-group row m-1">
                        <label for="name" class="text-right h5">品名:</label>
                        <span id="name">@{{ info.name }}</span>
                    </div>
                    <div class="form-group row m-1">
                        <label for="quantity" class="text-right h5">已收/预收数量:</label>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <span id="quantity" class="font-weight-bold">@{{ info.receivedqty?info.receivedqty:0 }}/@{{ info.expectedqty?info.expectedqty:0 }}</span>
                    </div>
                    <div class="form-group row m-1">
                        <label for="amount" class="text-right text-info font-weight-bold h5">实收数量*:</label>
                        <input type="number" class="form-control form-control-sm col-8 font-weight-bold" id="amount" autocomplete="off"
                               :class="errors.amount ? 'is-invalid' : ''" v-model="info.amount" @keydown.enter="enterVal($event)">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.amount">
                            <strong>@{{ errors.amount[0] }}</strong>
                        </span>
                    </div>
{{--                    <div class="form-group row m-1">--}}
{{--                        <label for="location" class="text-right">目标库位:</label>--}}
{{--                        <input type="text" class="form-control form-control-sm col-8" id="location" autocomplete="off"--}}
{{--                               @keydown.enter="enterVal($event)" v-model="info.location">--}}
{{--                    </div>--}}
                    <div class="form-group row m-1">
                        <label for="trackNumber" class="text-right text-info font-weight-bold h5">容器号*:</label>
                        <input type="text" class="form-control form-control-sm col-8 font-weight-bold" id="trackNumber" autocomplete="off"
                               @keydown.enter="enterVal($event)" :class="errors.trackNumber ? 'is-invalid' : ''" v-model="info.trackNumber">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.trackNumber">
                            <strong>@{{ errors.trackNumber[0] }}</strong>
                        </span>
                    </div>
                </div>
                <div style="overflow: auto;overflow-x: hidden" id="cardTable" v-if="!isInit">
                    <table class="table-sm table-striped table-bordered table-hover mb-3"
                           style="background: rgb(255, 255, 255);">
                        <tr v-for="(asnDetail,i) in asnDetails" @click="selectTrOne(i,asnDetail.sku)" :class="selectTr===i+1?'focusing' : ''">
                            <td style="filter:grayscale(30%);">
                                <div>
                                    <div style="transform:scale(1)" class="pl-0">
                                        <span><span class="text-danger font-weight-bold h5">产品:</span><span class="text-black h5">@{{ asnDetail.sku }}</span></span>
                                        <span><span class="font-weight-bold h5">行号:</span><span class="text-lowercase h5" >@{{ asnDetail.asnlineno }}</span></span>
                                        <span class="text-right float-right h5">选中:<input type="checkbox" @click="checked(asnDetail)"></span>
                                        <span><span class="text-lowercase h5">品名:</span><span class="text-lowercase h5">@{{ asnDetail.skudescrc }} </span></span>
                                        <span><span class="text-black h5">预期数量:</span><span class="text-black-50 h5">@{{ asnDetail.expectedqty }}</span></span>
                                        <span><span class="text-black h5">已收数量:</span><span class="text-black-50 h5">@{{ asnDetail.receivedqty?asnDetail.receivedqty:asnDetail.receivedqty_each }}</span></span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="border-top border-dark" v-if="basSku.lot_id">
                <div class="form-group row">
                    <span class="col-6" v-if="basSku.lot_id.lotkey01==='Y'">
                        <label for="lotatt01" class=" text-right text-info font-weight-bold h5">生产日期:</label><br>
                        <input type="date" class="form-control form-control-sm h5 font-weight-bold"
                               :class="errors.lotatt01 ? 'is-invalid' : ''"  id="lotatt01" v-model="info.lotatt01">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt01">
                            <strong>@{{ errors.lotatt01[0] }}</strong>
                        </span>
                    </span>
                    <span class="col-6" v-if="basSku.lot_id.lotkey02==='Y'">
                        <label for="lotatt02" class=" text-right text-info font-weight-bold h5">失效日期:</label>
                        <input type="date" class="form-control form-control-sm h5 font-weight-bold"
                               :class="errors.lotatt02 ? 'is-invalid' : ''" id="lotatt02" v-model="info.lotatt02">
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt02">
                            <strong>@{{ errors.lotatt02[0] }}</strong>
                        </span>
                    </span>
                </div>
                <div class="form-group row">
                    <span class="col-6" v-if="basSku.lot_id.lotkey04==='Y'">
                        <label for="lotatt04" class=" text-right text-info font-weight-bold h5">批号:</label><br>
                        <input type="text" class="form-control form-control-sm h5 font-weight-bold" :class="errors.lotatt04 ? 'is-invalid' : ''" autocomplete="off"
                               id="lotatt04" v-model="info.lotatt04">
                         <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt04">
                            <strong>@{{ errors.lotatt04[0] }}</strong>
                        </span>
                    </span>
                    <span class="col-6" v-if="basSku.lot_id.lotkey05==='Y'">
                        <label for="lotatt05" class=" text-right text-info font-weight-bold h5">属性仓:</label>
                       <select class="form-control form-control-sm h5 font-weight-bold" :class="errors.lotatt05 ? 'is-invalid' : ''"
                               id="lotatt05" v-model="info.lotatt05">
                             <option v-for="(attributeLocation,i) in attributeLocations"  :value="attributeLocation.code">@{{ attributeLocation.codename_c }}</option>
                       </select>
                         <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt05">
                            <strong>@{{ errors.lotatt05[0] }}</strong>
                        </span>
                    </span>
                </div>
                <div class="form-group row">
                    <span class="col-6" v-if="basSku.lot_id.lotkey08==='Y'">
                        <label for="lotatt08" class=" text-right text-info font-weight-bold h5">质量状态:</label>
                       <select class="form-control form-control-sm h5 font-weight-bold"
                               :class="errors.lotatt08 ? 'is-invalid' : ''" id="lotatt08" v-model="info.lotatt08">
                           <option v-for="(quality,i) in qualityStatus"  :value="quality.code">@{{ quality.codename_c }}</option>
                       </select>
                         <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt08">
                            <strong>@{{ errors.lotatt08[0] }}</strong>
                        </span>
                    </span>
                    <span class="col-6" v-if="basSku.lot_id.lotkey03==='Y'">
                        <label for="lotatt03" class=" text-right text-info font-weight-bold h5">入库日期:</label>
                        <input type="date" class="form-control form-control-sm h5 font-weight-bold"
                               :class="errors.lotatt03 ? 'is-invalid' : ''" id="lotatt03" v-model="info.lotatt03">
                         <span class="invalid-feedback offset-3" role="alert" v-if="errors.lotatt03">
                            <strong>@{{ errors.lotatt03[0] }}</strong>
                        </span>
                    </span>
                </div>
            </div>
            <div class="card-footer bg-transparent">
                <button type="button" id="confirm" class="btn btn-md btn-success font-weight-bold float-right" @click="ensure()">确定</button>
                <button type="button" id="cancel" class="btn btn-md btn-danger font-weight-bold float-left" @click="cancel()">取消</button>
            </div>
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                asnno:'{!! $asnno !!}',
                customerid:'{!! $customerid !!}',
                asn_expectedqty:'{!! $asn_expectedqty !!}',
                asn_receivedqty:'{!! $asn_receivedqty !!}',
                qualityStatus:{!! $qualityStatus !!},
                attributeLocations:{!! $attributeLocations !!},
                basSku:{},
                permissionList:[ //允许聚焦许可列表
                    "sku","amount","trackNumber"
                ],
                asnDetails:[],
                info:{},
                errors:{},
                isAndroid:false,
                isInit:true,
                element:[
                    "sku","amount","trackNumber"
                ],
                selectTr:'',
            },
            mounted(){
                if (navigator.userAgent.indexOf("Android")!==-1)this.isAndroid = true;
                this.pageInit();
                $("#container").removeClass("d-none");
                document.getElementById("sku").focus();
            },
            methods:{
                //页面初始化
                pageInit(){
                    if (!this.isAndroid)return;
                    let element = document.getElementById("navbarSupportedContent").parentElement;
                    element.className = "row";
                    element.children[0].className += " col-5";
                    element.innerHTML = element.children[0].outerHTML;
                    let e1 = document.getElementById("menu");
                    let e2 = document.getElementById("demand-div");
                    if (e1)e1.remove();
                    if (e2)e2.remove();
                    document.getElementById('app').firstElementChild.style.display = 'none';
                },
                selectTrOne(i,sku){
                    if (this.selectTr===i+1){
                        this.selectTr=0
                    }else {
                        this.selectTr=i+1;
                    }
                },
                checkedSku(){
                    if (!this.info.sku)return;
                    let url = '{{url('store/handInStorage/getBasSkuWithLot')}}';
                    window.axios.post(url,{asnno:this.asnno,customerid:this.customerid,sku:this.info.sku})
                        .then(res=>{
                            if (res.data.success){
                                this.fillInfo(res.data.asnDetail);
                                if (res.data.asnDetail.lotatt08) this.info.lotatt08=res.data.asnDetail.lotatt08;
                                if (res.data.asnDetail.lotatt05) this.info.lotatt05=res.data.asnDetail.lotatt05;
                                this.basSku=res.data.basSku;
                                this.$forceUpdate()
                            }else {
                                this.clearInfo();
                                document.getElementById("sku").focus();
                                window.tempTip.setDuration(2000);
                                window.tempTip.show(res.data.data);
                                window.tempTip.showErrorAudio();
                            }
                        }).catch(err=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("网络错误："+err);
                        window.tempTip.showErrorAudio();
                    })
                },
                checked(asnDetail){
                    this.isInit=true;
                    this.fillInfo(asnDetail);
                    let url = '{{url('store/handInStorage/getBasSkuWithLot')}}';
                    window.axios.post(url,{asnno:this.asnno,customerid:this.customerid,sku:this.info.sku})
                        .then(res=>{
                            if (res.data.success){
                                if (res.data.asnDetail.lotatt08) this.info.lotatt08=res.data.asnDetail.lotatt08;
                                if (res.data.asnDetail.lotatt05) this.info.lotatt05=res.data.asnDetail.lotatt05;
                                this.basSku=res.data.basSku;
                                this.$forceUpdate()
                            }else {
                                window.tempTip.setDuration(2000);
                                window.tempTip.show(res.data.data);
                                window.tempTip.showErrorAudio();
                            }
                        }).catch(err=>{
                        window.tempTip.setDuration(2000);
                        window.tempTip.show("网络错误："+err);
                        window.tempTip.showErrorAudio();
                    })
                },
                clearInfo(){
                    this.info.sku='';
                    this.info.name='';
                    this.info.expectedqty=0;
                    this.info.receivedqty=0;
                    this.info.amount='';
                    this.info.asnlineno='';
                    this.info.lotatt01='';
                    this.info.lotatt02='';
                    this.info.lotatt03='';
                    this.info.lotatt04='';
                    this.info.lotatt05='';
                    this.info.lotatt08='';
                    this.$forceUpdate()
                },
                fillInfo(asnDetail){
                    this.info.sku=asnDetail.sku;
                    this.info.name=asnDetail.skudescrc;
                    this.info.expectedqty=asnDetail.expectedqty?asnDetail.expectedqty:asnDetail.expectedqty_each;
                    this.info.receivedqty=asnDetail.receivedqty?asnDetail.receivedqty:asnDetail.receivedqty_each;
                    this.info.amount=Number(this.info.expectedqty)-Number(this.info.receivedqty);
                    this.info.asnlineno=asnDetail.asnlineno;
                },
                checkInfo(){
                    let error = {};
                    if (!this.info.sku)error.sku = ["条码必填"];
                    if (!this.info.amount)error.amount = ["实收数量必填"];
                    if (this.info.amount==0)error.amount = ["实收数量不可为零"];
                    if (!this.info.trackNumber)error.trackNumber = ["容器号必填"];
                    if (this.info.amount && ((Number(this.info.amount)+Number(this.info.receivedqty))>Number(this.info.expectedqty)))error.amount = ["总数不能超过预期数"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey01==='Y' && !this.info.lotatt01) error.lotatt01=["生产日期为选"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey02==='Y' && !this.info.lotatt02) error.lotatt02=["失效日期为选"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey03==='Y' && !this.info.lotatt03) error.lotatt03=["入库日期为选"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey04==='Y' && !this.info.lotatt04) error.lotatt04=["批号未填"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey05==='Y' && !this.info.lotatt05) error.lotatt05=["属性仓未选"];
                    if (this.basSku.lot_id && this.basSku.lot_id.lotkey08==='Y' && !this.info.lotatt08) error.lotatt08=["质量状态未选"];
                    if (JSON.stringify(error)!=='{}'){this.errors = error;}
                },
                enterVal(e){
                    let index = this.element.indexOf(e.target.id)+1;
                    let element = document.getElementById(this.element[index]);
                    if (element){
                        element.focus();
                        element.select();
                    }
                    e.preventDefault();
                    return false;
                },
                selectAsnDetails(){
                    this.isInit=false;
                    this.info={};
                    let url = '{{url('store/handInStorage/selectAsnDetails')}}';
                    window.axios.post(url,{asnno:this.asnno})
                        .then(res=>{
                            if (res.data.success){
                                this.asnDetails=res.data.data;
                                this.$forceUpdate()
                            }else {
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                                this.isInit=true;
                                window.tempTip.showErrorAudio();
                            }
                        }).catch(err=>{
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误："+err);
                        window.tempTip.showErrorAudio();
                    })
                },
                ensure(){
                    this.errors={};//初始errors状态
                    this.checkInfo();
                    this.info.customerid=this.customerid;
                    this.info.asnno=this.asnno;
                    // if (this.info.trackNumber==''||this.info.trackNumber==null||this.info.trackNumber==undefined)this.info.trackNumber='';
                    if (this.info.location==''||this.info.location==null||this.info.location==undefined)this.info.location='';
                    if (this.info.lotatt02==''||this.info.lotatt02==null||this.info.lotatt02==undefined)this.info.lotatt02='';
                    if (Number(this.info.receivedqty)===Number(this.info.expectedqty)){
                        window.tempTip.setDuration(2000); window.tempTip.show("收货已完成");
                    }
                   if(JSON.stringify(this.errors)!=='{}')return;
                   this.ensureSubmit();
                },
                ensureSubmit(){
                    tempTip.setDuration(99999);
                    tempTip.waitingTip('提交中');
                    let url = '{{url('store/handInStorage/fluxHandIn')}}';
                    if (JSON.stringify(this.errors)==='{}') window.axios.post(url,{info:this.info})
                        .then(res=>{
                            if (res.data.success){
                                // this.info={};
                                this.clearInfo();
                                this.asn_expectedqty=res.data.data.expectedqty;
                                this.asn_receivedqty=res.data.data.receivedqty;
                                this.asnDetails=[];
                                this.$forceUpdate();
                                tempTip.setDuration(2000);
                                tempTip.cancelWaitingTip();
                                tempTip.showSuccess('收货成功');
                                document.getElementById("sku").focus();
                                document.getElementById("sku").select();
                                if (this.asn_expectedqty==this.asn_receivedqty)
                                    window.location.href="{{url('store/handInStorage/receive')}}";
                            }else {
                                tempTip.setDuration(3000);
                                tempTip.cancelWaitingTip();
                                tempTip.show(res.data.data);
                                tempTip.showErrorAudio();
                            }
                        }).catch(err=>{
                            tempTip.setDuration(2000);
                            tempTip.cancelWaitingTip();
                            tempTip.show("网络错误："+err);
                            tempTip.showErrorAudio();
                        })
                },
                cancel(){
                    setTimeout(function () {
                        window.location.reload();
                        document.getElementById("sku").focus();
                    },100);
                },
            },
        });
    </script>
@stop