<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="提现"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="overview">
                <view class="wallet">
                    <view class="title">可提现金额</view>
                    <view class="amount">¥ {{curUserinfo.balance}}</view>
                </view>
            </view>
            <view class="wd-form">
                <view class="wd-title">提现金额</view>
                <view class="wd-input">
                    <view class="left">
                        <u-icon name="rmb" size="40"></u-icon>
                        <u-input v-model="amount" type="number" placeholder="请输入提现金额" />
                    </view>
                    <view>
                        <span class="wd-btn-font" @click="wdAll">全部提现</span>
                    </view>
                </view>
                <view class="description">本月还可免费提现5次，每日限额5000，最低10元起</view>
            </view>
            <view class="paytype">
                <view class="pt-title">
                    提现方式：
                    <u-icon name="weixin-fill" color="#52c41a" size="36"></u-icon>
                    <span class="brand">微信钱包</span>
                </view>
            </view>
            <view class="tips">
                <view>温馨提示</view>
                <view>用户每日最高提现金额为5000元，每月可免费提现5次，超过部分按1%收取手续费；最低提现金额为10元。</view>
            </view>
            <view class="mc-btn">
                <u-button
                    :custom-style="{margin: '16rpx 24rpx',backgroundColor: '#ffcb57',color: '#472d21'}"
                    hover-class="defaultBtnhover"
                    @click="placeOrder"
                >提现</u-button>
            </view>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            amount: '',
        };
    },
    onLoad() {},
    computed: {
        ...mapGetters({
            curUserinfo: 'user/displayUserInfo',
        }),
    },
    methods: {
        ...mapActions({
            updateUserDetail: 'user/updateUserDetail',
        }),
        placeOrder() {
            const { amount, curUserinfo } = this;
            if (amount === '' || amount > curUserinfo.balance) {
                return;
            }
            request
                .post('/api/CashOut/SH', {
                    amount: amount,
                })
                .then((res) => {
                    const { code, message, result } = res;
                    this.$refs.uToast.show({
                        title: code === 0 ? '提交成功！' : message,
                    });
                    if (code === 0) {
                        this.getAccountInfo();
                    }
                });
        },
        wdAll() {
            this.amount = this.curUserinfo.balance;
        },
        getAccountInfo() {
            request.get('/api/Business/View').then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    const detail = JSON.parse(result.result);
                    this.updateUserDetail(detail);
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .overview {
            padding: 80rpx 0 60rpx 0;
            background-color: #ffe58f;
            .wallet {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .title {
                    margin-top: 6rpx;
                    font-size: 32rpx;
                }
                .amount {
                    margin-top: 12rpx;
                    font-size: 36rpx;
                    font-weight: bold;
                }
            }
        }
        .wd-form {
            background-color: #fff;
            .wd-title {
                position: relative;
                padding: 24rpx 0 24rpx 48rpx;
                font-size: 32rpx;
                &::before {
                    content: '';
                    position: absolute;
                    display: block;
                    top: 28rpx;
                    left: 24rpx;
                    width: 8rpx;
                    height: 36rpx;
                    background-color: #ffcb57;
                    border-radius: 5rpx;
                }
            }
            .wd-input {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 24rpx;
                padding: 12rpx 0;
                border-bottom: 1rpx solid #d9d9d9;
                .left {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    /deep/.u-icon {
                        margin-top: -3rpx;
                        margin-right: 6rpx;
                    }
                }
                .wd-btn-font {
                    font-weight: bold;
                }
            }
            .description {
                padding: 14rpx 24rpx 28rpx 24rpx;
                font-size: 26rpx;
                color: #8c8c8c;
            }
        }
        .paytype {
            margin-top: 30rpx;
            background-color: #fff;
            .pt-title {
                position: relative;
                padding: 24rpx 0 24rpx 48rpx;
                font-size: 32rpx;
                &::before {
                    content: '';
                    position: absolute;
                    display: block;
                    top: 28rpx;
                    left: 24rpx;
                    width: 8rpx;
                    height: 36rpx;
                    background-color: #ffcb57;
                    border-radius: 5rpx;
                }
                .brand {
                    margin-left: 18rpx;
                }
            }
        }
        .tips {
            padding: 32rpx 24rpx;
            font-size: 24rpx;
            color: #595959;
        }
    }
}
</style>
