<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>(≈ {{ price || '0.00' }} CNY)</span> -->
				</view>
				<view class="balance">{{ balance.balance || '0.00' }}</view>
				<view class="frozen" @click="withdrawDetail">提现记录</view>
			</view>
		</view>

		<view class="item-name">
			提现至银行卡
			<view class="right">
				<view class="cardName" @click="addCard">添加银行卡</view>
				<uni-icons type="arrowright" size="12" color="#fff" />
			</view>
		</view>
		<view class="item-name">
			选择银行卡
			<view class="right">
				<view class="cardName" @click="selectCard">选择银行卡</view>
				<uni-icons type="arrowright" size="12" color="#fff" />
			</view>
		</view>
		<view class="withdrawing-content">
			<view class="item">
				<view style="flex: 1;">
					<input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
						placeholder-style="color:#999;font-weight:normal; font-size:40rpx;" 
						placeholder="能量球数量" />
					<view v-if="total">≈ ￥{{total}}</view>
				</view>
				<view class="all" @click="all">全部提现</view>
			</view>
		</view>
		<view class="btn" @click="open">提现至银行卡</view>
		<view class="des">预计5- 10个工作日到账</view>
	</view>
</template>

<script>
	import {
		withdraw,
		withdrawLogs,
		withdrawDo
	} from '@/apis/interfaces/wallet.js';
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				balance: 0, // 钱包能量球数量
				price: 0, // 当前能量球价格
				card: '', // 银行卡号
				name: '', // 姓名
				password: '', // 
				withdraw_input: '', // 提现能量球数量
				total: '', // 提现能量球转化成的钱数
				page: 1,
				has_more: true,
				withdrawLists: [],
			};
		},
		components: {
			'number-jpan': numberJpan
		},
		onLoad() {
			this.reset()
		},
		onReachBottom() {
			if (this.withdrawLists.length > 0) {
				if (this.has_more) {
					this.withdrawLogs()
				} else {
					uni.showToast({
						title: '没有更多~',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			// 提现基本信息
			withdraw() {
				withdraw().then(res => {
					this.balance = Number(res.balance)
					this.price = Number(res.price)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 提现记录
			withdrawLogs() {
				withdrawLogs({
					page: this.page
				}).then(res => {
					this.withdrawLists = this.withdrawLists.concat(res.data)
					if (res.page.has_more) {
						this.page = this.page + 1
						this.has_more = true
					} else {
						this.has_more = false
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			//  输入提现能量球数量
			inputNum(e) {
				let number = Number(e.detail.value)
				if (number <= this.balance) {
					this.total = Number(e.detail.value) * this.price
				} else {
					uni.showToast({
						title: '最大值能超过' + this.balance + '',
						icon: 'none',
						duration: 2000
					});
					this.withdraw_input = ''
					this.total = 0
				}

			},
			//  点击全部
			all() {
				if (this.balance > 0) {
					this.withdraw_input = this.balance
					this.total = this.balance * this.price
				} else {
					uni.showToast({
						title: '啥也没有，我也做不到~',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//  打开密码 出发提现功能
			open() {
				if (this.total > 0) {
					let params = {
						name: this.name,
						card: this.card,
						total: this.withdraw_input
					}
					if (params.name === '' || params.card === '' || params.total === 0) {
						uni.showToast({
							title: '重新确认提现信息',
							icon: 'none',
							duration: 2000
						})
					} else {
						this.$refs.numberPad.open()
					}
				} else {
					uni.showToast({
						title: '啥也没有，我也做不到~',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 输入密码成功后，，，
			closeChange(e) {
				uni.showLoading({
					title: '提现中~'
				})
				let params = {
					name: this.name,
					card: this.card,
					total: this.withdraw_input,
					code: e
				}
				withdrawDo(params).then(res => {
					uni.showToast({
						title: '申请提现成功，耐心等待打款',
						icon: 'none',
						duration: 2000
					})
					this.reset()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			reset() {
				this.name = ''
				this.card = ''
				this.page = 1
				this.has_more = true
				this.withdraw_input = ''
				this.total = 0
				this.withdrawLists = []
				this.withdrawLogs();
				this.withdraw();
			},
			// 添加银行卡
			addCard() {
				uni.navigateTo({
					url:'/pages/wallet/addCard'
				})
			},
			// 选择银行卡
			selectCard(){
				uni.navigateTo({
					url:'/pages/wallet/selectCard'
				})
			},
			// 提现记录
			withdrawDetail(){
				uni.navigateTo({
					url:'/pages/wallet/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 right, #7c52fc, #976dff);
			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 *3 $padding *1.4;
				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: $radius-m;
					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: $padding 0;

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

			.input_num {
				font-size: $title-size*1.5;
				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 right, #7c52fc, #976dff);
		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;
	}
</style>
