<config>
{
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white",
    "backgroundColorTop":'#00ba64',
    "backgroundColorBottom":'#f5f7fa',
}
</config>
<template>
    <div class="app">
        <van-sticky :offset-top="0">
            <div class="top-img">
                <div class="title">{{ list.storeName || '暂无门店' }}</div>
                <div class="info">{{ list.roomName + '室' }}</div>
                <div class="background">
                    <img class="img" src="../static/imgs/info_img_tuanduiyucun@3x.png" alt="" />
                    <div class="money">
                        <div>
                            <div class="money1">
                                <img class="money-img" src="../native/icon_jiage@3x (1).png" alt="" />
                                <div class="money2">{{ list.balance || 0 }}</div>
                            </div>
                            <div class="text1">总预存金额</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>
            </div>
        </van-sticky>
        <div class="content">
            <div class="box">
                <img class="con-img" src="../static/imgs/fangjian-icon-ruzhu@3x.png" alt="" />
                <div class="name">入住时间</div>
            </div>
            <div class="time">{{ list.checkinTime }} 至 {{ list.planOutTime }}</div>
            <div class="border"></div>
            <div class="box">
                <img class="con-img" src="../static/imgs/fangjian-icon-fangxing@3x.png" alt="" />
                <div class="name" v-if="list.checkout">已退房</div>
                <div v-if="!list.checkout" class="box">
                    <div class="name1">房间类型</div>
                    <div class="name">{{ list.roomType || '-' }}</div>
                    <img class="con-img con-img2" src="../static/imgs/fangjian-icon-yiruzhu@3x.png" alt="" />
                    <div class="name1">已入住</div>
                    <div class="name">{{ list.checkinNumber ? list.checkinNumber + '人' : '-' }}</div>
                </div>
            </div>
            <div class="border"></div>
            <div class="box">
                <img class="con-img" src="../static/imgs/fangjian-icon-zujing@3x.png" alt="" />
                <div style="display: flex;align-items: center;">
                    <div class="name1">{{ rateType }}</div>
                    <div class="name">{{ rate }}</div>
                </div>
            </div>
            <div class="border" v-if="list.checkInType !== 'INDIVIDUAL'"></div>
            <div class="box" v-if="list.checkInType !== 'INDIVIDUAL'">
                <img class="con-img" src="../static/imgs/fangjian-icon-tuandui@3x.png" alt="" />
                <div class="name1">团队名称</div>
                <div class="name">{{ teamName }}</div>
            </div>
        </div>
        <div class="content1" v-if="list">
            <div class="con-box" @click="navigateTo('/pages/wallet')">
                <div class="title1">房间账单</div>
                <div class="right">
                    <div class="text1">历史记录</div>
                    <img class="img-r" src="../native/icon_inter_huangse@3x.png" alt="" />
                </div>
            </div>
            <div class="border"></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/icon-shuifei@3x.png" alt="" />
                    <div>
                        <div class="text1">电费</div>
                        <div class="text2">充后电量：{{ ammeterInfo.rest }}度</div>
                    </div>
                </div>
                <div class="btn2"><span>去缴费</span></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.$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;
    height: 100vh;
    .top-img {
        width: 100%;
        background: #00ba64;
        height: 242px;
        border-radius: 2px;
        .title {
            padding-left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 34px;
            padding-top: 54px;
        }
        .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: 5px 0 20px 20px;
            padding: 0 10px;
            display: inline-block;
        }
        .background {
            position: relative;
            display: flex;
            .img {
                height: 100px;
                width: 100%;
            }
            .money {
                position: absolute;
                width: 81%;
                display: flex;
                justify-content: space-between;
                margin: 16px 0 0 35px;
                .money1 {
                    .flex();
                    margin-bottom: 3px;
                    .money2 {
                        font-size: 26px;
                        font-family: DIN-Bold, DIN;
                        font-weight: bold;
                        color: #ff7f1f;
                        line-height: 31px;
                    }
                    .money-img {
                        width: 11px;
                        height: 13px;
                        margin-top: 6px;
                    }
                }
                .text1 {
                    font-size: 13px;
                    font-weight: normal;
                    color: #a88e63;
                    line-height: 18px;
                }
                .btn {
                    display: flex;
                    align-items: center;
                    .btn1 {
                        width: 72px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        font-size: 14px;
                        font-weight: bold;
                        color: #ff7f1f;
                        background: rgba(255, 255, 255, 0.6);
                        border-radius: 13px;
                        border: 1px solid #ffffff;
                        margin: 0 20px 0 48px;
                    }
                    .btn2 {
                        width: 72px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        font-size: 14px;
                        background: #ffffff;
                        border-radius: 13px;
                        font-weight: bold;
                        color: #ff7f1f;
                    }
                }
            }
        }
    }
    .content {
        padding: 20px 12px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
        border-radius: 12px;
        margin: 8px 20px 0;
        .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 {
        margin: 20px;
        padding: 20px 12px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
        border-radius: 12px;
        .con-box {
            .flex();
            justify-content: space-between;
            .title1 {
                font-size: 16px;
                font-weight: bold;
                color: #00ba64;
                line-height: 22px;
            }
            .right {
                .flex();
                .text1 {
                    font-size: 13px;
                    font-weight: normal;
                    color: #00ba64;
                    line-height: 18px;
                }
                .img-r {
                    width: 24px;
                    height: 24px;
                }
            }
        }
        .text {
            font-size: 12px;
            font-weight: normal;
            color: #aaacad;
            line-height: 17px;
            padding-bottom: 30px;
        }
        .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: 32px;
                background: #00ba64;
                line-height: 32px;
                text-align: center;
                font-size: 12px;
                color: #fff;
                border-radius: 18px;
                opacity: 0.76;
                font-weight: bold;
            }
        }
    }
}
</style>
