<template>
    <d2-container>
        <div class="d2-table-view-full">
            <div class="d2-table-view-header">
                <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
                    <el-form-item label="房间号">
                        <el-input v-model="filter.roomNo" placeholder="房间号" clearable />
                    </el-form-item>
                    <el-form-item label="房间名">
                        <el-input v-model="filter.roomName" placeholder="房间名" clearable />
                    </el-form-item>
                    <el-form-item label="剩余金额≥或≤">
                        <el-input v-model="filter.remainElectricity" placeholder="剩余电量≥或≤" clearable />
                    </el-form-item>
                    <el-form-item label="有效日期">
                        <el-date-picker
                                v-model="time"
                                type="datetimerange"
                                @change="dateChange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d2-table-view-content">
                <d2-crud
                        title="电控购电记录"
                        ref="d2Crud"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading">
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </d2-container>
</template>

<script>
    import {getPageList} from '../../../api/ele/buyrecord'
    import {tableOptions} from '../../../assets/options'
    export default {
        name: "electric-buyrecord",
        data(){
            return{
                tableOptions,
                loading:false,
                currentPage:1,
                operVisible:false,
                isEdit:false,
                staLoading:false,
                time:'',
                selection:[],
                pagination:{
                    total:0
                },
                filter:{
                    id:'',
                    buyDate:'',
                    remainElectricity:'',
                    roomNo:'',
                    roomName:'',
                    startTime:'',
                    endTime:'',
                    pageSize: 10,
                    pageNum:1,
                },
                columns:[
                    {
                      title:'房间号',
                      key:'roomNo',
                      minWidth:'50',
                      showOverflowTooltip:true
                    },
                    {
                        title:'房间名',
                        key:'roomName',
                        minWidth:'100',
                        showOverflowTooltip:true
                    },
                    {
                        title:'所属',
                        key:'building',
                        minWidth:'100',
                        showOverflowTooltip:true
                    },
                    {
                        title:'购电金额',
                        key:'buyElectricity',
                        minWidth:'80',
                        showOverflowTooltip:true
                    },
                    {
                        title:'剩余金额',
                        key:'remainElectricity',
                        minWidth:'80',
                        showOverflowTooltip:true
                    },
                    {
                        title:'购电日期',
                        key:'buyDate',
                        minWidth:'100',
                        showOverflowTooltip:true
                    },
                    {
                        title:'操作员',
                        key:'operatorName',
                        minWidth:'100',
                        showOverflowTooltip:true
                    },
                ],
                data:[],
                id:[],
                rules:{
                    //roomNo: [{validator:CheckroomNo, required: true, trigger: 'blur' }],
                    //buyElectricity:[{validator:CheckbuyElectricity, required: true, trigger: 'blur' }],
                },
            }
        },
        methods:{
            handleList(val){
                if(val){
                    this.filter.pageNum=1
                    this.currentPage=1
                }
                this.loading=true
                getPageList(this.filter).then(res=>{
                    this.loading=false
                    this.data = res.pageInfo.list
                    this.pagination.total = res.pageInfo.total
                }).catch(err=>{
                    this.loading = false
                })
            },

            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },

            dateChange(val){
                if(val == null){
                    this.filter.startTime=''
                    this.filter.endTime=''
                }else {
                    this.filter.startTime=val[0]
                    this.filter.endTime=val[1]
                }
            },
        },
        mounted () {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,51)
            this.handleList()
        }
    }
</script>

<style scoped>

</style>
