<template>
    <el-container>
        <el-main>
            <el-row class="row-bg">
                <el-col :span="24"><div class="grid-content content co">分拨运抵管理</div></el-col>
            </el-row>
            <el-row class="row-bg">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm":label-position="labelPosition">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="" prop="awba">
                                    <el-input v-model="ruleForm.awba" style="width: 200px">
                                        <template slot="prepend">运&nbsp;单&nbsp;号</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="" prop="carrier">
                                    <el-input v-model="ruleForm.carrier" style="width: 160px"  onkeyup="this.value=this.value.toUpperCase()">
                                        <template slot="prepend">承&nbsp;运&nbsp;人</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="" prop="flightno">
                                    <el-input v-model="ruleForm.flightno" style="width: 160px">
                                        <template slot="prepend">航&nbsp;班&nbsp;号</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" required>
                                    <el-form-item prop="flightdate">
                                        <div class="ip">
                                            航班日期
                                        </div>
                                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 125px;"></el-date-picker>
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" prop="customcode">
                                    <div class="ip">
                                        海关关区
                                    </div>
                                    <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:125px">
                                        <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                                   :value="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5" style="margin-top: -20px">
                                <el-form-item label="" prop="turnpiece">
                                    <el-input v-model="ruleForm.turnpiece" style="width: 160px">
                                        <template slot="prepend">运抵件数</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" style="margin-top: -20px">
                                <el-form-item label="" prop="turnweight">
                                    <el-input v-model="ruleForm.turnweight" style="width: 160px">
                                        <template slot="prepend">运抵重量</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="7" style="margin-top: -20px">
                                <el-form-item label="" prop="turnunloading">
                                    <div class="ip">
                                        运抵到达
                                    </div>
                                    <el-select v-model="ruleForm.turnunloading" placeholder="请选择运抵到达地"  style="width:125px">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                   :value="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7" style="margin-top: -20px">
                                <el-form-item label="" prop="goodsname">
                                    <el-input v-model="ruleForm.goodsname" style="width: 200px">
                                        <template slot="prepend">货物描述</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" :offset="10" style="margin-bottom: 10px">
                                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                                <el-button  @click="back">返回</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
            </el-row>
            <!--对话提示框-->
            <el-row>
                <el-dialog
                        title="系统提示"
                        :visible.sync="centerDialogVisible"
                        width="30%"
                        center>
                    <span>{{msg}}</span>
                      <span slot="footer" class="dialog-footer">
                          <el-button @click="DialogVisible">取 消</el-button>
                        <el-button type="primary" @click="DialogVisible">确 定</el-button>
                      </span>
                </el-dialog>
            </el-row>
        </el-main>
    </el-container>
</template>
<style scoped>
    .ip{
        max-width: 100px;
        margin-right: -5px;
        display: inline-block;
        background-color: #6F8294;
        color: #ffffff;
        border: 1px solid #DCDFE6;
        vertical-align: middle;
        padding: 0 18px;
        white-space: nowrap;
        border-top-right-radius: 0px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 0px;
        font-size: 10px;
    }
    .co{height: 36px;line-height: 36px;}
    .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
    .row-bg{background-color: white;padding:0px;}
</style>
<script>
    import { addAllocatArrive } from '../../api/Allocat'
    export default {
        data(){
            return{
                ruleForm: {
                    awba: '',
                    carrier: '',
                    flightno: '',
                    flightdate:'',
                    turnpiece:'',
                    turnweight:'',
                    customcode:'',
                    turnunloading:'',
                    goodsname:'',
                    status:'22'
                },
                rules: {
                    awba: [
                        { required: true, message: '请输入运单号', trigger: 'blur' },
                    ],
                    carrier: [
                        { required: true, message: '请输入承运人', trigger: 'blur' }
                    ],
                    flightno: [
                        { required: true, message: '请输入航班号', trigger: 'blur' }
                    ],
                    goodsname: [
                        { required: true, message: '请输入货物描述', trigger: 'blur' }
                    ],
                    turnpiece: [
                        { required: true, message: '请输入分拨件数', trigger: 'blur' }
                    ],
                    turnweight: [
                        { required: true, message: '请输入分拨重量', trigger: 'blur' }
                    ],
                    flightdate: [
                        {required: true, message: '航班日期必须选择', trigger: 'change'}
                    ],
                    customcode: [
                        { required: true, message: '请选择海关关区', trigger: 'change' }
                    ],
                    turnunloading: [
                        { required: true, message: '请选择分拨到达地', trigger: 'change' }
                    ]
                },
                options2: [
                    {
                        value: '4604',
                        label: '4604'
                    }, {
                        value: '4620',
                        label: '4620'
                    }, {
                        value: '4613',
                        label: '4613'
                    }],
                options: [
                    {
                        value: 'CNZGZ460044/4620',
                        label: 'CNZGZ460044/4620'
                    }, {
                        value: 'CNCGO460011/4604',
                        label: 'CNCGO460011/4604'
                    }, {
                        value: 'CNCGO460011/4613',
                        label: 'CNCGO460011/4613'
                    }],
                labelPosition:'left',
                centerDialogVisible:false,
                msg:'',
                code:''
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addAllocatArrive(this.ruleForm).then(res=>{
                            let response=res.data;
                        //console.log(res);
                        this.code=response.code;
                        if(this.code=='200'){
                            this.centerDialogVisible=true;
                            this.msg=response.msg;
                        }else{
                            this.centerDialogVisible=true;
                            this.msg=response.msg;
                        }
                    });
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            // 过滤中英文
            inputMe(e){
                return e.replace(/[^a-zA-Z0-9.-]/g,'').toUpperCase();
            },
            getDefaultData(){
                this.ruleForm=this.$route.params;
            },
            DialogVisible(){
                this.centerDialogVisible=false;
                this.$router.push({name:'运单分拨申报',params:{awba:this.ruleForm.awba}});
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        },
        activated(){
            this.getDefaultData();
        }
    }
</script>