<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.ardname" placeholder="房间号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="QueryOrder()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table
                v-loading="listLoading"
                :data="list"
                stripe
                style="width: 100%">
            <el-table-column prop="wmId" label="水表编号">
            </el-table-column>

            <el-table-column prop="ardname" label="房间号">
            </el-table-column>

            <el-table-column prop="unitPrice" label="单价">
            </el-table-column>

            <el-table-column prop="wmSacc" label="累计充值量">
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange"
                           :page-size="this.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>
<script>
    import {getOrder} from '../../api/empt/waterMeterSacc';
    import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";

    export default {
        components: {ElButton},
        data() {
            return {
                filters: {
                    ardname: ''
                },
                total: 0,
                pageNum: 1,
                pageSize: 30,
                listLoading: false,
                list: []
            }
        },
        mounted() {
            this.QueryOrder();
        },
        methods: {

            handleCurrentChange(val) {
                this.pageNum = val;
                this.QueryOrder();
            },
            QueryOrder() {

                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    ardname: this.filters.ardname,

                };
                this.listLoading = true;
                getOrder(params).then(res => {
                    let resData = res.data;
                    this.total = resData.total;
                    this.list = resData.list;
                    this.listLoading = false;
                }).catch((error) => {
                    if (null != error.response && error.response !== undefined) {
                        let status = error.response.status;
                        let msg = error.response.statusText;
                        this.listLoading = false;
                        alert(status + msg);
                    } else {
                        this.listLoading = false;
                        alert(error);
                    }
                })
            },
        }
    }
</script>