<config>
{
    "navigationBarTitleText": "提现",
    "navigationBarBackgroundColor": "#00BA64",
    "navigationBarTextStyle": "white",
    "backgroundColorTop":'#00BA64',
    "backgroundColorBottom":'#FFFFFF',
}
</config>
<template>
    <div class="top">
        <div class="box-con">
            <p>提现金额</p>
            <div class="num">
                <span>全部可提现 ¥{{ money || 0 }}</span>
            </div>
            <div class="box">
                <div class="money">
                    <div class="box-left">
                        <img slot="left-icon" src="../native/tabbar/icon_jiage@3x.png" alt="" />
                        <div class="money2">{{ money }}</div>
                        <!-- <van-field
                            :border="false"
                            type="digit"
                            size="large"
                            :value="form.amount"
                            @input="form.amount = $event.detail"
                            placeholder="请输入金额"
                        >
                        </van-field> -->
                    </div>
                    <div class="box-right" @click="seeFn">查看明细</div>
                </div>
            </div>
            <div class="btom">
                <span>提现至</span>
                <div>
                    <img src="../native/tabbar/png_weixin@3x.png" alt="" />
                    <span>微信钱包</span>
                </div>
            </div>
            <div class="btn2" :disabled="notWithdrawal" @click="Withdrawal(notWithdrawal)">申请提现</div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: '余额',
    data() {
        return {
            form: {
                amount: ''
            },
            moneyInfo: {}
        };
    },
    computed: {
        notWithdrawal() {
            let flag = false;
            this.form.amount > this.moneyInfo.money ? (flag = true) : (flag = false);
            return flag;
        },
        ...mapState(['roomInfo', 'userInfo', 'ammeterInfo']),
        type() {
            return this.$mp.query.type;
        },
        money() {
            switch (this.type) {
                case 'ROOM':
                    return (this.roomInfo ? this.roomInfo.balance : 0).toFixed(2);
                case 'PERSON':
                    return (this.roomInfo.money || 0).toFixed(2);
                // case 'AMMETER':
                //     return (this.ammeterInfo.rest || 0).toFixed(2);
                default:
                    return '';
            }
        }
    },
    mounted() {
        console.log(this.type);
    },
    methods: {
        seeFn() {
            if (this.type === 'PERSON') {
                this.navigateTo('/pages/withdrawalDetails?type=PERSON');
            } else {
                this.navigateTo('/pages/withdrawalDetails?type=ROOM');
            }
        },
        Withdrawal(notWithdrawal) {
            if (notWithdrawal) {
                wx.showToast({
                    icon: 'none',
                    title: '提现金额超出'
                });
                return;
            }
            if (Number(this.money) < 1) {
                wx.showToast({
                    icon: 'none',
                    title: '金额不能低于1元',
                    duration: 2000
                });
                return;
            }
            // let url = `/${this.status ? 'userMoneyWithdrawApply' : 'roomMoneyWithdrawApply/apply'}/${
            //     this.status ? 'applyAndPass' : 'apply'
            // }'`;
            // if (this.status) {
            //     url += '&account=' + '' + '&method=' + 'WECHAT' + '&name=' + '' + '&amount=' + this.form.amount;
            // } else {
            //     url += '&roomId=' + this.roomInfo.roomId + '&amount=' + this.form.amount;
            // }
            if (this.type === 'PERSON') {
                wx.showLoading({
                    title: '加载中'
                });
                this.$http
                    .post('/userMoneyWithdrawApply/applyAndPass', {
                        account: '',
                        method: 'WECHAT',
                        name: '',
                        amount: Number(this.money)
                    })
                    .then(res => {
                        // console.log(res);
                        wx.hideLoading();
                        wx.showToast({
                            title: '提现审核中'
                        });
                        setTimeout(() => {
                            this.navigateTo('/pages/withdrawalExamine');
                        }, 1000);
                        // this.navigateTo('/pages/walletreview?attach=' + res.id);
                    })
                    .catch(e => {
                        wx.hideLoading();
                        wx.showToast({
                            icon: 'none',
                            title: e.error
                        });
                    });
            } else {
                wx.showLoading({
                    title: '加载中'
                });
                this.$http
                    .post('/roomMoneyWithdrawApply/apply', {
                        roomId: this.roomInfo.roomId,
                        amount: Number(this.money)
                    })
                    .then(res => {
                        // console.log(res);
                        wx.hideLoading();
                        wx.showToast({
                            title: '提现审核中'
                        });
                        setTimeout(() => {
                            this.navigateTo('/pages/withdrawalExamine');
                        }, 1000);
                    })
                    .catch(e => {
                        wx.hideLoading();
                        wx.showToast({
                            icon: 'none',
                            title: e.error
                        });
                    });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.btn2 {
    width: 290px;
    height: 48px;
    background: #00ba64;
    border-radius: 24px;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
}
/deep/ .van-cell {
    padding-left: 3px !important;
}
.top {
    height: 90px;
    background: #00ba64;
    padding-top: 37px;
    .box-con {
        width: 335px;
        height: 690px;
        background: #ffffff;
        border-radius: 8px;
        margin-left: 20px;
        p {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 20px;
            padding: 30px 0 4px 16px;
        }
        .text2 {
            font-size: 14px;
            color: #ccc;
            text-align: center;
            margin: 40px 0;
            padding: 5px 16px;
        }
        .num {
            display: flex;
            align-items: center;
            padding-left: 16px;
            span {
                font-size: 13px;
                font-weight: 400;
                color: #c8c9cc;
                line-height: 22px;
            }
        }
        .box {
            padding: 16px 16px 23px 16px;
            .money {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #f5f7fa;
                margin-top: 12px;
                .box-left {
                    display: flex;
                    align-items: center;
                    img {
                        width: 14px;
                        height: 15px;
                    }
                }
                .money2 {
                    height: 40px;
                    font-size: 36px;
                    font-family: OSP-DIN, OSP;
                    font-weight: normal;
                    color: #000000;
                    line-height: 40px;
                    margin: 0 0 6px 2px;
                }
                .box-right {
                    width: 92px;
                    height: 36px;
                    font-size: 13px;
                    font-weight: bold;
                    color: #00ba64;
                    border-radius: 18px;
                    border: 1px solid #00ba64;
                    font-weight: bold;
                    line-height: 36px;
                    text-align: center;
                    margin-bottom: 12px;
                }
            }
        }
        .btom {
            display: flex;
            align-items: center;
            padding: 0 17px;
            justify-content: space-between;
            margin-bottom: 76px;
            div {
                display: flex;
                align-items: center;
                img {
                    width: 24px;
                    height: 22px;
                    margin-right: 5px;
                }
            }
            span {
                font-size: 14px;
                font-weight: bold;
                color: #000000;
                line-height: 24px;
            }
        }
    }
}
</style>
