<template>
    <div class="app-content">
        <!--<div class="app-container">-->
        <div class="filter-container">
            <el-input v-model="listQuery.flightNo" clearable style="width: 270px;" class="filter-item"
                      placeholder="航班号"/>
            <el-date-picker v-model="listQuery.flightDate" clearable type="date" style="width: 270px;"
                            placeholder="航班日期"
                            class="filter-item" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </div>
        <el-table :data="flightData" stripe style="font-size: 14px" border>
            <el-table-column label="航班号" width="180px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.carrier }}{{ scope.row.flightNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航班日期" width="190px" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.flightDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="始发站" width="160px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.originstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="目的站" width="160px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.destinationstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="400px" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handlePre(scope.row)">预配舱单</el-button>
                    <el-button type="primary" size="mini" @click="handleArrive(scope.row)">出港运抵</el-button>
                    <el-button type="primary" size="mini" @click="handleLoading(scope.row)">装载舱单</el-button>
                    <el-button type="primary" size="mini" @click="handleTidy(scope.row)">出港理货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageSize" :limit.sync="listQuery.limitSize"
                    @pagination="getList"/>
    </div>

</template>
<script>
    import Pagination from '@/components/Pagination'
    import {getFlightListForParam} from '@/api/exitFlight'

    export default {
        name: "ExitFlight",
        components: {Pagination},
        inject: ['reload'],
        data() {
            return {
                total: 1,
                listQuery: {
                    pageSize: 1,
                    limitSize: 10,
                    flightNo: '',
                    flightDate: undefined
                },
                flightData: [],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            /*设置默认航班时间*/
            getdatatime() {
                this.listQuery.flightDate = new Date();
            },
            getList() {
                getFlightListForParam(this.listQuery).then(res => {
                    this.flightData = res.data.dataList
                    this.total = res.data.count
                })
            },
            handleSearch() {
                this.getList()
            },
            handleLoading(row) {
                row.messageType = 'MT4201'
                row.flightdate = row.flightDate
                row.flightno = row.flightNo
                this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
            },
            handleTidy(row) {
                row.messageType = 'MT5202'
                row.flightdate = row.flightDate
                row.flightno = row.flightNo
                this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
            },
            handleArrive(row) {
                row.messageType = 'MT3201'
                row.flightdate = row.flightDate
                row.flightno = row.flightNo
                this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
            },
            handlePre(row) {
                row.messageType = 'MT2201'
                row.flightdate = row.flightDate
                row.flightno = row.flightNo
                this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
            }
        },
        // 页面加载完毕后触发的事件
        mounted() {
            var vm = this;
            vm.getdatatime();
        }
    }

</script>
<style scoped>
    .app-content {
        margin-top: 20px;
    }
</style>