<template>
	<view class="money_edit">
		<view class="banner">
			<image class="bg-img" src="@/pages_my/static/logo_start.png" mode="widthFix"></image>
			<view class="my_money">
				<text>{{ type === '0' ? '可提现金额（元）' : '现有余额（元）' }}</text>
				<text>¥<text class="number">{{ amount }}</text> </text>
			</view>
		</view>
	
		<view class="edit_box">
			<view class="edit_title px-30">{{ type === '0' ? '提现金额' : '充值金额' }}</view>
			<view class="money_line px-30">
				<text class="m-r-10">¥</text>
				<input
					:value="query.amount"
					placeholder="请输入提现余额"
					type="number"
					@input="onInput"
				/>
			</view>
			<view class="option">
				<u-cell-group :border="false">
					<u-cell :title="type === '0' ? '提现到' : '充值方式'" :border="false" :value="type === '0' ? formatBank : '微信支付'"></u-cell>
				</u-cell-group>
			</view>
			
			<!-- 提交按钮 -->
			<view class="footer">
				<u-button :text="type === '0' ? '申请提现' : '确认充值'" color="#333333" shape="circle" @click="confirm"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { recharge, getAmount, cashAmout, getBank } from '@/api/user.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				query: {
					amount: '1800', // 充值金额
					type: 1 // 0 公众号， 1 小程序
				},
				bankInfo: {
					accountBank: '储蓄卡',
					account: '6228485028809226788'
				},
				amount: 0, // 用户可提余额
				type: '0', // 0提现，1充值
			}
		},
		async onLoad(option) {
			// this.getBankInfo()
			this.type = option.type
			// 查询可提现余额
			// this.amount = await getAmount()
		},
		computed: { 
			...mapGetters(['userInfo']),
			formatBank() {
				let bankName = this.bankInfo.accountBank === '' ? '' : this.bankInfo.accountBank.split(' ')[0]
				let bankNum = this.bankInfo.account
				if(bankName !== '' && bankNum !== ''){
					return `${bankName} ${"*".repeat(bankNum.length - 14).replace(/(.{4})/g, `$1 `)}${bankNum.length % 4 ? " " : ""}${bankNum.slice(-5)}`
				}
				return bankName + bankNum
			}
		},
		methods: {
			// 赋值充值金额
			onInput({detail}) {
				this.query.amount = detail.value
			},
			// 获取商家提现账户信息
			async getBankInfo() {
				let businessId = this.userInfo.businessId
				const res = await getBank(businessId)
				this.bankInfo = res
			},
			// 提交申请
			async confirm(){
				// 判断用户是提现还是充值
				if(this.type === '0') {
					let cashoutAmount = this.query.amount
				  const res =	await cashAmout({ cashoutAmount })
				} else {
					const res = await recharge(this.query)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.money_edit{
	min-height: 100vh;
	background-color: #f6f6f6;
}
.banner{
	position: relative;
	height: 288rpx;
	background-color: #333;
	.bg-img{
		position: absolute;
		top: 0;
		right: -10rpx;
		width: 430rpx;
		height: 286rpx;
	}
	.my_money{
		position: absolute;
		top: 38rpx;
		left: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #fff;
		.number{
			font-size: 52rpx;
			font-weight: 700;
			line-height: 64rpx;
			margin-left: 4rpx;
		}
	}
}

.edit_box{
	position: relative;
	height: 496rpx;
	margin: 0 30rpx;
	margin-top: -86rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.edit_title{
		height: 86rpx;
		color: #333;
		line-height: 86rpx;
		font-size: 28rpx;
	}
	.money_line{
		display: flex;
		align-items: center;
		font-size: 40rpx;
		line-height: 52rpx;
		color: #333;
		padding-bottom: 6rpx;
		border-bottom: 2rpx solid #D8D8D8;
	}
	.footer{
		margin: 100rpx 72rpx 0;
	}
	.option{
		margin-top: 30rpx;
	}
	
	.opton-item{
		display: flex;
	}
}
</style>