<template>
    <el-container>
        <el-main>
            <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="4" >
                    <el-input placeholder="必填" v-model="flightno">
                        <template slot="prepend">航班号</template>
                    </el-input>
                </el-col>
                <el-col :span="4" style="margin-left: 20px">
                    <el-date-picker
                            v-model="flight.flightdate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="4" style="margin-left: 55px">
                    <el-select
                            :remote-method="remoteMethodAirport"
                            :loading="listLoading"
                            v-model="originstation"
                            allow-create
                            default-first-option
                            filterable
                            remote
                            placeholder="请选择起始站" clearable>
                        <el-option
                                v-for="item in airportCode"
                                :key="item.airportid"
                                :label="item.airportid"
                                :value="item.airportid">
                            <span style="float: left">{{ item.airportdescchn }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportid }}</span>
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" style="margin-left: 20px">
                    <el-select
                            :remote-method="remoteMethodAirport"
                            :loading="listLoading"
                            v-model="destinationstation"
                            allow-create
                            default-first-option
                            filterable
                            remote
                            placeholder="请选择目的站" clearable>
                        <el-option
                                v-for="item in airportCode"
                                :key="item.airportid"
                                :label="item.airportid"
                                :value="item.airportid">
                            <span style="float: left">{{ item.airportdescchn }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportid }}</span>
                        </el-option>
                    </el-select>
                </el-col>
<!--                <el-col :span="4" style="margin-left: 20px">-->
<!--                    <el-input placeholder="可为空" v-model="awba">-->
<!--                        <template slot="prepend">主单号</template>-->
<!--                    </el-input>-->
<!--                </el-col>-->
            </el-row>
            <el-row>
                <el-col :span="4" :offset="10">
                    <div class="grid-content">
                        <el-button type="primary" @click="nstep">下一步</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>


<script>
    import {Message} from "element-ui";
    import {getCountry, getAirportCode} from "@/api/country";

    export default {
        name: 'ExitFlightDesc',
        data() {
            return {
                flight: {
                    flightno: undefined,
                    flightdate: undefined,
                    originstation: undefined,
                    destinationstation: undefined,
                    awba: undefined,
                    messageType: undefined
                },
                btnStatus: true,
                listLoading: false,
                airportList: [],
                airportResultCode: [],
                airportCode: [],
            };
        },
        created() {
            if (this.$route.params.scopeRow !== undefined) {
                if (this.$route.params.scopeRow.carrier === undefined) {
                    this.flight.flightno = this.$route.params.scopeRow.flightno
                } else {
                    this.flight.flightno = this.$route.params.scopeRow.carrier + this.$route.params.scopeRow.flightno
                }
                this.flight.flightdate = this.$route.params.scopeRow.flightdate
                this.flight.originstation = this.$route.params.scopeRow.originstation
                this.flight.destinationstation = this.$route.params.scopeRow.destinationstation
                this.flight.messageType = this.$route.params.scopeRow.messageType
                if (this.$route.params.scopeRow.awba !== undefined && this.$route.params.scopeRow.awba != null) {
                    this.flight.awba = this.$route.params.scopeRow.awba.replace('-', '')
                }
            }
        },
        // mounted() {
        //     // 延迟加载，否则会出错
        //     setTimeout(() => {
        //         this.airportResultCode = this.airportCode.map(item =>{
        //             return {label: item.airportdescchn,value: item.airportid}
        //         })
        //     }, 6000)
        // },
        computed: {
            flightno: {
                get: function () {
                    return this.flight.flightno
                },
                set: function (val) {
                    this.flight.flightno = val.toUpperCase().trim()
                }
            },
            originstation: {
                get: function () {
                    return this.flight.originstation
                },
                set: function (val) {
                    this.flight.originstation = val.toUpperCase().trim()
                }
            },
            destinationstation: {
                get: function () {
                    return this.flight.destinationstation
                },
                set: function (val) {
                    this.flight.destinationstation = val.toUpperCase().trim()
                }
            },
            awba: {
                get: function () {
                    return this.flight.awba
                },
                set: function (val) {
                    this.flight.awba = val.trim()
                }
            }
        },
        methods: {
            nstep() {
                if (this.flight.flightno !== undefined && this.flight.flightno !== '' &&
                    this.flight.flightdate !== undefined && this.flight.flightdate !== '' &&
                    this.flight.destinationstation !== undefined && this.flight.destinationstation !== '' &&
                    this.flight.originstation !== undefined && this.flight.originstation !== '') {
                    if (this.flight.awba !== '' && this.flight.awba !== undefined) {
                        const manifest = this.flight.awba;
                        const reg = /^[0-9]{11}$/
                        if (!reg.test(manifest)) {
                            Message.error("主单号只支持数字并且最多11位")
                            return
                        }
                        const num = (manifest.substring(3, 10)) % 7
                        if (num !== eval(manifest.substring(10))) {
                            Message.error("主单号不符合模7校验")
                            return
                        }
                    } else {
                        this.flight.awba = undefined
                    }

                    if (this.flight.messageType === "MT5202") {
                        this.$router.push({name: '出港理货', params: {flightData: this.flight}});
                    }
                    if (this.flight.messageType === "MT4201") {
                        this.$router.push({name: '出港装载', params: {flightData: this.flight}});
                    }
                    if (this.flight.messageType === "MT3201") {
                        this.$router.push({name: '出港运抵', params: {flightData: this.flight}})
                    }
                    if (this.flight.messageType === "MT2201") {
                        this.$router.push({name: '出港预配舱单', params: {flightData: this.flight}})
                    }
                } else {
                    Message.warning("请将航班信息填写完整")
                }

            },
            remoteMethodAirport(query) {
                this.airportCode = []
                if (query !== '') {
                    this.listLoading = true
                    getAirportCode({airportid: query}).then(res => {
                        if(res !== null){
                            setTimeout(() => {
                                this.listLoading = false
                                this.airportCode = res.data.data
                            }, 200)
                        }
                    })
                } else {
                    this.airportCode = []
                }
            }
        }
    };
</script>
<style scoped>
    .el-container {
        text-align: center
    }

    .el-main {
        margin: 0 auto;
        height: 400px;
    }
    flight
    p {
        font-size: 25px;
        font-weight: bold;
    }
</style>