@extends('layouts.app')
@section('title')录入-容器@endsection

@section('content')
    <div class="container-fluid" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <div class="form-group">
                    <div class="form-group">
                        <label for="type">容器类型</label>
                        <select class="form-control" :class="errors.type ? 'is-invalid' : ''" id="type" v-model="submitData.type" required>
                            <option>托盘</option>
                            <option>周转箱</option>
                        </select>
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.type">
                            <strong>@{{ errors.type[0] }}</strong>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-group">
                        <label for="warehouse">所用仓库</label>
                        <select class="form-control" :class="errors.warehouseId ? 'is-invalid' : ''" id="warehouse" v-model="submitData.warehouseId" required>
                            <option v-for="(item,i) in  selectData.warehouses" :value="item.id"> @{{ item.name }}
                            </option>
                        </select>
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.warehouseId">
                            <strong>@{{ errors.warehouseId[0] }}</strong>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-group">
                        <label for="allowMixed">是否允许混放</label>
                        <select class="form-control" :class="errors.allowMixed ? 'is-invalid' : ''" id="allowMixed" v-model="submitData.allowMixed" required>
                            <option>允许</option>
                            <option>不允许</option>
                        </select>
                        <span class="invalid-feedback offset-3" role="alert" v-if="errors.allowMixed">
                            <strong>@{{ errors.allowMixed[0] }}</strong>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="volume">容积 (m³)</label>
                    <input type="number" class="form-control" :class="errors.volume ? 'is-invalid' : ''" id="volume" aria-describedby="volume"
                           v-model="submitData.volume" required>
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.volume">
                            <strong>@{{ errors.volume[0] }}</strong>
                        </span>
                </div>

                <div class="form-group">
                    <label for="loadWeight">载重 (kg)</label>
                    <input type="number" class="form-control" :class="errors.loadWeight ? 'is-invalid' : ''" id="loadWeight" aria-describedby="loadWeight"
                           v-model="submitData.loadWeight" required>
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.loadWeight">
                            <strong>@{{ errors.loadWeight[0] }}</strong>
                        </span>
                </div>

                <div class="form-group">
                    <label for="createAmount">生成数量</label>
                    <input type="number" :class="errors.createAmount ? 'is-invalid' : ''" class="form-control" id="createAmount" aria-describedby="createAmount"
                           v-model="submitData.createAmount" required>
                    <span class="invalid-feedback offset-3" role="alert" v-if="errors.createAmount">
                            <strong>@{{ errors.createAmount[0] }}</strong>
                        </span>
                </div>
                <button @click="submit()" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                submitData: {
                    type: null,
                    warehouseId: null,
                    allowMixed: null,
                    volume: null,
                    loadWeight: null,
                    createAmount: null,
                    userId: {!! $userId !!}
                },
                selectData: {
                    warehouses: {!! $warehouses !!}
                },
                errors:{},
            },
            created() {
            },
            mounted: function () {

            },
            methods: {
                check(){
                    let error = {};
                    if (!this.submitData.type)error.type = ["容器类型必选"];
                    if (!this.submitData.warehouseId)error.warehouseId = ["所用厂库必选必选"];
                    if (!this.submitData.allowMixed)error.allowMixed = ["是否混放必选"];
                    if (!this.submitData.volume)error.volume = ["容积必填"];
                    if (!this.submitData.loadWeight)error.loadWeight = ["载重必填"];
                    if (!this.submitData.createAmount)error.createAmount = ["生成数量必填"];
                    if (JSON.stringify(error)!=='{}'){this.errors = error;}
                },
                submit() {
                    this.errors={};//初始errors状态
                    this.check();
                    if(JSON.stringify(this.errors)!=='{}')return;
                    let url = this.getBaseUrl() + `/api/wms/containerManage/create`;
                    axios.post(url, this.submitData).then(res => {
                        if (res.data.code !== 200) {
                            let errors = "";
                            for (let i in res.data.data) {
                                errors += i + ': ' + res.data.data[i];
                            }
                            tempTip.show(errors);

                        } else {
                            tempTip.showSuccess('提交成功!');
                            this.submitData = {
                                type: null,
                                warehouseId: null,
                                allowMixed: null,
                                volume: null,
                                loadWeight: null,
                                createAmount: null,
                                userId: {!! $userId !!}
                            }
                        }
                    });
                },

                //根据环境获取不同的url
                getBaseUrl() {
                    let url = null;
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8112'
                    } else if (env === 'production') {
                        url = 'https://api.baoshi56.com'
                    }
                    return url;
                },
            },

        });
    </script>
@endsection