<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-input v-model="filter.usedElectricity" placeholder="使用电量≥或≤" clearable />
                    </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">
                <div class="d2-table-view-handle">
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus" >新增</el-button>
                    <el-button size="small" @click="onMutilDelClick">批量删除</el-button>
                    <el-button size="small"  @click="onMutilBuyClick">批量购电</el-button>
                </div>
                <d2-crud
                        title="电控信息"
                        ref="d2Crud"
                        :columns="columns"
                        :data="data"
                        :options="tableOptions"
                        :loading="loading"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowDelete"
                        @buy="handleBuy"
                        selection-row
                        @selection-change="handleSelectionChange">
                </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>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="22%"
                :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="70px" labelPosition="right" :rules="rules">
                <el-form-item label="房间号" prop="roomNo">
                    <el-input v-model="form.roomNo" placeholder="请输入房间号"></el-input>
                </el-form-item>
                <el-form-item label="房间名" prop="roomName">
                    <el-input v-model="form.roomName" placeholder="请输入房间名"></el-input>
                </el-form-item>
                <el-form-item label="所  属" prop="building">
                    <el-input v-model="form.building" placeholder="所属"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEle('form')"/>
     		</span>
        </el-dialog>
        <el-dialog
                :title="diaLogName2"
                :visible.sync="operVisible2"
                @close="clearForm2"
                width="28%"
                :close-on-click-modal="false">
            <el-form ref="form2" :model="form2" label-width="80px" labelPosition="right" :rules="rule">
                <el-form-item label="房间号" prop="roomNo">
                    <el-input v-model="form2.roomNo" placeholder="请输入房间号" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="购电金额" prop="buyElectricity">
                    <el-input v-model="form2.buyElectricity" placeholder="请输入购电金额" style="width: 180px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
     		    <zl-button :loading="staLoading" @click="operInstanceEle2('form2')"/>
     		</span>
        </el-dialog>
    </d2-container>
</template>

<script>
    import {getPageList,saveOrUpdataList,deleteList,getrecordList,saveList} from '../../../api/ele/eleinfo'
    import {tableOptions} from '../../../assets/options'
    export default {
        name: "electric-eleinfo",
        data(){
            let CheckroomNo = (rule, value, callback) => {
                let reg=/^\d{1,6}$/;
                if (!reg.test(value)) {
                    return callback(new Error("房间号由1-6位的数字组成"));
                } else {
                    callback();
                }
            };
            let CheckbuyElectricity = (rule, value, callback) => {
                let reg=/^\d+(\.\d+)?$/;
                if (!reg.test(value)) {
                    return callback(new Error("金额只能为正数"));
                } else {
                    callback();
                }
            };
            return{
                func:{
                    add:false,
                    delete:false,
                    update:false,
                    select:false,
                },
                filter:{
                    id:'',
                    roomNo:'',
                    roomName:'',
                    pageSize: 10,
                    pageNum:1,
                    usedElectricity:'',
                    remainElectricity:''
                },
                currentPage:1,
                pagination:{ //分页参数
                    total: 0
                },
                filterText:'',
                falg:true,
                isExpend:true,
                tableOptions,
                operVisible2:false,
                loading:false,
                operVisible:false,
                selection:[],
                isEdit:false,
                diaLogName:'新增',
                diaLogName2:'购电',
                staLoading:false,
                columns:[
                    {
                        title:'房间号',
                        key:'roomNo',
                        minWidth:'50',

                    },
                    {
                        title:'房间名',
                        key:'roomName',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'所属',
                        key:'building',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'使用电量(金额)',
                        key:'usedElectricity',
                        minWidth:'100',
                        showOverflowTooltip: true
                    },
                    {
                        title:'剩余电量(金额)',
                        key:'remainElectricity',
                        minWidth:'100',
                        showOverflowTooltip: true
                    }
                ],
                rowHandle:{
                    columnHeader:'操作',
                    minWidth:'150',
                    align:'center',
                    custom:[
                        {
                            text:'编辑',
                            type:'primary',
                            size:'small',
                            emit:'edit'
                        },
                        {
                            text:'删除',
                            type:'danger',
                            size:'small',
                            emit:'delete'
                        },
                        {
                            text: '购电',
                            type: 'primary',
                            size: 'small',
                            emit: 'buy'
                        }
                    ]
                },
                data:[],
                id:[],
                roomNo:[],
                form:{
                    id:'',
                    roomNo:'',
                    roomName:'',
                    building:'',
                    usedElectricity:'',
                    remainElectricity:''
                },
                form2:{
                    id:'',
                    roomNo:'',
                    buyElectricity:''
                },
                rules:{
                    roomNo: [{validator:CheckroomNo, required: true, trigger: 'blur' }],
                    roomName:[{ required: true, message: '请输入房间名称', trigger: 'blur' }],
                    building:[{ required: true, message: '请输入房间所属', trigger: 'blur' }],
                },
                rule:{
                    buyElectricity:[{validator:CheckbuyElectricity, required: true, trigger: 'blur' }],
                }
            }
        },
        methods:{
            handleRowEdit({index, row}){
                this.isEdit=true
                this.diaLogName='编辑'
                let id=row.id
                getrecordList({id}).then(res=>{
                    this.form=res.searchElectricInfo[0]
                    console.log(this.form)
                    this.operVisible = true
                })
            },
            handleRowDelete({index, row}){
                this.delete(row.id)
            },
            handleSelectionChange(selection){
                this.selection=selection
            },
            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
                })
            },
            onMutilDelClick(){
                if(!this.selection.length){
                    this.$message({
                        message: '请选择记录',
                        type: 'success'
                    })
                }
                this.selection.forEach((item,index)=>{
                    this.id.push(item.id)
                })
                this.id=this.id.join(",")
                this.delete(this.id)
            },
            delete(id){
                this.$confirm(`确定要删除吗?`, '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '放弃',
                    type: 'warning'
                }).then(() => {
                    deleteList({id}).then(res=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.handleList()
                    })
                })
            },
            clearForm(){
                this.form={
                    roomNo:'',
                    roomName:'',
                    building:'',
                }
                this.isEdit = false
                this.diaLogName = '新增'
            },
            operInstanceEle(form){
                this.$refs[form].validate((valid)=>{
                    if (valid){
                        this.staLoading=true
                        saveOrUpdataList(this.form).then(res=>{
                            this.staLoading=false
                            this.operVisible=false
                            this.$message({
                                message: this.form.id ? '编辑成功':'新增成功',
                                type: 'success'
                            })
                            this.handleList()
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
            handleCurrentChange(val){
                this.filter.pageNum = val
                this.handleList()
            },
            handleSizeChange(val){
                this.filter.pageNum = 1
                this.filter.pageSize = val
                this.handleList()
            },
            handleBuy({index,row}){
                this.isEdit=true
                this.diaLogName2='购电'
                let id=row.id
                this.form2.id=row.id
                getrecordList({id}).then(res=>{
                    this.roomNo=[]
                    res.searchElectricInfo.forEach((item,index)=>{
                        this.roomNo.push(item.roomNo)
                    })
                    this.form2.roomNo=this.roomNo.join(",")
                    this.operVisible2 = true
                })
            },
            operInstanceEle2(form2){
                this.$refs[form2].validate((valid)=>{
                    if(valid){
                        this.staLoading=true
                        saveList(this.form2).then(res=>{
                            this.staLoading=false
                            this.operVisible2=false
                            this.$message({
                                message:'购电成功',
                                type:'success'
                            })
                            this.handleList()
                        }).catch(err=>{
                            this.staLoading=false
                        })
                    }
                })
            },
            onMutilBuyClick(){
                if(!this.selection.length){
                    this.$message({
                        message:'请选择记录',
                        type:'success'
                    })
                }
                this.selection.forEach((item,index)=>{
                    this.id.push(item.id)
                })
                this.id=this.id.join(",")
                let id=this.id
                this.form2.id=this.id
                getrecordList({id}).then(res=>{
                    this.roomNo=[]
                    res.searchElectricInfo.forEach((item,index)=>{
                        this.roomNo.push(item.roomNo)
                    })
                    this.form2.roomNo=this.roomNo.join(",")
                    this.operVisible2 = true
                })
                //this.operVisible2=true
            },
            clearForm2(){
                this.form2={
                    roomNo:'',
                    buyElectricity:'',
                }
                this.isEdit = false
            },
        },
        mounted () {
            this.filter.pageSize = this.tableOptions.pageList[0]
            this.tableOptions = this.$calcTableHeight(tableOptions,51)
            this.handleList()
        }
    }
</script>

<style scoped>
    .el-input{
        width: 160px;
        height: 30px;
    }
</style>
