<template>
    <el-container style="height: 550px;overflow:auto;">
        <el-main style="background-color: #EAEAEA">
<!--            航班号查询-->
            <el-row style="height: 180px">
                <el-col :span="24">
                    <el-row>
                        <p style="font-size: 28px">航班号查询</p>
                    </el-row>
                    <el-row>
                        <!--工具条-->
                            <el-form :inline="true" :model="filters">
                                <el-form-item>
                                    <el-input v-model="filters.flightNo" ></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" v-on:click="getDomesticClearance()">查询</el-button>
                                </el-form-item>
                            </el-form>
                    </el-row>
                </el-col>
            </el-row>
<!--            条件查询-->
            <el-row style="">
                <el-col :span="24">
                    <el-row>
                        <p style="font-size: 28px">条件查询</p>
                    </el-row>
                    <el-row>
                        <el-tabs v-model="activeName" @tab-click="getDomesticClearance" style="width: 100%">
                            <el-tab-pane label="国内出港" name="first">
                                <div style=";margin-top: 15px">
                                    <el-time-picker
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                    style="width: 140px">
                                    </el-time-picker>
                                    <el-time-picker
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary">点击查询</el-button>
                                </div>
                                <el-row style="margin-top: 15px">
                                    <el-col :span="23">
                                        <el-table
                                                :data="listDate"
                                                tooltip-effect="dark"
                                                style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
                                                :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
                                            <el-table-column prop="fplt" label="计划离港">
                                            </el-table-column>
                                            <el-table-column label="航班号">
                                                <template slot-scope="scope">
                                                    {{scope.row.carrier}}{{scope.row.flightno}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="carrier" label="航空公司">
                                            </el-table-column>
                                            <el-table-column prop="apcd" label="目的地">
                                            </el-table-column>
                                            <el-table-column prop="frlt" label="预计/实际离港">
                                            </el-table-column>
                                            <el-table-column prop="" label="状态">
                                            </el-table-column>
                                            <el-table-column prop="btsc" label="航站楼">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="国际/地区出港" name="second">
                                <div style=";margin-top: 15px">
                                    <el-time-picker
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-time-picker
                                            arrow-control
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary">点击查询</el-button>
                                </div>
                                <el-row style="margin-top: 15px">
                                    <el-col :span="23">
                                        <el-table
                                                :data="listDate"
                                                style="width: 100%">
                                            <el-table-column prop="fplt" label="计划离港">
                                            </el-table-column>
                                            <el-table-column label="航班号">
                                                <template slot-scope="scope">
                                                    {{scope.row.carrier}}{{scope.row.flightno}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="carrier" label="航空公司">
                                            </el-table-column>
                                            <el-table-column prop="apcd" label="目的地">
                                            </el-table-column>
                                            <el-table-column prop="frlt" label="预计/实际离港">
                                            </el-table-column>
                                            <el-table-column prop="" label="状态">
                                            </el-table-column>
                                            <el-table-column prop="btsc" label="航站楼">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="国内进港" name="third">
                                <div style=";margin-top: 15px">
                                    <el-time-select
                                            v-model="filters.flightDate"
                                            :picker-options="{
                                                start: '00:00',
                                                step: '01:00',
                                                end: '23:00'
                                              }"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-select>
                                    <el-time-picker
                                            arrow-control
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary">点击查询</el-button>
                                </div>
                                <el-row style="margin-top: 15px">
                                    <el-col :span="23">
                                        <el-table
                                                :data="listDate"
                                                style="width: 100%">
                                            <el-table-column prop="fplt" label="计划离港">
                                            </el-table-column>
                                            <el-table-column label="航班号">
                                                <template slot-scope="scope">
                                                    {{scope.row.carrier}}{{scope.row.flightno}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="carrier" label="航空公司">
                                            </el-table-column>
                                            <el-table-column prop="apcd" label="目的地">
                                            </el-table-column>
                                            <el-table-column prop="frlt" label="预计/实际离港">
                                            </el-table-column>
                                            <el-table-column prop="" label="状态">
                                            </el-table-column>
                                            <el-table-column prop="btsc" label="航站楼">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="国际/地区进港" name="fourth">
                                <div style=";margin-top: 15px">
                                    <el-time-picker
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-time-picker
                                            arrow-control
                                            v-model="filters.flightDate"
                                            placeholder="任意时间点"
                                            style="width: 140px">
                                    </el-time-picker>
                                    <el-select v-model="filters.destination" placeholder="目的地" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="filters.carrier" placeholder="航空公司" style="width: 140px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary">点击查询</el-button>
                                </div>
                                <el-row style="margin-top: 15px">
                                    <el-col :span="23">
                                        <el-table
                                                :data="listDate"
                                                style="width: 100%">
                                            <el-table-column prop="fplt" label="计划离港">
                                            </el-table-column>
                                            <el-table-column label="航班号">
                                                <template slot-scope="scope">
                                                    {{scope.row.carrier}}{{scope.row.flightno}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="carrier" label="航空公司">
                                            </el-table-column>
                                            <el-table-column prop="apcd" label="目的地">
                                            </el-table-column>
                                            <el-table-column prop="frlt" label="预计/实际离港">
                                            </el-table-column>
                                            <el-table-column prop="" label="状态">
                                            </el-table-column>
                                            <el-table-column prop="btsc" label="航站楼">
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-row>
                    <el-row>
                        <div>
                            <el-pagination background layout="total, prev, pager, next" v-show="this.total>0" :total="total" :page.sync="this.pageSize" :limit.sync="this.pageSize"
                                           @pagination="getDomesticClearance()"/>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {portList, exportList, nternationaiiImportList, nternationaiiExportList} from '../../api/inquiry/inquiry'
    export default {
        data() {
            return {
                currentPage4: 4,
                activeName: 'first',
                filters: {
                    flightNo: '',
                    flightDate: '',
                    destination: '',
                    carrier: ''
                },
                options:[],
                listDate: [],
                total: 1,
                pageSize: 1,
                limitSize: 30,
            };
        },
        methods: {
            //获取列表集合
            getDomesticClearance(tab, event) {
                let label = tab.label;
                this.listLoading = true;
                if (label == '国内出港'){
                    exportList().then((res) =>{
                        this.total = res.data.total;
                        this.listDate = res.data.data.list;
                        this.listLoading = false;
                    }).catch((error) => {
                        this.listLoading = false;
                        if(null!= error.response && error.response!==undefined){
                            let status= error.response.status;
                            let msg = error.response.statusText;
                            alert(status+msg);
                        }else {
                            alert(error);
                        }

                    });
                }else if(label == '国际/地区出港'){
                    nternationaiiExportList().then((res) =>{
                        this.total = res.data.total;
                        this.listDate = res.data.data.list;
                        this.listLoading = false;
                    }).catch((error) => {
                        this.listLoading = false;
                        if(null!= error.response && error.response!==undefined){
                            let status= error.response.status;
                            let msg = error.response.statusText;
                            alert(status+msg);
                        }else {
                            alert(error);
                        }

                    });
                }else if(label == '国内进港'){
                    portList().then((res) =>{
                        this.total = res.data.total;
                        this.listDate = res.data.data.list;
                        this.listLoading = false;
                    }).catch((error) => {
                        this.listLoading = false;
                        if(null!= error.response && error.response!==undefined){
                            let status= error.response.status;
                            let msg = error.response.statusText;
                            alert(status+msg);
                        }else {
                            alert(error);
                        }

                    });
                }else if(label == '国际/地区进港'){
                    nternationaiiImportList().then((res) =>{
                        this.total = res.data.total;
                        this.listDate = res.data.data.list;
                        this.listLoading = false;
                    }).catch((error) => {
                        this.listLoading = false;
                        if(null!= error.response && error.response!==undefined){
                            let status= error.response.status;
                            let msg = error.response.statusText;
                            alert(status+msg);
                        }else {
                            alert(error);
                        }

                    });
                }
            }
        },
        mounted() {

        }

    }
</script>

<style scoped>
.input-with-select{
    width: 450px;
}
.el-row{
    margin-left: 10px;
    width: 98%;
    background-color: #FFFFFF;
}
</style>