@extends('layouts.app')
@section('title')手动录入-包裹管理@endsection

@section('content')
    <span id="nav2">
        @component('package.menu')@endcomponent
        @component('package.weigh.menu')@endcomponent
    </span>
    <div class="container-fluid" id="package">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <form method="POST" id="form" action="{{ url('package') }}">
                    @csrf
                    @if(Session::has('successTip'))
                        <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                    @endif
                    @if(Session::has('successError'))
                        <div class="alert alert-danger h1">{{Session::get('successError')}}</div>
                    @endif
                        <ul class="nav nav-tabs col-8 offset-2" style="transform: scale(0.97)">
                            <li class="nav-item"  @click="windowSwitchBatch">
                                <a class="nav-link" :class="[windowStatus.batch_input ?'active' : '']" href="#">波次号</a></li>
                            <li class="nav-item" @click="windowSwitchLogistic">
                                <a class="nav-link" :class="[windowStatus.logistic_input ?'active' : '']" href="#">快递单号</a></li>
                            <li class="nav-item" @click="windowSwitchOrder">
                                <a class="nav-link" :class="[windowStatus.order_input ?'active' : '']" href="#">订单号</a></li>
                        </ul>
                        <div class="" v-if="windowStatus.logistic_input">
                            <div class="form-group row">
                                <label for="name" class="col-2 col-form-label text-right">快递单号</label>
                                <div class="col-8">
                                    <input id="input" type="text" class="form-control @error('logistic_number') is-invalid @enderror"
                                           name="logistic_number" autocomplete="off" value="{{ old('logistic_number')}}">
                                    @error('logistic_number')
                                    <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('logistic_number') }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    <div class="" v-if="windowStatus.order_input">
                        <div class="form-group row">
                            <label for="order_code" class="col-2 col-form-label text-right text-info">订单号</label>
                            <div class="col-8">
                                <input id="input" type="text" class="form-control @error('order_code') is-invalid @enderror"
                                       name="order_code" autocomplete="off" value="{{ old('order_code')}}">
                                @error('order_code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('order_code') }}</strong>
                            </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                        <div class="text-danger" v-if="windowStatus.batch_input">
                            <div class="form-group row">
                                <label for="batch_number" class="col-2 col-form-label text-right">波次号</label>
                                <div class="col-8">
                                    <input type="text" id="input" class="form-control @error('batch_number') is-invalid @enderror"
                                           name="batch_number" autocomplete="off" value="{{ old('batch_number')}}">
                                    @error('batch_number')
                                    <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('batch_number') }}</strong>
                            </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    <div class="form-group row">
                        <label for="weight" class="col-2 col-form-label text-right">重量</label>
                        <div class="col-8">
                            <input type="text" id="input" class="form-control @error('weight') is-invalid @enderror"
                                   name="weight" autocomplete="off" value="{{ old('weight')}}">
                            @error('weight')
                            <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('weight') }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row" v-if="windowStatus.batch_input">
                        <label for="weight" class="col-2 col-form-label text-right">强行当作活动波次</label>
                        <div class="col-8">
                            <input type="checkbox" class="form-control-sm" name="is_same_pack_batch" v-model="inputting.is_same_pack_batch">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="paper_box_id" class="col-2 col-form-label text-right">纸箱</label>
                        <div class="col-8 form-inline">
                            <select name="paper_box_id" class="form-control @error('paper_box_id') is-invalid @enderror" v-model="paperBox_id" style="width: 30%;">
                                <option v-for="paperBox in paperBoxes" :value="paperBox.id">@{{paperBox.model}}</option>
                            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input class="form-control-sm" name="search" style="width: 150px" placeholder="搜索定位" @input="paperBox_seek">&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="button" @click="x" class="btn btn-success form-control" value="提交"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script>
        let vue=new Vue({
            el:"#package",
            data:{
                inputting:{is_same_pack_batch:false},
                paperBoxes:[
                        @foreach($paperBoxes as $paperBox)
                    {id:'{{$paperBox->id}}',model:'{{$paperBox->model}}'},
                    @endforeach
                ],
                paperBox_id:'',
                windowStatus:{logistic_input:'{{old('logistic_number')}}', batch_input:'{{old('batch_number')}}',order_input:'{{old('order_code')}}'}
            },
            mounted:function(){
                if (!this.windowStatus.logistic_input && !this.windowStatus.batch_input && !this.windowStatus.order_input){
                    this.windowStatus.batch_input=true;
                }
            },
            methods:{
                paperBox_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.paperBox_id='';
                    else
                        _this.paperBoxes.forEach(function (paperBox) {
                            if (paperBox.model.includes($val)){
                                _this.paperBox_id=paperBox.id;
                            }
                        });
                },
                windowSwitchLogistic:function (e) {
                    this.windowStatus.logistic_input=true;
                    this.windowStatus.batch_input=false;
                    this.inputting.is_same_pack_batch=false;
                    this.windowStatus.order_input=false;
                },
                windowSwitchBatch:function (e) {
                    this.windowStatus.logistic_input=false;
                    this.windowStatus.batch_input=true;
                    this.inputting.is_same_pack_batch=false;
                    this.windowStatus.order_input=false;
                },
                windowSwitchOrder:function (e) {
                    this.windowStatus.order_input=true;
                    this.windowStatus.logistic_input=false;
                    this.windowStatus.batch_input=false;
                    this.inputting.is_same_pack_batch=false;
                },
                x:function (e) {
                    if(this.inputting.is_same_pack_batch){
                        if(!confirm('当前波次将被强行当作活动波次处理，该操作会将波次内所有订单重量统一，请确定您的操作无误！')){
                            return false;
                        }
                    }
                    $(e.target).parents('form').submit();
                    return true;
                },

            },
        });
        $("#form").on("keydown","input",function(){
            let e = event || window.event;
            if(e && e.keyCode==13) {
                let inputs = $("#form #input");
                let idx = inputs.index(this);     // 获取当前焦点输入框所处的位置
                if (idx == inputs.length - 1) {       // 判断是否是最后一个输入框
                        $("#form").submit(); // 提交表单
                } else {
                    inputs[idx + 1].focus(); // 设置焦点
                    inputs[idx + 1].select(); // 选中文字
                }
            }
        });
    </script>
@endsection