<config>
{
    "navigationBarTitleText": "历史记录",
    "navigationBarBackgroundColor": "#00BA64",
    "navigationBarTextStyle": "white",
    "backgroundColorBottom":'#FFFFFF'
}
</config>
<template>
    <div class="list">
        <!-- <van-sticky :offset-top="0">
            <div class="box">
                <div class="time-box" @click="newShow = true">
                    <div class="text">{{ yearMonth ? yearMonth : '请选择时间' }}</div>
                </div>
            </div>
        </van-sticky> -->
        <template v-if="!empty">
            <div class="content">
                <div class="con1">
                    <img class="con-img" src="../native/icon-shuifei@3x.png" alt="" />
                    <div>
                        <div class="text1">电费</div>
                        <div class="text2">剩余电量{{ ammeterInfo.rest }}度</div>
                    </div>
                </div>
                <div class="money">{{ ammeterInfo.amount > 0 ? '+' : '' }}{{ ammeterInfo.amount }}</div>
            </div>
            <van-empty
                v-if="empty"
                image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wodeguanzhu.png"
                description="暂无记录哦"
            >
            </van-empty>
        </template>
        <van-popup :show="newShow" position="bottom" @close="newShow = false">
            <van-datetime-picker
                type="year-month"
                @cancel="newShow = false"
                :value="currentDate"
                :min-date="minDate"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Wallet',
    data() {
        return {
            newShow: false,
            yearMonth: '',
            nowDate: '',
            list: [],
            currentDate: new Date().getTime(),
            // minDate: new Date().getTime(),
            empty: false
        };
    },
    computed: {
        ...mapState(['roomInfo', 'ammeterInfo'])
    },
    // created() {
    //     console.log(this.roomInfo, this.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;
    },
    methods: {
        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.newShow = false;
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    .flex();
    padding: 22px 40px;
    background-color: @prim;
    .left {
        flex-grow: 1;

        .text1 {
            font-size: 14px;
            font-weight: 400;
            color: #f5f7fa;
            line-height: 20px;
        }

        .text2 {
            font-size: 36px;
            font-family: OSP;
            color: #ffffff;
            line-height: 40px;
        }
    }

    ._van-button {
        align-self: flex-end;
    }
}
.content {
    // width: 100%;
    .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-family: PingFangSC-Regular, PingFang SC;
            font-weight: normal;
            color: #000000;
            line-height: 20px;
        }
        .text2 {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: normal;
            color: #aaacad;
            line-height: 18px;
        }
    }
    .money {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }
}
.box {
    height: 70px;
    background: #f5f7fa;
    line-height: 70px;
    .flex();
    .time-box {
        width: 70px;
        height: 32px;
        .flex();
        justify-content: center;
        background: #ffffff;
        border-radius: 4px;
        margin-left: 20px;
        .text {
            font-size: 12px;
            color: #000000;
            line-height: 17px;
        }
    }
}
</style>
