<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="container">
		<view class="withdraw-wrap">
			<view class="withdraw-wrap-title">会员账号：</view>
			<view class="money-wrap">
				<input  type="text" class="withdraw-money" style="font-size: 16px;" placeholder="请输入会员账号" v-model="username"  />
				<view class="delete" @click="removeUsername" v-if="username">
					<image :src="$util.img('upload/picture/member/apply_withdrawal/close.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="empty-box"></view>
		<view class="withdraw-wrap">
			<view class="withdraw-wrap-title">转账：</view>
			<view class="money-wrap">
				<text class="unit">{{ $lang('common.currencySymbol') }}</text>
				<input type="digit" class="withdraw-money" v-model="withdrawMoney" />
				<view class="delete" @click="remove" v-if="withdrawMoney">
					<image :src="$util.img('upload/picture/member/apply_withdrawal/close.png')" mode="widthFix"></image>
				</view>
			</view>
			<view class="bootom">
				<view>
					<text class="color-tip">可用购房券：{{ withdrawInfo.house_purchase | moneyFormat }}</text>
				</view>
			</view>
<!--			<view class="desc">-->
<!--				<view>1.同一关系链上的用户可以互转,可向上或向下转赠</view>-->
<!--				<view>2.手续费规则：直接关系互转免除手续费用（例如转给直推下级或直推上级，非直属互转{{withdrawConfig.co_money_rate+'%'}}手续费</view>-->
<!--				<view>3.购房券转赠最少{{withdrawConfig.co_money_transfer_multiple}}个，转赠数量为{{withdrawConfig.co_money_transfer_multiple}}的整数倍;</view>-->
<!--        <view>4.会员账号支持会员登录账号或者用户绑定的手机号</view>-->
<!--			</view>-->
      <view class="desc">
        <text>转账金额需为100的整数倍</text>
      </view>
		</view>
    <view class="empty-box"></view>
<!--    <view class="withdraw-wrap">-->
<!--      <view class="withdraw-wrap-title">支付密码：</view>-->
<!--      <view class="money-wrap">-->
<!--        <input type="digit" class="withdraw-money" v-model="buy_password" />-->
<!--      </view>-->
<!--    </view>-->
		<view class="btn color-base-border ns-gradient-otherpages-member-widthdrawal-withdrawal" 
		 :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 || username==''}" @click="withdraw">
			确认转账
		</view>			
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				username:'',
				withdrawConfig:{
					is_use: 0,
					min: 1,
					rate: 0
				},
				withdrawInfo: {},
				bankAccountInfo: {},
				withdrawMoney: '',
        buy_password: '',
				isSub: false
			};
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.getWithdrawConfig();
			if (uni.getStorageSync('token')) {
				this.getWithdrawInfo();
			} else {
				this.$util.redirectTo('/pages_tool/login/login');
			}
		},
		methods: {
			getWithdrawConfig(){
				this.$api.sendRequest({
					url: '/fenxiao/api/config/withdraw',
					success: res => {
						console.log(res);
						if (res.code >= 0 && res.data) {
							this.withdrawConfig=res.data;
						}
					}
				});
			},
			// 删除提现金额
			remove() {
				this.withdrawMoney = '';
			},
			removeUsername(){
				this.username = '';
			},
			// 获取提现信息
			getWithdrawInfo() {

        let _this=this;
				this.$api.sendRequest({
					url: '/fenxiao/api/account/info',
					success: res => {
						console.log(res);
						if (res.code >= 0 && res.data) {
							this.withdrawInfo = res.data;
							// if (this.withdrawInfo.config.is_user_transfer == 0) {
							// 	this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
							// }
						}
            // if (this.withdrawInfo.is_pay_password == 0) {
            //   uni.showModal({
            //     title: '温馨提示',
            //     content: '您未设置支付密码，需设置支付密码后进行转账，点击确定前往支付密码设置',
            //     success: function (res) {
            //       if (res.confirm) {
            //         _this.$util.redirectTo('/pages_tool/member/info_edit', {action: 'pay_password'}, '');
            //       } else if (res.cancel) {
            //         _this.isSub = false;
            //         console.log('用户点击取消');
            //       }
            //     }
            //   });
            // }
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			verify() {
				if (this.username == '') {
					this.$util.showToast({
						title: '请输入转入账号'
					});
					return false;
				}
				if (this.withdrawMoney == '' || this.withdrawMoney <= 0 || isNaN(parseFloat(this.withdrawMoney))) {
					this.$util.showToast({
						title: '请输入购房券'
					});
					return false;
				}
				if (parseFloat(this.withdrawMoney) > parseFloat(this.withdrawInfo.house_purchase)) {
					this.$util.showToast({
						title: '转出金额超出可用购房券'
					});
					return false;
				}
				// if (parseFloat(this.withdrawMoney) < parseFloat(this.withdrawInfo.config.min)) {
				// 	this.$util.showToast({
				// 		title: '转出金额小于最低转账金额'
				// 	});
				// 	return false;
				// }
				return true;
			},
			withdraw() {
				if (this.verify()) {
					if (this.isSub) return;
					this.isSub = true;
					let _this=this;
					uni.showModal({
						title: '温馨提示',
						content: '您的账号购房券将转让他人账号！',
						success: function (res) {
							if (res.confirm) {
								_this.$api.sendRequest({
									url: '/fenxiao/api/withdraw/integralMoneyTransfer',
									data: {
										username:_this.username,
										apply_money: _this.withdrawMoney,
                    password: _this.buy_password,
									},
									success: res => {
										console.log(res)
										if (res.code >= 0) {
											_this.$util.showToast({
												title: '转账成功'
											});
											_this.isSub = false;
											_this.getWithdrawInfo();
                      setTimeout(() => {
                        _this.$util.redirectTo('/pages_tool/member/goufang', {}, 'redirectTo');
                      }, 1500);
										} else {
                      _this.isSub = false;
                      if (res.code == -801) {
                        // uni.showModal({
                        //   title: '温馨提示',
                        //   content: '您未设置支付密码，需设置支付密码后进行转账，点击确定前往支付密码设置',
                        //   success: function (res) {
                        //     if (res.confirm) {
                        //       _this.$util.redirectTo('/pages_tool/member/info_edit', {action: 'pay_password'}, '');
                        //     } else if (res.cancel) {
                        //       _this.isSub = false;
                        //       console.log('用户点击取消');
                        //     }
                        //   }
                        // });
                      } else {
                        _this.$util.showToast({
                          title: res.data || res.message
                        });
                      }
										}
									},
									fail: res => {
										_this.isSub = false;
									}
								});
							} else if (res.cancel) {
								_this.isSub = false;
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		},
		filters: {
			/**
			 * 金额格式化输出
			 * @param {Object} money
			 */
			moneyFormat(money) {
				return parseFloat(money).toFixed(2);
			}
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;
	}

	.empty-box {
		height: 20rpx;
	}

	.bank-account-wrap {
		margin: 0 20rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f7f7f7;
		position: relative;

		.tx-wrap {
			display: flex;
			justify-content: space-between;
			margin-right: 60rpx;

			.tx-bank {
				margin-right: 60rpx;
				flex: 1;
				margin-left: 10rpx;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tx-img {
				position: absolute;
				right: 100rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.iconfont {
			position: absolute;
			right: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.withdraw-wrap {
		margin: 0 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: rgba(110, 110, 110, 0.09) 0 0 20rpx 0;
		.money-wrap {
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;
			.unit {
				font-size: 60rpx;
				line-height: 1;
			}
			.withdraw-money {
				height: 60rpx;
				line-height: 1;
				min-height: 60rpx;
				padding-left: 20rpx;
				font-size: 60rpx;
				flex: 1;
				font-weight: bolder;
			}
			.delete {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.bootom {
			display: flex;
			padding-top: 20rpx;
			text {
				line-height: 1;
				flex: 2;
			}
			.all-tx {
				padding-left: 10rpx;
			}
		}
	}

	.btn {
		margin: 0 30rpx;
		margin-top: 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: $border-radius;
		color: #fff;
		text-align: center;
		background-color: var(--main-color);
		&.disabled {
			background: #ccc;
			border-color: #ccc;
			color: #fff;
		}
	}

	.recoend {
		margin-top: 40rpx;

		.recoend-con {
			text-align: center;
		}
	}

	.desc {
		font-size: $font-size-tag;
		color: #999;
	}
</style>
