<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.billno" placeholder="主单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="filters.flightNo" placeholder="航班号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="filters.flightDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择航班日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getList()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd()">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table :data="expressDate"
                  style="width: 100%"
                  row-key="id"
                  border
                  v-loading="listLoading"
                  lazy
                  :load="load"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import {getExpressList} from '../../api/express/express'
    import {getList} from "../../api/security/security";
    export default {
        name: "express",
        data() {
            return {
                expressDate: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                multipleSelection: [],
                currentPage4: 1,
                filters:{
                    billno: '',
                    flightNo: '',
                    flightDate: '',
                },
                pageNum: 0,
                pageSize: 0,
                total: 0,
                listLoading: false,
            }
        },
        methods: {

            getList(){
                let para = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    billno: this.filters.billno,
                    flightNo: this.filters.flightNo,
                    flightDate: this.filters.flightDate,

                }
                this.listLoading = true;
                getExpressList(para).then((res) => {
                    this.total = res.data.data.total;
                    this.expressDate = res.data.data.list;
                    this.listLoading = false;
                }).catch((error) => {
                    this.listLoading = false;
                });
            },

            // 分单懒加载
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ])
                }, 1000)
            },
            // 多选单选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>

</style>