@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('store.menu')@endcomponent
        @component('store.blindReceive.menu')@endcomponent
    </div>
    <div class="container">
        <audio src="{{asset('sound/warning_otherBarcode.mp3')}}" controls="controls" preload id="soundWarning" hidden>
        </audio>
        <audio src="{{asset('sound/ding.mp3')}}" controls="controls" preload id="soundDing" hidden>
        </audio>
        <div class="row mt-2">
            <div class="col-12" id="scanColumn">
                <div class="card" :class="borderByMode">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='regular'">常规：可输入效期，相同条码记录不会合并</p>
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='increasing'">逐一扫描：处理单一重复商品，每扫一次对应隔口总数量自动递增，扫到不同条码会提示</p>
                                <p class="text-muted" style="font-size: 0.5em" v-if="inputMode=='multiIncreasing'">边扫边分：处理多种商品，自动将扫到的不同条码数量递增到各自隔口号</p>
                                <ul class="nav nav-tabs mb-4 mt-n3">
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='regular'?'active':''"
                                                            @click="inputMode='regular';changeToManualInputAmount();cleanInputs();inputting.fromIncreasing=false">常规</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='increasing'?'active':''"
                                                            @click="inputMode='increasing';changeToScanInputAmount();cleanInputs();inputting.fromIncreasing=true;">逐一扫描</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link" :class="inputMode=='multiIncreasing'?'active':''"
                                                            @click="inputMode='multiIncreasing';changeToScanInputAmount();cleanInputs();inputting.fromIncreasing=true">边扫边分</a></li>
                                </ul>
                            </div>
                            <div class="col-6">
                                <div v-if="inputMode=='regular'">
                                    <div class="btn btn-sm btn-outline-primary"
                                         v-if="!isManualInputtingBarcode" @click="changeToManualInputBarcode">手动输入</div>
                                    <div class="btn btn-sm btn-outline-danger"
                                         @click="changeToScanInputBarcode" v-if="isManualInputtingBarcode">扫描输入</div>
                                </div>
                                <input type="text" id="barcode" class="form-control" :disabled="status.barcodeDisable" placeholder="扫入条码" @focusin="focusOutDocument" @focusout="focusDocument" v-model="inputting.barcode">
                                <div v-if="inputMode=='regular'">
                                    <div class="card-title">
                                        生产日期：
                                    </div>
                                    <input type="date" class="form-control mb-2" v-model="inputting.produce_date" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter">
                                </div>
                                <div v-if="inputMode=='regular'">
                                    <div class="card-title">
                                        失效日期：
                                    </div>
                                    <input type="date" class="form-control mb-2" v-model="inputting.valid_date" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter">
                                </div>
                                <div v-if="inputMode=='regular'" class="mt-0">
                                    <div class="card-title">
                                        唯一码：
                                    </div>
                                    <input type="text" class="form-control mb-2" v-model="inputting.unique_code" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-title" id="amountLabel">
                                    手动输入数量：
                                </div>
                                <div class="input-group mt-n2 mb-2">
                                    <input type="number" id="amount" class="form-control" placeholder="" :disabled="status.amountDisable"
                                           v-model="inputting.amount" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"
                                           style='height: 40px;font-size: 1.6em;color:blue;font-weight: bolder;padding: 3px;text-align: center'>
                                </div>
                                <div class="card-title">
                                    格口号：
                                </div>
                                <input type="number" id="bin" class="form-control mt-n2 mb-2"
                                       v-model="inputting.bin"
                                       :disabled="status.binDisable" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter"
                                       style='height: 100px;font-size: 5em;color:red;font-weight: bolder;padding: 3px;text-align: center'>
                                <div v-if="inputMode=='regular'" class="mt-4">
                                    <div class="card-title">
                                        批次号：
                                    </div>
                                    <input type="text" class="form-control mb-2" v-model="inputting.batch_number" @focusin="focusOutDocument" @focusout="focusDocument" @keyup="oninputEnter">
                                </div>
                            </div>
                            <div class="col-12" v-if="commitButtonVisible && inputMode=='regular'" >
                                <button class="btn btn-success btn form-control" @click="commitGoods">确定</button>
                            </div>
                        </div>
                        <p class="card-text text-muted mt-3 mb-n3 text-center">
                            已完成：
                        </p>
                        <hr>
                        <table class="table table-sm  table-striped" v-if="goodses.length>0">
                            <tr>
                                <th>隔口号</th>
                                <th>数量</th>
                                <th>条码</th>
                                <th>生产日期</th>
                                <th>失效日期</th>
                                <th>批次号</th>
                                <th>唯一码</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(goods,i) in goodses" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                                <td>@{{ goods.bin }}</td>
                                <td>@{{ goods.amount }}</td>
                                <td>@{{ goods.barcode }}</td>
                                <td>@{{ goods.produce_date }}</td>
                                <td>@{{ goods.valid_date }}</td>
                                <td>@{{ goods.batch_number }}</td>
                                <td>@{{ goods.unique_code }}</td>
                                <td>
                                    <button class="btn btn-outline-danger btn-sm" @click="removeGoods($event,goods.barcode)">删</button>
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <span class="btn btn-outline-dark btn form-control" style="cursor: pointer" @click="submitExcelData">结束并生成Excel</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el: '#app',
            data:{
                focusing:'document',
                commitButtonVisible:false,
                isManualInputtingBarcode:false,
                isManualInputtingAmount:true,
                lastScannedBarcode:'',
                inputMode:'regular',//regular,increasing,multiIncreasing
                inputting:{
                    barcode:'',amount:'',bin:'',produce_date:'',valid_date:'',batch_number:'',fromIncreasing:false,unique_code:''
                },
                status:{
                    scanEndInputted:false,binDisable:false,barcodeDisable:true,amountDisable:false,
                },
                goodses:[],//{barcode,amount,bin,produce_date,valid_date,batch_number}
                selectTr:0,
            },
            mounted() {
                this.scanListening();
            },
            methods: {
                changeToManualInputAmount:function(){
                    this.status.amountDisable=false;
                    this.isManualInputtingAmount=true;
                    $('#amountLabel').text('输入数量：');
                    // $('#amount').attr('placeholder','数字');
                },
                changeToScanInputAmount:function(){
                    this.status.amountDisable=true;
                    this.isManualInputtingAmount=false;
                    $('#amountLabel').text('自动扫入数量：');
                    // $('#amount').attr('placeholder','自动');
                },
                changeToManualInputBarcode:function(){
                    this.status.barcodeDisable=false;
                    this.isManualInputtingBarcode=true;
                    $('#barcode').attr('placeholder','手工输入条码');
                },
                changeToScanInputBarcode:function(){
                    let data = this;
                    this.isManualInputtingBarcode=false;
                    this.inputting.barcode='';

                    let $barcode = $('#barcode');
                    this.status.barcodeDisable=false;
                    setTimeout(function () {
                        $barcode.focus();
                        data.status.barcodeDisable=true;
                    },20);
                    $barcode.attr('placeholder','扫入条码');
                },
                oninputEnter:function(e){
                    if (e.key === 'Enter') {
                        this.focusDocument();
                    }
                },
                focusDocument: function () {
                    this.focusing = 'document';
                    this.showCommitButton();
                },
                focusOutDocument: function () {
                    this.focusing = '';
                    this.autoFillBin();
                },
                scanListening: function () {
                    let data = this;
                    $(document).on('keypress', function (e) {
                        if(data.focusing!=='document'){return}
                        if(data.isManualInputtingBarcode){return}
                        if (e.keyCode !== 13) {
                            if(data.status.scanEndInputted){
                                data.lastScannedBarcode=data.inputting.barcode;
                                data.inputting.barcode='';
                                data.status.scanEndInputted=false;
                            }
                            data.inputting.barcode += String.fromCharCode(e.keyCode);
                        } else {
                            if(data.inputting.barcode.length<=1){
                                window.tempTip.setDuration(4500);
                                window.tempTip.show('未扫入条码，请检查扫码枪设置，尝试调至“直接键盘输出”模式');
                                return;
                            }
                            data.status.scanEndInputted = true;
                            data.showCommitButton();
                            data.autoFillBin();
                            switch(data.inputMode){
                                case 'increasing': data.commitGoodsOnIncreasingMode();break;
                                case 'multiIncreasing': data.commitGoodsOnMultiIncreasingMode();break;
                            }
                        }
                    });
                },
                commitGoodsOnIncreasingMode: function () {
                    let data = this;
                    function doIt(){
                        let repeatedBarcode=data.repeatedIncreasingBarcodeFromSaved();
                        function increase(){
                            data.inputting.bin=repeatedBarcode.bin;
                            repeatedBarcode.amount++;
                            data.inputting.amount=repeatedBarcode.amount;
                            window.tempTip.setDuration(500);
                            window.tempTip.showSuccess(repeatedBarcode.amount);
                            data.focusDocument();
                            data.audioDing();
                        }
                        if(!repeatedBarcode){
                            data.focusOutDocument();
                            data.alertVibrate();
                            window.tempTip.setInputType('number');
                            window.tempTip.inputVal('该商品第一件递增请输入隔口号：',function(bin){
                                if(bin===''){
                                    window.tempTip.setDuration(1500);
                                    window.tempTip.show('未输入隔口号，请重新扫描');
                                    data.alertVibrate();
                                    data.focusDocument();return}
                                data.inputting.bin=bin;
                                data.inputting.amount=1;
                                data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                                data.status.binDisable=true;
                                window.tempTip.setDuration(500);
                                window.tempTip.showSuccess('保存成功');
                                data.focusDocument();
                                data.audioDing();
                            })
                        }else{
                            increase();
                        }
                    }
                    if(data.lastScannedBarcode!==data.inputting.barcode && data.lastScannedBarcode){
                        data.audioWarning_otherBarcode();
                        data.focusOutDocument();
                        window.tempTip.confirm('扫到其它条码，是否切换至新条码并记录？',doIt,function () {
                            data.inputting.barcode=data.lastScannedBarcode;
                            // data.cleanInputs();
                            data.focusDocument();
                        })
                    }else{
                        doIt()
                    }
                },
                commitGoodsOnMultiIncreasingMode: function () {
                    let data = this;
                    let repeatedBarcode=this.repeatedIncreasingBarcodeFromSaved();
                    function increase(){
                        data.inputting.bin=repeatedBarcode.bin;
                        repeatedBarcode.amount++;
                        data.inputting.amount=repeatedBarcode.amount;
                        window.tempTip.setDuration(500);
                        window.tempTip.showSuccess(repeatedBarcode.amount);
                        data.focusDocument();
                        data.audioDing();
                    }
                    if(!repeatedBarcode){
                        data.focusOutDocument();
                        data.alertVibrate();
                        window.tempTip.setInputType('number');
                        window.tempTip.inputVal('该商品第一件递增请输入隔口号：',function(bin){
                            if(bin===''){
                                window.tempTip.setDuration(1500);
                                window.tempTip.show('未输入隔口号，请重新扫描');
                                data.alertVibrate();
                                data.focusDocument();return}
                            data.inputting.bin=bin;
                            data.inputting.amount=1;
                            data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                            data.status.binDisable=true;
                            window.tempTip.setDuration(500);
                            window.tempTip.showSuccess('保存成功');
                            data.focusDocument();
                            data.audioDing();
                        })
                    }else{
                        increase();
                    }
                },
                audioWarning_otherBarcode: function () {
                    let audio = document.getElementById('soundWarning');
                    audio.currentTime = 0;//重新播放
                    if(audio.paused){
                        audio.play();// 播放
                    }
                    this.alertVibrate();

                },
                audioDing: function () {
                    let audio = document.getElementById('soundDing');
                    audio.currentTime = 0;//重新播放
                    audio.play();// 播放
                    function startVibrate(duration) {
                        if (navigator.vibrate) {
                            navigator.vibrate(duration);
                        } else if (navigator.webkitVibrate) {
                            navigator.webkitVibrate(duration);
                        }
                    }
                    startVibrate(500);
                },
                alertVibrate: function () {
                    function startVibrate(duration) {
                        if (navigator.vibrate) {
                            navigator.vibrate(duration);
                        } else if (navigator.webkitVibrate) {
                            navigator.webkitVibrate(duration);
                        }
                    }
                    let vibrateInterval = setInterval(function() {
                        startVibrate(150);
                    }, 50);
                    setTimeout(function() {
                        clearInterval(vibrateInterval)
                    }, 2000);
                },
                autoFillBin: function () {
                    let data = this;
                    let isNotRepeatingBarcode=this.goodses.every(function(goods){
                        if(goods.barcode===data.inputting.barcode){
                            data.inputting.bin=goods.bin;
                            data.status.binDisable=true;
                            return false;
                        }
                        return true;
                    });
                    if(isNotRepeatingBarcode){
                        data.status.binDisable=false;
                    }
                },
                repeatedIncreasingBarcodeFromSaved: function () {
                    let data = this;
                    let repeatedGoods=null;
                    data.goodses.every(function(goods){
                        if(goods.barcode===data.inputting.barcode && goods.fromIncreasing){
                            repeatedGoods=goods;
                            return false;
                        }
                        return true;
                    });
                    return repeatedGoods;
                },
                commitGoods: function () {
                    let data = this;
                    window.tempTip.setDuration(3500);
                    if(!data.inputting.barcode){window.tempTip.show('请扫入条码');return;}
                    else if(!data.inputting.amount){window.tempTip.show('请输入数量');return;}
                    //else if(!data.inputting.bin){window.tempTip.show('请输入隔口号');return;}
                    data.recordOrPlusGoods();
                    window.tempTip.setDuration(1500);
                    window.tempTip.showSuccess('成功提交：' + data.inputting.barcode);
                    data.cleanInputs();
                    data.audioDing();
                },
                cleanInputs: function () {
                    this.changeToScanInputBarcode();
                    this.inputting.barcode='';
                    this.inputting.amount='';
                    this.inputting.bin='';
                    this.inputting.produce_date='';
                    this.inputting.valid_date='';
                    this.inputting.batch_number='';
                    this.inputting.unique_code='';
                    this.commitButtonVisible=false;
                    this.status.binDisable=false;
                    this.lastScannedBarcode='';
                },
                recordOrPlusGoods: function () {
                    let data = this;
                    if(this.inputMode==='regular'){
                        data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                        return;
                    }
                    let isNotRepeating=data.goodses.every(function(goods){
                        if(goods.barcode===data.inputting.barcode){
                            goods.amount=parseInt(goods.amount)+parseInt(data.inputting.amount);
                            return false;
                        }
                        return true;
                    });
                    if(isNotRepeating){
                        data.goodses.unshift(JSON.parse(JSON.stringify(data.inputting)));
                    }
                },
                removeGoods: function ($e,barcode) {
                    if(!confirm('确定要删除条码为'+barcode+'的记录吗'))return;
                    let data = this;
                    data.goodses.every(function(goods,i){
                        if(goods.barcode===barcode){
                            data.goodses.splice(i,1)
                            return false;
                        }
                        return true;
                    })
                },
                showCommitButton: function () {
                    let data = this;
                    if(data.inputting.barcode && data.inputting.amount /*&& data.inputting.bin*/){
                        data.commitButtonVisible=true;
                    }else{
                        if (this.inputMode==='regular' && this.status.barcodeDisable && !this.inputting.amount && this.inputting.barcode){
                            this.focusing = '';
                            document.getElementById('amount').focus();
                        }
                    }
                },
                submitExcelData: function () {
                    let data = this;
                    data.focusOutDocument();
                    if(data.goodses.length===0){
                        window.tempTip.show('请先录入数据再提交EXCEL');return;
                    }
                    window.tempTip.confirm('请检查表格，确定全部完成。提交后数据将全部清空，不能后退',
                        function () {
                            window.tempTip.setInputType('input');
                            window.tempTip.setIndex(999999);
                            window.tempTip.inputVal('请输入文件名：',function(val){
                                if(val===''){
                                    window.tempTip.setDuration(2500);
                                    window.tempTip.show('失败！文件名不能为空，请重新点击生成');
                                    return;
                                }
                                window.tempTip.setDuration(15500);
                                window.tempTip.waitingTip('提交Excel中...');
                                let expireHandler = setTimeout(function () {
                                    window.tempTip.cancelWaitingTip();
                                    window.tempTip.setDuration(1500);
                                    window.tempTip.show('响应超时! 请检查网络，确保可以连接后再重试。');
                                },9000);
                                let url='{{url("store/blindReceive/excels/apiStore")}}';
                                axios.post(url,{'goodses':data.goodses,'filename':val})
                                    .then(function(response){
                                        if(response.data.result==='success'){
                                            data.goodses=[];
                                            data.cleanInputs();
                                            window.tempTip.cancelWaitingTip();
                                            window.tempTip.setDuration(1500);
                                            window.tempTip.showSuccess('成功生成EXCEL，可在列表页查看');
                                            data.focusDocument();
                                        }else{
                                            window.tempTip.setDuration(1500);
                                            window.tempTip.show('生成EXCEL失败：'+response.data.fail_info);
                                            console.log(response);
                                            data.focusDocument();
                                            data.alertVibrate()
                                        }
                                        clearInterval(expireHandler);
                                    })
                                    .catch(function (err) {
                                        window.tempTip.setDuration(3500);
                                        window.tempTip.show('网络或系统错误，请将以下信息提交给开发者：'+err);
                                        clearInterval(expireHandler);
                                        data.alertVibrate();
                                    });
                            });
                        },function () {
                            data.focusDocument();
                        })
                }
            },
            computed: {
                borderByMode: function () {
                    return {
                        // 'border-info':this.inputMode==='regular',
                        'border-success':this.inputMode==='increasing',
                        'border-danger':this.inputMode==='multiIncreasing'
                    }
                }
            }
        });
    </script>
@endsection