<template>
    <el-container>
        <el-main >
            <!--检索条件-->
            <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                <el-col :span="6">
                    <template>
                        航班号
                    </template>
                        <el-input v-model="vcarrier" placeholder="航班号" style="width: 150px">
                        </el-input>
                </el-col>
                <el-col :span="6">
                    <template>
                        航班日期
                    </template>
                        <el-date-picker
                                v-model="flighttime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="航班日期"
                                :picker-options="dataPickerOptions"
                                style="width: 150px">
                        </el-date-picker>
                </el-col>
                <el-col :span="3">
                        <el-button type="primary" v-on:click="getFlightList">查询</el-button>
                </el-col>
            </el-row>
            <!--TableList-->
            <el-row>
                <template>
                    <el-table
                            v-loading="tableloading"
                            :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="success"
                                        @click="handleDelete(scope.$index, scope.row)">进港理货</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <!--分页模块-->
            <el-row style="float: right;margin-top: 20px">
                <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>
<style scoped>
    .el-input-group{
        display: table;
    }
</style>

<script>
    import { selectFlightLists } from '../../api/mt1201'
    import {mapActions, mapGetters} from 'vuex'
    import {loginedUserInfo} from "../../api/user";
    export default {
        name:'Orig',
        data() {
            /*初始化值*/
            return {
                carrier:'',
                tableData: [],
                flighttime: undefined,
                currentPage:1,
                pageSize:10,
                total:0,
                tableloading:true,
                departmentid:'',
                dataPickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            }
        },
        mounted() {
            this.getdatatime();
            this.getFlightList();
        },
        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,
                    departmentid:loginedUserInfo().companyInfo.departmentid
                };
                this.listLoading = true;
                selectFlightLists(params).then(res=>{
                    let response=res.data.data;
                    this.tableData=response.list;
                    this.tableloading=false;
                    this.total=response.total;
                }).catch(e=>{

                }).finally(()=>{
                    this.listLoading = false;
                });
            },
            /*原始舱单跳转*/
            handleEdit(index, row) {
                // row.waybillType = 'MT1201'
                this.$router.push(
                        {
                            path:'/enter',
                            query:row
                        }
                    )
            },
            /*进港理货跳转*/
            handleDelete(index, row) {
                // row.waybillType = 'MT5201'
                this.$router.push(
                    {
                    path:'entertall',
                    query:row
                }
                    )
            }
        },
        computed:{
            vcarrier:{
                get:function () {
                    return this.carrier;
                },
                set:function (val) {
                    this.carrier=val.toUpperCase();
                }
            },
            ...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
        },
        /*渲染方法*/
        activated() {
            let that=this;

        },
    }
</script>

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