<template>
	<view class="withdrawal">
		<u-cell-group>
			<u-cell-item :arrow="false" :title-style="titleStyle">
				<view slot="title">
					<text class="title" style="margin-right: 5%;">到账方式</text>
					<u-icon size="50" name="weixin-fill" color="#04BE02"></u-icon>
					<text class="title" style="margin-left: 5%;">微信钱包</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false">
				<view slot="title">
					<text class="title">提现金额</text><br/>
					<u-field v-model="money" type="number" placeholder="请输入" label="￥" label-align="center" label-width="30" maxlength="10" :border-bottom="false"></u-field>
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="sub-title">
			<view class="error" v-if="disabled == true && money > balanceAmount">超出可提现余额</view>
			<text>可用余额{{balanceAmount}}元</text>
		</view>
		<view class="btn">
			<u-button v-if="disabled" :custom-style="btnStyle2">确认提现申请</u-button>
			<u-button v-else :custom-style="btnStyle" @click="withdrawal">确认提现申请</u-button>
		</view>
	</view>
</template>

<script>
	import {toast} from '../../../tips/myTips'
	import {cashOut} from '../../../api/api.js'
	export default {
		onLoad() {
			uni.$u.mpShare.title = '页面分享';
		},
		onShow() {
			
		},
		data(){
			return {
				titleStyle:{
					width:"100%"
				},
				btnStyle:{
					background:"#7c59fc",
					color:'#FFFFFF'
				},
				btnStyle2:{
					background:"#7c59fc4d",
					color:'#FFFFFF'
				},
				userInfo:this.$store.state.userInfo,
				money:''
			}
		},
		methods:{
			withdrawal(){
				cashOut(this.money).then((res) => {
					if(res.data.code == 0){
						console.log("提现成功:",res)
						uni.navigateBack()
					}else{
						console.log("提现失败:",res)
						toast(res)
					}
				})
			}
		},
		computed:{
			balanceAmount:function(){
				return (this.$store.state.userInfo.FBalanceAmount).toFixed(2)
			},
			disabled:function(){
				if(parseFloat(this.money) <= parseFloat(this.balanceAmount) && parseFloat(this.money)!= 0){
					return false
				}else{
					return true
				}
			}
		}
	}
</script>

<style>
	.title{
		color: #000000;
	}
	.sub-title{
		padding: 2% 5%;
		color: #d5d5d5;
	}
	.btn{
		margin: 2% auto;
		width: 90%;
	}
	.error{
		color: red;
		font-size: 16px;
		margin: 2% 0;
	}
</style>
