<config>
{
    "navigationBarTitleText": "水费详情",
    "navigationBarBackgroundColor": "#5498FF",
    "navigationBarTextStyle": "white",
    "backgroundColorTop":'#5498FF',
    "backgroundColorBottom":'#FFFFFF',
     "usingComponents": {
        "van-dropdown-menu": "/vant/dropdown-menu/index",
        "van-dropdown-item": "/vant/dropdown-item/index"
    }
}
</config>
<template>
    <div class="box">
        <div class="top">
            <div class="title1">
                <div class="text1">剩余水量(吨)</div>
                <div class="text2">33.42</div>
                <div class="btn" @click="navigateTo('/pages/recharge')">充值</div>
            </div>
            <div class="title1 title3">
                <div class="text1">当前水表(吨)</div>
                <div class="text2 text3">33.42</div>
                <div class="btn btn2">刷新</div>
            </div>
            <div class="border"></div>
            <div class="title2">
                <div class="text1">
                    <div class="text2">设备厂商</div>
                    <div class="text3">设备厂商</div>
                </div>
                <div class="text1">
                    <div class="text2">水费价格</div>
                    <div class="text3">设备厂商</div>
                </div>
            </div>
            <div class="title2">
                <div class="text1">
                    <div class="text2">水表编号</div>
                    <div class="text3">设备厂商</div>
                </div>
                <div class="text1">
                    <div class="text2">水表状态</div>
                    <div class="text3">设备厂商</div>
                </div>
            </div>
        </div>
        <van-sticky :offset-top="0">
            <div class="time-box">
                <div class="name">充值记录</div>
                <van-dropdown-menu>
                    <van-dropdown-item @change="record" :value="time" :options="option1" />
                </van-dropdown-menu>
            </div>
        </van-sticky>
        <div class="list">
            <van-empty
                v-if="empty"
                image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wodeguanzhu.png"
                description="暂无收益记录哦"
            >
            </van-empty>

            <template>
                <div class="content" v-for="(item, index) in list" :key="index">
                    <div class="con1">
                        <!-- <img class="con-img" src="../native/icon_photo.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>
    </div>
</template>
<script>
export default {
    data() {
        return {
            empty: false,
            time: 0,
            list: [
                {
                    name: '夏秋雨',
                    payTime: '2020-10-19',
                    amount: 100
                }
            ],
            option1: [
                { text: '2021-05', value: 0 },
                { text: '2021-06', value: 1 },
                { text: '2021-07', value: 2 },
                { text: '2021-08', value: 3 },
                { text: '2021-09', value: 4 },
                { text: '2021-10', value: 5 },
                { text: '2021-11', value: 6 },
                { text: '2021-12', value: 7 }
            ]
        };
    }
};
</script>
<style lang="less" scoped>
.box {
    .time-box {
        .flex();
        justify-content: space-between;
        background-color: @bg;
        padding: 20px;
        .text {
            font-size: 12px;
            color: #646566;
            line-height: 17px;
            margin-left: 15px;
        }
        .name {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #000000;
            line-height: 25px;
        }
    }
    /deep/ .van-dropdown-menu {
        width: 110px;
        border-radius: 4px;
        overflow: hidden;

        .van-cell__value {
            &::after {
                content: '';
            }
            &::before {
                content: '';
            }
        }
    }
    .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-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;
            }
        }
    }
    .top {
        background: #5498ff;
        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;
                font-weight: bold;
                text-align: center;
                font-size: 14px;
                color: #5498ff;
                &.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>
