<config>
{
    "navigationBarTitleText": "电费详情",
    "navigationBarBackgroundColor": "#00ba64",
    "navigationBarTextStyle": "white",
    "backgroundColorTop":'#00ba64',
    "backgroundColorBottom":'#FFFFFF'
}
</config>
<template>
    <div class="box">
        <div class="top">
            <div class="title1">
                <div class="text1">剩余电量(度)</div>
                <div class="text2">{{ ammeterInfo.rest || 0 }}</div>
                <div class="btn" @click="navigateTo('/pages/recharge?type=AMMETER')">充值</div>
            </div>
            <div class="title1 title3">
                <div class="text1">当前度数(度)</div>
                <div class="text2 text3">{{ ammeterInfo.current || 0 }}</div>
                <div class="btn btn2">刷新</div>
            </div>
            <div class="border"></div>
            <div class="title2">
                <div class="text1">
                    <div class="text2">设备厂商</div>
                    <div class="text3">{{ ammeterInfo.typeDesc || '暂无' }}</div>
                </div>
                <div class="text1">
                    <div class="text2">电费价格</div>
                    <div class="text3">{{ ammeterInfo.price || 0 }}元/度</div>
                </div>
            </div>
            <div class="title2">
                <div class="text1">
                    <div class="text2">电表编号</div>
                    <div class="text3">{{ ammeterInfo.id || '暂无' }}</div>
                </div>
                <div class="text1">
                    <div class="text2">电表状态</div>
                    <div class="text3">{{ ammeterInfo.switchOn ? '通电' : '断电' }}</div>
                </div>
            </div>
        </div>
        <van-sticky :offset-top="0">
            <div class="box1">
                <div class="name">充值记录</div>
                <div class="time-box" @click="newShow = true">
                    <div class="text">{{ yearMonth ? yearMonth : '请选择时间' }}</div>
                </div>
            </div>
        </van-sticky>
        <div class="list">
            <van-empty v-if="empty" description="暂无收益记录哦"> </van-empty>

            <template v-if="!empty">
                <div class="content" v-for="(item, index) in list" :key="index">
                    <div class="con1">
                        <img class="con-img" src="../native/icon-shuifei@3x.png" alt="" />
                        <div>
                            <div class="text1">{{ item.name }}</div>
                            <div class="text2">{{ item.payTime }}</div>
                        </div>
                    </div>
                    <div class="money">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</div>
                </div>
            </template>
        </div>
        <van-popup :show="newShow" position="bottom" @close="newShow = false">
            <van-datetime-picker
                type="year-month"
                @cancel="newShow = false"
                :value="currentDate"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            empty: false,
            time: 0,
            newShow: false,
            yearMonth: '',
            list: [
                // {
                // name: '夏秋雨',
                // payTime: '2020-10-19',
                // amount: 100
                // }
            ],
            currentDate: new Date().getTime()
            // minDate: new Date().getTime()
        };
    },
    computed: {
        ...mapState(['roomInfo', 'ammeterInfo'])
    },
    mounted() {
        this.nowDate = new Date();
        let date = {
            year: this.nowDate.getFullYear(),
            month: this.nowDate.getMonth() + 1
        };
        let systemDate = date.year + '-' + date.month;
        this.yearMonth = systemDate;
        this.Info();
    },
    methods: {
        Info() {
            wx.showLoading({
                title: '加载中'
            });
            this.$http
                .get('/rechargeRecord/ammeter', {
                    roomId: this.roomInfo.roomId,
                    page: 0,
                    size: 1000,
                    yearMonth: this.yearMonth
                })
                .then(res => {
                    wx.hideLoading();
                    // console.log(res);
                    this.list = res.content;
                    this.empty = res.empty;
                })
                .catch(e => {
                    wx.hideLoading();
                    wx.showToast({
                        icon: 'none',
                        title: e.error
                    });
                });
        },
        timeFormat(date, fmt) {
            var o = {
                'M+': date.getMonth() + 1 //月份
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp('(' + k + ')').test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                    );
            return fmt;
        },
        // 时间确认按钮
        onConfirm(event) {
            this.currentDate = event.detail;
            var timeValue = this.timeFormat(new Date(event.detail), 'yyyy-MM');
            this.yearMonth = timeValue;
            this.Info();
            this.newShow = false;
        }
    }
};
</script>
<style lang="less" scoped>
.box {
    .box1 {
        height: 70px;
        background: #f5f7fa;
        line-height: 70px;
        justify-content: space-between;
        padding: 0 20px;
        .flex();
        .time-box {
            width: 70px;
            height: 32px;
            .flex();
            justify-content: center;
            background: #ffffff;
            border-radius: 4px;
            .text {
                font-size: 12px;
                color: #000000;
                line-height: 17px;
            }
        }
        .name {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            line-height: 25px;
        }
    }
    .list {
        .content {
            .flex();
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #f5f7fa;
            .con1 {
                .flex();
                .con-img {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                }
                .text1 {
                    font-size: 14px;
                    font-weight: normal;
                    color: #000000;
                    line-height: 20px;
                }
                .text2 {
                    font-size: 13px;
                    font-weight: normal;
                    color: #aaacad;
                    line-height: 18px;
                }
            }
            .money {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
                line-height: 24px;
            }
        }
    }
    .top {
        background: #00ba64;
        padding: 0px 20px;
        .title1 {
            .flex();
            padding: 20px 0;
            justify-content: space-between;
            &.title3 {
                padding: 10px 0 20px;
            }
            .text1 {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: normal;
                color: #f5f7fa;
                line-height: 20px;
            }
            .text2 {
                font-size: 32px;
                font-family: DIN-Bold, DIN;
                font-weight: bold;
                color: #ffffff;
                line-height: 40px;
                &.text3 {
                    color: rgba(255, 255, 255, 0.8);
                }
            }
            .btn {
                width: 72px;
                height: 26px;
                background: #ffffff;
                border-radius: 13px;
                line-height: 26px;
                text-align: center;
                font-weight: bold;
                font-size: 14px;
                color: #00ba64;
                &.btn2 {
                    background: rgba(255, 255, 255, 0.33);
                    border-radius: 13px;
                    border: 1px solid #ffffff;
                    color: #fff;
                }
            }
        }
        .border {
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }
        .title2 {
            .flex();
            justify-content: space-between;
            padding-right: 34px;
            padding-bottom: 15px;
            .text1 {
                .flex();
                .text2 {
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: rgba(255, 255, 255, 0.7);
                    line-height: 18px;
                    padding-right: 12px;
                }
                .text3 {
                    font-size: 13px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 18px;
                }
            }
        }
    }
}
</style>
