<template>
    <el-container>
        <el-main >
            <!--检索条件-->
            <el-row>
                <el-col :span="4">
                    <div>
                        <el-input v-model="vcarrier" placeholder="">
                            <template slot="prepend">航班号</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="block">
                        <el-date-picker
                                v-model="flighttime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="航班日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content">
                        <el-button type="primary" v-on:click="getFlightList">航班查询</el-button>
                    </div>
                </el-col>
            </el-row>
            <!--TableList-->
            <el-row>
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="flightno"
                                label="航班号"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="flightdate"
                                label="航班日期"
                               >
                        </el-table-column>
                        <el-table-column
                                prop="originstation"
                                label="始发站"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="destinationstation"
                                label="目的站"
                                >
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleEdit(scope.$index, scope.row)">原始舱单</el-button>
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleDelete(scope.$index, scope.row)">进港理货</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <!--分页模块-->
            <el-row style="float: right">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    import { selectFlightLists } from '../../api/mt1201'
    export default {
        data() {
            /*初始化值*/
            return {
                carrier:'',
                tableData: [],
                flighttime: undefined,
                currentPage:1,
                pageSize:10,
                total:0
            }
        },
        methods: {
            /*设置默认航班时间*/
            getdatatime(){
                this.flighttime=new Date();
            },
            /*分页方法*/
            handleSizeChange(val) {
                this.pageSize=val;
                this.getFlightList();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getFlightList();
            },
            /*查询列表请求*/
            getFlightList:function() {
                let params={currentPage:this.currentPage,pageSize:this.pageSize,flighttime:this.flighttime,carrier:this.carrier};
                this.listLoading = true;
                selectFlightLists(params).then(res=>{
                    let response=res.data.data;
                    console.log(response)
                    this.tableData=response.list;
                    this.total=response.total;
                this.listLoading = false;
                });
            },
            /*原始舱单跳转*/
            handleEdit(index, row) {
                this.$router.push({name:'原始舱单',params:{index,row}})
            },
            /*进港理货跳转*/
            handleDelete(index, row) {
                this.$router.push({name:'进港理货',params:{index,row}})
            }
        },
        computed:{
            vcarrier:{
                get:function () {
                    return this.carrier;
                },
                set:function (val) {
                    this.carrier=val.toUpperCase();
                }
            }
        },
        /*渲染方法*/
        mounted() {
            let that=this;
            that.getdatatime();
            that.getFlightList();
        },
    }
</script>

<style>
    .el-main{padding: 10px 0px 10px 0px;  }
    .el-col{margin-right: 10px;}
</style>