<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="拖车号" prop="pno">
                                    <el-input v-model="ruleForm.pno"></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="ext2">
                                    <el-input v-model="ruleForm.ext2"></el-input>
                                </el-form-item>
                                <el-form-item label="车辆所发属" prop="ext1">
                                    <el-input v-model="ruleForm.ext1"></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="submitSend('ruleForm')">保存发送</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 { addAllocatImport } from '../../api/Allocat'
    export default {
        data(){
            return{
                ruleForm: {
                    awba: '',
                    carrier: '',
                    flightno: '',
                    flightdate:'',
                    turnpiece:'',
                    turnweight:'',
                    customcode:'',
                    turnunloading:'',
                    pno:'',
                    ext2:'',
                    ext1:''
                },
                rules: {
                    awba: [
                        { required: true, message: '请输入运单号', trigger: 'blur' },
                    ],
                    carrier: [
                        { required: true, message: '请输入承运人', trigger: 'blur' }
                    ],
                    flightno: [
                        { 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' }
                    ],
                    ext2: [
                        { required: true, message: '请输入卸货地', trigger: 'change' }
                    ],
                    ext1: [
                        { 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) {
                        addAllocatImport(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}});
            }
        },
        mounted(){
            this.getDefaultData();
        }
    }
</script>