<template>
 	<view class="p-20">
		<view class="p-30 bg-white wage">
			<view>可提现总金额(元)</view>
			<view class="money">0.00</view>
			<view class="btn-wrap">
				<u-button shape="circle" type="primary" size="small">立即提现</u-button>
			</view>
		</view>
		
		<view class="c-menu">
			<u-cell title="提现银行卡" isLink @click="bindBank">
				<template slot="value">
					<text v-if="walletInfo.bankCardNumber" style="color: #007aff;">已绑定</text>	
					<text v-else>未绑定</text>	
				</template>
			</u-cell>
			<u-cell title="提现支付宝" isLink @click="bindAlipay">
				<template slot="value">
					<text v-if="walletInfo.zfbAccount" style="color: #007aff;">已绑定</text>	
					<text v-else>未绑定</text>	
				</template>
			</u-cell>
			<u-cell title="提现记录" isLink url="/pages/my/wallet/withdrawalRecord/withdrawalRecord"></u-cell>
			<u-cell class="no-line" title="资金记录" isLink></u-cell>
		</view>
		
		<!-- <view class="c-menu">
			<u-cell class="no-line" title="开票信息" isLink></u-cell>
		</view> -->
	</view>
</template>

<script>
	import { withdraw } from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				walletInfo: {
					bankCardAccountName: '',
					bankCardArea: '',
					bankCardNumber: '',
					bankCardSubBranchName: '',
					bankCardType: '',
					realName: '',
					zfbAccount: ''
				}
			}
		},
		onReady() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				await withdraw.getInfo({userId: this.userInfo.id})
			},
			bindBank() {
				if(this.walletInfo.bankCardNumber) return
				this.navigateTo('/pages/my/wallet/bindBankCard/bindBankCard')
			},
			bindAlipay() {
				if(this.walletInfo.zfbAccount) return
				this.navigateTo('/pages/my/wallet/bindAlipay/bindAlipay')
			}
		}
	}
</script>

<style lang="scss">
	.wage {
		border-radius: 20upx;
		color: #6c6c6c;
		font-size: 30upx;
		.money {
			font-size: 50upx;
			font-weight: bold;
			color: #333333;
			padding: 20upx 0;
		}
		.btn-wrap {
			width: 150upx;
		}
	}
</style>
