<config>
{
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white",
    "backgroundColorTop":'#00ba64',
    "backgroundColorBottom":'#f5f7fa',
}
</config>
<template>
    <div class="app">
        <div class="top-img">
            <img class="top-bg" mode="widthFix" src="../native/bg-2.png" alt="" />
            <div class="text">
                <div class="title">
                    <img src="../native/shop.png" alt="" />
                    <span>{{ list.storeName || '暂无门店' }}</span>
                </div>
                <div class="info">{{ list.roomName + '室' }}</div>
            </div>
        </div>
        <div class="continer">
            <div class="background">
                <div class="money">
                    <div class="text1">
                        <img src="../native/yucun.png" alt="" />
                        <span>总预存金额</span>
                    </div>
                    <div class="money1">
                        <div class="text1">¥</div>
                        <div class="money2">{{ list.balance || 0 }}</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1" @click="navigateTo('/pages/walletdetails?type=ROOM')">提现</div>
                    <div class="btn2" @click="navigateTo('/pages/recharge?type=ROOM')">充值</div>
                </div>
            </div>

            <div class="content">
                <div class="content-title">
                    <img src="../native/room.png" alt="" />
                    <span>房间信息</span>
                </div>
                <div class="content-info">
                    <img src="../native/box1.png" alt="" />
                    <span class="text1">入住时间</span>
                    <span class="text2">{{ list.checkinTime }}</span>
                </div>
                <div class="content-info">
                    <img src="../native/box2.png" alt="" />
                    <span class="text1">退房时间</span>
                    <span class="text2">{{ list.planOutTime }}</span>
                </div>
                <div class="content-info">
                    <img src="../native/box3.png" alt="" />
                    <span class="text1">房间类型</span>
                    <span class="text2">{{ list.roomType || '-' }}</span>
                </div>
                <div class="content-info">
                    <img src="../native/box4.png" alt="" />
                    <span class="text1">已入住</span>
                    <span class="text2">{{ list.checkinNumber ? list.checkinNumber + '人' : '-' }}</span>
                </div>
                <div class="content-info">
                    <img src="../native/box5.png" alt="" />
                    <span class="text1">{{ rateType }}</span>
                    <span class="text2">{{ rate }}</span>
                </div>
                <div class="content-info" v-if="list.checkInType !== 'INDIVIDUAL'">
                    <img src="../native/box3.png" alt="" />
                    <span class="text1">团队名称</span>
                    <span class="text2">{{ teamName }}</span>
                </div>
            </div>

            <div class="content1" v-if="list">
                <div class="con-box" @click="navigateTo('/pages/wallet')">
                    <div class="title1">
                        <img src="../native/zhangdan.png" alt="" />
                        <span>房间账单</span>
                    </div>
                    <div class="right">
                        <div class="text1">历史记录</div>
                        <img class="img-r" src="../native/inter.png" alt="" />
                    </div>
                </div>
                <div class="text">*每月账单费用会自动从总预存余额中扣除，当显示为负数时即为欠费，请及时充值缴纳</div>
                <!-- <div class="box" @click="navigateTo('/pages/waterDetails')">
                <div class="box1">
                    <img class="img" src="../static/imgs/icon-shuifei@3x.png" alt="" />
                    <div>
                        <div class="text1">水费</div>
                        <div class="text2">剩余水量：5.6吨</div>
                    </div>
                </div>
                <div class="btn">已缴费</div>
            </div>
            <div class="bor"></div> -->
                <div class="box" @click="navigateTo('/pages/electricDetails')">
                    <div class="box1">
                        <img class="img" src="../native/dianfei.png" alt="" />
                        <div>
                            <div class="text2">电费 (充后电量：{{ ammeterInfo.rest }}度)</div>
                        </div>
                    </div>
                    <div class="btn2"><span>去缴费</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            list: {}
        };
    },
    computed: {
        ...mapState(['roomInfo', 'ammeterInfo']),
        rateType() {
            if (this.list && this.list.monthRate) {
                return '月租';
            }
            return '日租';
        },
        rate() {
            if (this.list) {
                return this.list.monthRate || this.list.dayRate;
            }
            return '-';
        },
        teamName() {
            if (this.roomInfo && this.roomInfo.coFullName) {
                let teamName = this.roomInfo.coSimpleName || this.roomInfo.coFullName;
                if (teamName.length > 8) {
                    teamName = teamName.subStr(0, 4) + '…' + teamName.subStr(teamName.length - 4);
                }
                return teamName;
            }
            return '';
        }
    },
    // mounted() {},
    onShow() {
        this.$store.dispatch('updateUserInfo');
        this.$http.get('/api/mp/getRoomInfo').then(res => {
            this.list = res;
            if (this.list.checkInType === 'INDIVIDUAL') {
                wx.setTabBarItem({
                    index: 0,
                    text: '个人房间',
                    iconPath: 'native/tabbar/tabbar_icon_01@3x (1).png',
                    selectedIconPath: 'native/tabbar/tabbar_icon_01@3x.png'
                });
            } else {
                wx.setTabBarItem({
                    index: 0,
                    text: '团队房间',
                    iconPath: 'native/tabbar/tabbar_icon_01@3x (1).png',
                    selectedIconPath: 'native/tabbar/tabbar_icon_01@3x.png'
                });
            }
            this.$store.dispatch('updateRoomInfo');
        });
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.app {
    background: #f5f7fa !important;
    // padding-bottom: 200px;
    padding-bottom: 50px;
    min-height: 100vh;
    .top-img {
        width: 100%;
        border-radius: 2px;
        position: sticky;
        top: 0;
        .top-bg {
            width: 100%;
            display: block;
        }
        .text {
            position: absolute;
            top: 56px;
            left: 0;
        }
        .title {
            padding-left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 34px;
            display: flex;
            align-items: center;
            img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }
        .info {
            min-width: 100px;
            color: #ffffff;
            text-align: center;
            font-size: 13px;
            line-height: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 8px;
            margin: 20px 0 10px 50px;
            padding: 0 10px;
            display: inline-block;
        }
    }
    .background {
        position: relative;
        height: 129px;
        background: linear-gradient(98deg, #ffe9bb 0%, #efcb8d 100%);
        border-radius: 20px;
        margin: 0 30px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .money {
            display: flex;
            justify-content: space-between;
            .text1 {
                font-size: 13px;
                color: #512b18;
                line-height: 18px;
                display: flex;
                img {
                    width: 22px;
                    height: 18px;
                    margin-right: 4px;
                }
            }
            .money1 {
                display: flex;
                align-items: center;
                .text1 {
                    font-size: 16px;
                    margin-top: 5px;
                    margin-right: 3px;
                }
                .money2 {
                    font-size: 26px;
                    font-weight: bold;
                    color: #522c17;
                    line-height: 22px;
                }
            }
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            .btn1 {
                width: 110px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                color: #522c17;
                border-radius: 35px;
                border: 1px solid #512b18;
            }
            .btn2 {
                width: 110px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 14px;
                background: #512b18;
                border-radius: 35px;
                color: #f9dda9;
                margin-left: 27px;
            }
        }
    }
    .content {
        padding: 20px 19px;
        background: #ffffff;
        .box {
            display: flex;
            align-items: center;
            .con-img {
                width: 38px;
                height: 38px;
                &.con-img2 {
                    margin-left: 44px;
                }
            }
            .name {
                font-size: 16px;
                font-weight: bold;
                color: #000000;
                line-height: 22px;
                margin-left: 6px;
            }
            .name1 {
                font-size: 13px;
                font-weight: normal;
                color: #aaacad;
                margin-left: 6px;
                line-height: 18px;
            }
        }
        .time {
            font-size: 13px;
            font-weight: normal;
            color: #aaacad;
            line-height: 18px;
            margin-left: 44px;
        }
    }
    .border {
        height: 1px;
        background: #f5f7fa;
        margin: 16px 0;
    }
    .content1 {
        padding: 20px;
        background: #ffffff;
        border-radius: 12px;
        .con-box {
            .flex();
            justify-content: space-between;
            .title1 {
                font-size: 15px;
                font-weight: bold;
                color: #000000;
                line-height: 21px;
                display: flex;
                align-items: center;
                img {
                    width: 12px;
                    height: 18px;
                    margin-right: 15px;
                }
            }
            .right {
                .flex();
                .text1 {
                    font-size: 12px;
                    color: #8c8c8c;
                    line-height: 17px;
                    margin-right: 7px;
                }
                .img-r {
                    width: 7px;
                    height: 12px;
                }
            }
        }
        .text {
            background: #fbfbfb;
            border-radius: 4px;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: normal;
            color: #aaacad;
            line-height: 17px;
            margin: 15px 15px 15px 27px;
        }
        .bor {
            height: 1px;
            background: #f5f7fa;
            margin: 20px 0;
        }
        .box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box1 {
                display: flex;
                align-items: center;
                .img {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                }
                .text1 {
                    font-size: 14px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 20px;
                }
                .text2 {
                    font-size: 13px;
                    font-weight: normal;
                    color: #aaacad;
                    line-height: 18px;
                }
            }
            .btn {
                width: 66px;
                height: 32px;
                background: #f2f4f5;
                border-radius: 100px;
                line-height: 32px;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                color: #999999;
            }
            .btn2 {
                width: 66px;
                height: 26px;
                line-height: 26px;
                background: linear-gradient(180deg, #ffbc4c 0%, #ff8725 100%);
                border-radius: 15px;
                text-align: center;
                font-size: 12px;
                color: #fff;
            }
        }
    }
}

.continer {
    background: #ffffff;
    border-radius: 30px 30px 0px 0px;
    transform: translateY(-30px);
    padding: 30px 0;
}
.content-title {
    display: flex;
    align-items: center;
    height: 40px;
    img {
        width: 17px;
        height: 17px;
        margin-right: 12px;
    }
    span {
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        line-height: 21px;
    }
}

.content-info {
    display: flex;
    align-items: center;
    padding-left: 29px;
    img {
        width: 32px;
        height: 32px;
    }
    .text1 {
        font-size: 13px;
        font-weight: bold;
        color: #999999;
        line-height: 18px;
        flex-grow: 1;
        margin: 0 10px;
    }
    .text2 {
        font-size: 13px;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }
}
.content-info + .content-info {
    margin-top: 15px;
}
</style>
