<template>
    <el-container>
        <el-main>
            <!--检索条件-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="24"><div class="grid-content"><p>请输入航班信息：</p></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content"><h1>Please Enter The Flight Information：</h1></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="5">
                        <el-form-item label="航班号" prop="flightno">
                            <el-input placeholder="" v-model="flightno" style="width:100%"></el-input>
                        </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="航班日期" required>
                        <el-col :span="24">
                            <el-form-item prop="flightdate">
                                <el-date-picker type="date" placeholder="选择日期" :clearable="false" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="始发站" prop="originstation">
                        <el-select v-model="originstation"
                                   filterable
                                   allow-create
                                   default-first-option
                                   remote
                                   :remote-method="remoteMethod"
                                   :loading="loading"
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.airportid"
                                    :label="item.airportid"
                                    :value="item.airportid">
                                <span style="float: left">{{ item.airportid }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="目的站" prop="destinationstation">
                        <el-select v-model="destinationstation" filterable
                                   allow-create
                                   default-first-option
                                   remote
                                   :remote-method="remoteMethod"
                                   :loading="loading" placeholder="请选择">
                            <el-option
                                    v-for="item in options2"
                                    :key="item.airportid"
                                    :label="item.airportid"
                                    :value="item.airportid">
                                <span style="float: left">{{ item.airportid }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" :offset="10">
                    <div class="grid-content">
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                    </div>
                </el-col>
            </el-row>
                </el-form>
        </el-main>
    </el-container>
</template>
<!--自定义CSS-->
<style scoped>
   .el-container{text-align: center}
    .el-main{margin:0 auto;height:400px;}
    p{font-size:25px;font-weight: bold;}
    .row-bg{padding:30px 0;}
   .el-form-item {margin-bottom: 0px;}
</style>

<script>
    import { selectAirport } from '../../api/mt1201'
    export default {
        data() {
            return {
                /*初始化值*/
                ruleForm: {
                    flightno:'',
                    flightdate:'',
                    originstation:'',
                    destinationstation:''
                },
                options: [],
                options2:[],
                airportid:'',
                loading: false,
                /*表单校验规则*/
                rules: {
                    flightno: [
                        {required: true, message: '请输入航班号', trigger: 'blur'},
                        {min: 3, max: 6, message: '输入不符合规范', trigger: 'blur'}
                    ],
                    originstation: [
                        {required: true, message: '请输入航班起始站', trigger: 'blur'},
                        {min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
                    ],
                    destinationstation: [
                        {required: true, message: '请输入目的站', trigger: 'blur'},
                        {min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
                    ],
                    flightdate: [
                        {  required: true, message: '请选择日期', trigger: 'blur' }
                    ]
                }
            };
        },
        methods:{
            remoteMethod:function(query) {
                this.options = [];
                this.options2=[];
                let param={airportid:query};
                this.loading = true;
                selectAirport(param).then(res=>{
                    if (res !== '') {
                        setTimeout(() => {
                            this.loading = false;
                            this.options=res.data.data;
                            this.options2=res.data.data;
                        }, 200);
                    } else {
                        this.options = [];
                        this.options2=[];
                    }
                    //this.options=res.data.data;
                    //this.options2=res.data.data;
                });
            },
            /*按钮点击请求方法*/
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$router.push({name:'进港原始舱单',params:{flightno:this.ruleForm.flightno,flightdate:this.dateConversion(this.ruleForm.flightdate),originstation:this.ruleForm.originstation,destinationstation:this.ruleForm.destinationstation}});
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            /*航班日期格式化方法*/
            dateConversion(value){
                var date = new Date(value);
                date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                return date;
            },
            /*加载默认参数*/
            getDefaultData(){
                if(this.$route.params.row!=null){
                    this.ruleForm.flightno=this.$route.params.row.flightno;
                    this.ruleForm.flightdate=this.$route.params.row.flightdate;
                    this.ruleForm.originstation=this.$route.params.row.originstation;
                    this.ruleForm.destinationstation=this.$route.params.row.destinationstation;
                }
            }
        },
        computed:{
            originstation:{
                get:function () {
                    return this.ruleForm.originstation;
                },
                set:function (val) {
                    this.ruleForm.originstation=val.toUpperCase();
                }
            },
            destinationstation:{
                get:function () {
                    return this.ruleForm.destinationstation;
                },
                set:function (val) {
                    this.ruleForm.destinationstation=val.toUpperCase();
                }
            },
            flightno:{
                get:function () {
                    return this.ruleForm.flightno;
                },
                set:function (val) {
                    this.ruleForm.flightno=val.toUpperCase();
                }
            }
        },
        /*渲染方法*/
        mounted(){
            this.getDefaultData();
            //this.getFlightList();
        },
    };
</script>