<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">可用消费券：{{ $lang('common.currencySymbol') }}{{ withdrawInfo.member_info.balance_money | moneyFormat }}</text>
				</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>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
  components: {
    uniPopup
  },
  data() {
    return {
      username:'',
      withdrawInfo: {
        config: {
          is_use: 0,
          min: 1,
          rate: 0
        },
        member_info: {
          balance_money: 0,
          balance_withdraw: 0,
          balance_withdraw_apply: 0
        }
      },
      bankAccountInfo: {},
      withdrawMoney: '',
      buy_password: '',
      isSub: false
    };
  },
  onShow() {
    // 刷新多语言
    this.$langConfig.refresh();
    if (uni.getStorageSync('token')) {
      this.getWithdrawInfo();
    } else {
      this.$util.redirectTo('/pages_tool/login/login');
    }
  },
  methods: {
    // 删除提现金额
    remove() {
      this.withdrawMoney = '';
    },
    removeUsername(){
      this.username = '';
    },
    /**
     * 获取提现信息
     */
    getWithdrawInfo() {
      let _this = this;
      this.$api.sendRequest({
        url: '/api/memberwithdraw/info',
        success: 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.member_info.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.member_info.balance)) {
        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: '/api/memberwithdraw/balanceTransfer',
                data: {
                  username: _this.username,
                  apply_money: _this.withdrawMoney,
                  // password: _this.buy_password,
                },
                success: res => {
                  if (res.code >= 0) {
                    _this.$util.showToast({
                      title: '转账成功'
                    });
                    setTimeout(() => {
                      _this.$util.redirectTo('/pages_tool/member/balance', {}, '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>
