<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>
                <el-col :span="12">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm":label-position="labelPosition">
                        <el-form-item label="运单号" prop="awba">
                            <el-input v-model="ruleForm.awba"></el-input>
                        </el-form-item>
                        <el-form-item label="承运人" prop="carrier">
                            <el-input v-model="ruleForm.carrier"></el-input>
                        </el-form-item>
                        <el-form-item label="航班号" prop="flightno">
                            <el-input v-model="ruleForm.flightno"></el-input>
                        </el-form-item>
                        <el-form-item label="航班日期" required>
                            <el-col :span="24">
                                <el-form-item prop="flightdate">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="运抵件数" prop="turnpiece">
                            <el-input v-model="ruleForm.turnpiece"></el-input>
                        </el-form-item>
                        <el-form-item label="运抵重量" prop="turnweight">
                            <el-input v-model="ruleForm.turnweight"></el-input>
                        </el-form-item>
                        <el-form-item label="海关关区" prop="customcode">
                            <el-col :span="24">
                                <el-select v-model="ruleForm.customcode" placeholder="请选择海关关区" style="width:100%">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                               :value="item.value" ></el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="运抵到达" prop="turnunloading">
                            <el-col :span="24">
                                <el-select v-model="ruleForm.turnunloading" placeholder="请选择运抵到达地"  style="width:100%">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                               :value="item.value" ></el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="货物描述" prop="goodsname">
                            <el-input v-model="ruleForm.goodsname"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button type="primary" @click="back">返回</el-button>
                </el-col>
            </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>
    .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;
            }
            });
            },
            getDefaultData(){
                this.ruleForm=this.$route.params;
            },
            DialogVisible(){
                this.centerDialogVisible=false;
                this.$router.push({name:'运单分拨申报',params:{awba:this.ruleForm.awba}});
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        },
        mounted(){
            this.getDefaultData();
        }
    }
</script>