<template>
    <div class="app-content">
        <!--<div class="app-container">-->
        <div class="filter-container" style="margin-top: 50px">
            <el-input v-model="listQuery.flightNo" clearable style="width: 270px;margin-right: 10px" class="filter-item"
                      placeholder="航班号"/>
            <el-date-picker v-model="listQuery.flightDate" clearable type="date" style="width: 270px;margin-right: 50px"
                            placeholder="航班日期"
                            class="filter-item" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button type="warning" style="width:150px"  icon="el-icon-search"  @click="handleSearch">查&emsp;&emsp;询</el-button>
        </div>
        <el-table :data="flightData" v-loading="listLoading" stripe
                  style="border-radius: 10px 10px 0px 0px;line-height: 25px;" stripe
                  :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small" border>
            <el-table-column label="航班号" width="200px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.carrier }}{{ scope.row.flightno }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航班日期" width="250px" 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="200px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.originstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="目的站" width="200px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.destinationstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handlePre(scope.row)">预配舱单</el-button>
                    <el-button type="success" size="mini" @click="handleArrive(scope.row)">出港运抵</el-button>
                    <el-button type="warning" size="mini" @click="handleLoading(scope.row)">装载舱单</el-button>
                    <el-button type="danger" 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 {
                listLoading: false,
                total: 1,
                listQuery: {
                    pageSize: 1,
                    limitSize: 10,
                    flightNo: '',
                    flightDate: undefined
                },
                flightData: [],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            /*设置默认航班时间*/
            getdatatime() {
                this.listQuery.flightDate = new Date();
            },
            getList() {
                this.listLoading = true;
                getFlightListForParam(this.listQuery).then(res => {
                    this.flightData = res.data.data.list
                    this.total = res.data.data.total
                    this.listLoading = false;
                })
            },
            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>