<template>
	<view class="WithdrawingCoin ">
		<view class="propery">
			<image src="/static/imgs/account-bg.png" mode="aspectFill" class="record-bg" />
			<view class="propery-content">
				<view class="currency">原石钱包
					<span>(≈ {{ cost || '0.00' }} CNY)</span>
				</view>
				<view class="balance">{{ balance || '0.00' }}</view>
		<!-- 		<view class="frozen" @click="withdrawDetail">提现记录</view> -->
			</view>
		</view>

		<view class="withdrawing-content">
			<view class="item">
				<view style="flex: 1;">
					<view class="inputTxt">提现数量</view>
					<input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
						placeholder-style="color:#999;font-weight:normal; font-size:34rpx;" 
						placeholder="请输入提现数量" :disabled="balance===0" />
				</view>
				<view class="all" @click="all">全部提现</view>
			</view>
		</view>
		<view class="total" v-if="total">≈ ￥{{total.toFixed(2)}} </view>
		<view class="btn" @click="actions">提现至现金零钱</view>
		<view class="des">提现至零钱，可在零钱中提现到银行卡 手续费: 无</view>
	</view>
</template>

<script>
	import {
		cashsCreate,
		accountCashs,
		withdrawsIndexCreate,
		withdrawsIndex
	} from '@/apis/interfaces/withdraws';
	export default {
		data() {
			return {
				balance: 0, // 钱包原石数量
				tax: 0, // 当前手续费
				cost: 1, // 每个原石的价格
				total: 0, // 约合人民币
				card: '', // 银行卡号
				withdraw_input: '', // 提现原石数量
				bank_accounts: 0,
				bankInfo: {}
			};
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			if (uni.getStorageSync('refresh')) {
				this.bankInfo = {}
				this.getInfo()
			}
		},
		methods: {
			// 提现基本信息
			getInfo() {
				cashsCreate().then(res => {
					this.withdraw_input = Number(res.balance)
					this.balance = res.balance
					this.cost = res.cost
					this.total = Number(res.balance) * Number(res.cost)
					uni.setStorageSync('refresh', false)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			//  输入提现原石数量
			inputNum(e) {
				let number = Number(e.detail.value)
				if (number <= Number(this.balance)) {
					this.total = Number(e.detail.value) * this.cost
				} else {
					this.total = 0
					if (Number(this.balance) === 0) {
						uni.showToast({
							title: '当前不能提现',
							icon: 'none',
							duration: 2000
						});
						this.withdraw_input = 0
						this.total = 0
					} else {
						uni.showToast({
							title: '最大值能超过' + this.balance + '',
							icon: 'none',
							duration: 2000
						});
						this.withdraw_input = this.balance
						this.total = this.balance * this.cost
					}
				}
			},
			//  点击全部
			all() {
				if (this.balance > 0) {
					this.withdraw_input = this.balance
					this.total = this.balance * this.cost
				} else {
					uni.showToast({
						title: '啥也没有，我也做不到~',
						icon: 'none',
						duration: 2000
					})
					this.withdraw_input = 0
				}
			},
			// 提现
			actions() {
				let data = {
					amount: Number(this.withdraw_input)
				}
				if (data.amount === 0) {
					uni.showToast({
						title: '请输入原石数量',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					title: '温馨提示',
					content:'您是否确认提现到现金零钱账户，交易将免手续费',
					confirmColor: '#7c52fc',
					cancelColor: '#cacaca',
					cancelText: '我再想想',
					confirmText: '确认提现',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中'
							})
							accountCashs(data).then(res => {
								uni.showToast({
									title: res,
									icon: 'none',
									duration: 3000
								})
								this.withdraw_input = ''
								this.total = ''
								setTimeout(res => {
									this.getInfo()
									uni.hideLoading()
								}, 3000)
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							})
						}
					}
				})

			},
			// 提现记录
			withdrawDetail() {
				this.$Router.push({
					name: 'withdrawList'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.receiptCode {
		color: #808080;
		text-align: left;
		// margin: $margin 0;
		font-size: $title-size-m;
	}

	.WithdrawingCoin {
		background-color: #f7f7f7;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 100rpx;

		// 账户
		.propery {
			position: relative;
			padding-top: var(--status-bar-height);
			background-image: linear-gradient(to bottom, #e93340, #e93340);
			position: relative;
			overflow: hidden;

			.record-bg {
				position: absolute;
				width: 120%;
				height: 300rpx;
				bottom: -50rpx;
				right: -20rpx;
				z-index: 1;
				opacity: .5;
				transform: rotate(-7deg);
			}

			.propery-content {
				position: relative;
				z-index: 1;
				padding: $padding/2 $padding $padding*3;
				text-align: center;

				.currency {
					font-size: $title-size-m;
					color: rgba($color: white, $alpha: .8);
				}

				.balance {
					font-size: $title-size * 2.5;
					padding: $padding 0;
					color: white;
				}

				.frozen {
					background: rgba($color: #000000, $alpha: .1);
					color: rgba($color: white, $alpha: .7);
					display: inline-block;
					font-size: 24rpx;
					padding: 6rpx $padding;
					border-radius: 20rpx;
					border: solid 1rpx rgba($color: white, $alpha: .4)
				}
			}
		}

	}

	.all {
		color: $text-price;
		width: 160rpx;
		text-align: center;
	}

	.item-name {
		text-align: center;
		color: #303030;
		font-weight: bold;
		margin-bottom: $margin;
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background-image: linear-gradient(to right, #aaaaff, #aaaaff);
		color: #fff;
		margin: 30rpx;
		padding: 30rpx;

		.right {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 34rpx;

			.cardName {
				flex: 1;
			}
		}
	}

	.withdrawing-content {
		background-color: #fff;
		padding: $padding $padding $padding $padding * 2;
		font-size: $title-size-m;

		/* 绑定银行卡 */
		.bank-card {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 45rpx 0 35rpx;
		}


		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 20rpx 0;

			span:nth-child(1) {
				color: #666;
				margin-right: 20rpx;
			}

			.inputTxt {
				color: #999;
				padding-bottom: 20rpx;
			}

			.input_num {
				font-size: 60rpx;
				color: #3a3a3a;
				font-weight: bolder;
				flex: 1;
			}
		}

		.item-total {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: $padding*1 0 0 0;
			color: #3a3a3a;

			.total {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				box-sizing: border-box;

				.money {
					padding-top: $padding *0.5;
				}
			}

			.lists {
				color: $text-price;
			}
		}

	}

	.btn {
		background-image: linear-gradient(to bottom, #e93340, #e93340);
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		padding: $padding * .9;
		margin: $margin * 3 $margin *2 $margin $margin*2;
		font-size: $title-size;
		font-weight: bold;
	}

	.des {
		text-align: center;
		color: #cacaca;
		font-size: 26rpx;
	}

	.total {
		color: $mian-color;
		margin-top: 20rpx;
		margin-left: 50rpx;
		font-size: 36rpx;
	}
</style>
