<template>
	<view class="content">
	   <navigation>
		  withdrawal
	    <view class="bread" slot="bread">
	    	<image src="../../../static/promo/nav_icon_more@2x.png" mode="aspectFit" @click="invMore=true,msShow=true"></image>
	    </view>
	   </navigation>
     <view class="rech-body">
     	<view  class="pro-body-p1">Balance:<span data-v-642729fd="" class="category-sigh">₦</span><span  class="s1">{{withdrawConfig.currentBalance}}</span></view>
       	<view >
       			<u-modal v-model="show"  width="80%" :show-title="false" confirm-text="Confirm" confirm-color="#954DE3FF">
					<view class="" v-html="content" class="p_con"></view>
				</u-modal>
       		</view>
  
	   <view class="input-item flex">
       	<view class="login-sigh login-sigh2  flex">
       		<view class="imgcon">
       			<image src="../../../static/promo/list_icon_meiyuan@3x.png" mode="aspectFit"></image>
       		</view>
       	</view>
       	<input value="" placeholder="enter withdrawal amount" placeholder-style="color: #BFC2CCFF;font-size:14px;text-transform:capital" v-model="tranAmt" @input="calulate"/>
       </view>
	   <view class="p_con">
		   <view class="fee">
		   	FEE:{{this.fee}}, TO ACCOUNT {{this.trueMoney}}
		   </view>
	   		<view class="minnum">
	   				MINIMUM WITHDRAWAL AMOUNT: {{withdrawConfig.withdraw_min_amt}}
	   		</view>
	   </view>
	<!--   <view class="rech-capy">
	   	<view class="payment">
	   		payment
	   	</view>
	   		<view class="capy">
	   		<image src="../../static/login/icon_hook@2x.png" mode="" class="img1"></image>	   CPAY
	   		</view>
	   </view> -->
	   <view class="rech-input-con">
	<!-- 	   <view class="input-item flex">
		   	<input type="text" value="" placeholder="IFSC Code" placeholder-style="color: #BFC2CCFF;font-size:14px;"/>
		      </view> -->
	<view class="input-item flex">
		<view class="login-sigh login-sigh2  flex">
			<view class="imgcon">
				<image src="../../../static/login/list_icon_card@2x.png" mode=""></image>
			</view>
		</view>
		<input type="text" value="" placeholder="mobile phone" v-model="mobile" disabled
			placeholder-style="color: #BFC2CCFF;font-size:14px;"
		
			/>
	</view>
<!-- 	<view class="input-item flex">
		<view class="login-sigh login-sigh2  flex">
			<view class="imgcon">
				<image src="../../static/login/list_icon_key@2x.png" mode=""></image>
			</view>
		</view>
		<input type="password" value="" placeholder="Enter Your Login Password" v-mode="password"
			placeholder-style="color: #BFC2CCFF;font-size:14px;"  @focus="btncol=1" @blur="btncol=2" />
	</view> -->
	   </view>
	   
	   
	 </view>
	 
	 

	 
	 <view class="rech-btn-con">
	 <view class="rech-btn" @click="widthDrawl" :class="btncol==1?'active':''">
	 	Withdrawal
	 </view>
	  </view>
	  
	  
	<view class="invite-more" v-show="invMore">
			<view class="invite-con">
			<view class="more-a" @click="goBouns">
				transactions record
			</view>
			<view class="more-a"  @click="goProRe">
				withdrawl record
			</view>
			<view class="more-a"  @click="gow">
				withdrawl
			</view>
						</view>
						<view class="invite-con2">
							<view class="more-a" @click="invMore=false,msShow=false">
								cancel
							</view>
						</view>
		</view>
	  <view class="msg-box-bg"  v-show="invMore">
	</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import cont from "@/components/navigation/navigation.vue"
	import md5 from 'js-md5'
	export default{
		data(){
			return{
			   withdrawConfig:[],
			   show: false,
			   content: '',
			   password:'',
			   tranAmt:'',
			   mobile:'',
			   fee:'',
			   trueMoney:'',
			   btncol:0,
			    invMore:false,
				}
			},
		
		onLoad() {
			this.mobile=uni.getStorageSync('loginMobile');
			uni.request({
				url: '/start/api/withdraw/withdrawConfig',
				data: {
					"ticket": uni.getStorageSync('logInfo').data,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
				},
				method: 'POST', //请求方式  或GET，必须为大写
				success: (res) => {		
					this.withdrawConfig=res.data.data;
					this.content=this.withdrawConfig.tips;
					console.log(res.data,8880);
					console.log(this.withdrawConfig,9990);
					this.show=true;
				},
				fail: (res) => {
					console.log(res.data);
				}
			});
		
	
		},
		methods:{
			gow(){
				uni.reLaunch({
					url:'../index'
				})
			},
			goBouns(){
				uni.reLaunch({
					url:'./transactions/index'
				})
			},
			goProRe(){
				uni.reLaunch({
					url:'./withdrawlRecord/index'
				})
			},
			calulate(){
				this.fee=this.tranAmt*0.1;
				this.trueMoney=this.tranAmt-this.fee;
				this.btncol=1;
				if(this.tranAmt==''){
					this.btncol=0;
				}
			},
		   open(){
			   this.show=true;
		   },
		   widthDrawl(){
			   if(this.mobile==''){
			   	uni.showToast({
			   		title: 'Please input mobile phone number',
			   		 icon: 'none',
			   		duration: 1500
			   	})
			   	return;
			   }
			   var a= /^[0-9]{4,14}$/;
			   if(!a.test(this.mobile)){
			   uni.showToast({
			   	title: 'Wrong format of mobile phone number',
			   	 icon: 'none',
			   	duration: 1500
			   })
			   return;
			   }
			   // 	if (this.password == '') {
			   // 		uni.showToast({
			   // 			title: 'password is empty',
			   // 			icon: 'none',
			   // 			duration: 1500
			   // 		})
			   // 		return;
			   // 	}
			   // var a= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/;
			   // if(!a.test(this.password)){
			   // 	uni.showToast({
			   // 		title: 'Incorrect password format,a password requires a combination of numbers and letters',
			   // 		icon: 'none',
			   // 		duration: 1500
			   // 	})
			   // 	return;
			   // }
			   
			   // if(this.tranAmt<withdrawConfig.withdraw_min_amt){
				  //  uni.showToast({
				  //  	title: 'The withdrawal amount cannot be less than the minimum withdrawal amount',
				  //  	icon: 'none',
				  //  	duration: 1500
				  //  })
				  //  return;
			   // }
			   
			   // if(this.tranAmt<withdrawConfig.withdraw_max_amt){
			   // 				   uni.showToast({
			   // 				   	title: 'The withdrawal amount cannot be greater than the maximum withdrawal amount',
			   // 				   	icon: 'none',
			   // 				   	duration: 1500
			   // 				   })
			   // 				   return;
			   // }
			   
			   
			   
			   
			   
			   uni.request({
			   	url: '/start/api/withdraw/withdraw',
			   	data: {
			   		"ticket": uni.getStorageSync('logInfo').data,
					// 'password': md5(this.password),
					"tranAmt":this.tranAmt,
			   	},
			   	header: {
			   		'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
			   	},
			   	method: 'POST', //请求方式  或GET，必须为大写
			   	success: (res) => {
					if(res.data.success==true){
						uni.showToast({
							title: res.data.errMsg,
							 icon: 'none',
							duration: 1500
						})
						uni.request({
							url: '/start/api/withdraw/withdrawServiceCharge',
							data: {
								"ticket": uni.getStorageSync('logInfo').data,
											// 'password': md5(this.password),
											"tranAmt":this.tranAmt,
											"ticket":uni.getStorageSync('MyInfo').data,
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
							},
							method: 'POST', //请求方式  或GET，必须为大写
							success: (res) => {
									
								console.log(res.data,'45464654646446');
							},
							fail: (res) => {
								uni.showToast({
									title: res.data.errMsg,
									 icon: 'none',
									duration: 1500
								})
							}
						});
					}else{
						uni.showToast({
							title: 'Withdrawal failed',
							 icon: 'none',
							duration: 1500
						})
					}
			   		console.log(res.data);
			   	},
			   	fail: (res) => {
			   		uni.showToast({
			   			title: res.data.errMsg,
			   			 icon: 'none',
			   			duration: 1500
			   		})
			   	}
			   });
		   }
				
		},
		
	}
</script>

<style>
@import './index.css';
</style>
