<template>
	<view class="content">
		<navigation>
			withdrawal
			<view class="bread" slot="bread">
				<image src="../../../static/promo/nav_icon_more@2x.png" mode="aspectFit"
					@click="goWithRecord()"></image>
			</view>
		</navigation>
		<view class="rech-body">
			<view class="pro-body-p1">Balance:<span data-v-642729fd=""
					class="category-sigh">{{currencySymbol}}{{currentBalance}}</span><span class="s1"></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">
				{{currencySymbol}}
				</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: {{currencySymbol}}{{this.fee}}, TO ACCOUNT: {{currencySymbol}}{{this.trueMoney}}
				</view>
				<view class="minnum">
					MINIMUM WITHDRAWAL AMOUNT: {{currencySymbol}}{{withdrawConfig.withdraw_limit_min}}
				</view>
			</view>
			  <view class="rech-capy">
	   		<view class="capy">
	   		<image src="../../../static/login/icon_hook@2x.png" mode="aspectFit" class="img1"></image>	 BANK CARD
	   		</view>
	   </view>
		<!-- 	<view class="rech-input-con">
				<view class="input-item flex" style="height: auto;">
					<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"
						placeholder-style="color: #BFC2CCFF;font-size:14px;" />		
				</view>
			
			</view> -->
      <view class="xiala_con" :class="fujiNum==1?'activeErji':''" v-if="BankValue">
      	<view class="fuji " @click="fuji()">
      		<image src="../../../static/login/list_icon_card@2x.png" mode="aspectFit" class="img1"></image>
			<text class="text1">
				{{nameOne}}：{{cardOne}}  
			</text>
			<text class="text2">
				Select
				<image src="../../../static/color/loading_icon_ins@3x(18).png" mode="aspectFit"  class="img2"></image>
			</text>
      	</view>
		<view class="erji">
			<view class="item" v-for="item,index in itemList" :key="index" :class="index==itemActive?'item-active':''" @click="toCardOne(item.id,item.acctName,item.acctId,index)">
			<text v-if="index==0?true:false">My Card：</text>
			<text v-if="index!=0?true:false">Card{{index+1}}：</text>
				{{item.acctId}}
			</view>
			<view class="item" @click="goAddBankCard()" >
				Add Bank Card
			</view>
		</view>
      </view>
       
	   <view class="longey_item" @click="goAddBankCard()" v-if="BankValue==false">
		   <image src="../../../static/bankCard/list_icon_card_add@3x.png" mode="aspectFit" class="img1"></image>
	   <text class="text1" @click="goAddBankCard()" >Add Bank Card</text>	
	   </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"
	   		placeholder-style="color: #BFC2CCFF;font-size:14px;" v-model="password"  style="height: 50px;" />
	   </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>
		<tab-bar :selectActive="5"></tab-bar>
	</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 {
				// 银行卡主键id 提现用
				cid:-1,
				// 判断是否有银行卡列表返回
				BankValue:false,
				// 判断选择卡的数字
				itemActive:0,
				// 第一张卡
				cardOne:'',
				// 第一张卡的名字
				nameOne:'',
				currencySymbol:'',
				fujiNum:-1,
				i:0,
				// 银行卡信息列表
		
				itemList:[],
				currentBalance: 0.00,
				withdrawConfig: [],
				show: false,
				content: '',
				password: '',
				tranAmt: '',
				mobile: '',
				fee: 0.00,
				trueMoney: 0.00,
				btncol: 0,
				invMore: false,
			}
		},

		onLoad() {
			this.currencySymbol=uni.getStorageSync('siteInfo').currencySymbol;
			this.currentBalance = uni.getStorageSync('currentBalance');
			this.currentBalance=parseFloat(this.currentBalance).toFixed(2)
			this.mobile = uni.getStorageSync('loginMobile');
            this.init();
			this.calulate()
		},
		methods: {
			ba(){
				//更新余额
				const post3 = api.withdrawConfig({
					"ticket": uni.getStorageSync('logInfo').data,
				})
				post3.then(res=>{
				
				res.data.currentBalance= parseFloat(res.data.currentBalance).toFixed(2)
				this.currentBalance=res.data.currentBalance;
					uni.setStorage({
						key: 'currentBalance',
						data: res.data.balance,
						success: function() {
							console.log('success')
						}
					});
				})
			},
			goWithRecord(){
				uni.navigateTo({
					url:'withdrawlRecord/index'
				})
			},
			// 赋值给第一张卡
			toCardOne(a,b,i,d){
				this.itemActive=d;
				this.cardOne=i;
				this.nameOne=b;
				this.cid=d;
			},
			goGoodsDetail(i){
				uni.navigateTo({
					url:'goodsDetail/index?id='+i
				})
			},
			goAddBankCard(){
				uni.navigateTo({
					url:'../bankCard/addBankCard/index?wid='+'widthdrawl'
				})
			},
			// 判断下拉函数
			fuji(){
				this.fujiNum=1;
				this.i++;
				if(this.i%2==0){
					this.i=0;
					this.fujiNum=-1;
				}
			},
			init(){
				const post2 = api.withdrawConfig({
					"ticket": uni.getStorageSync('logInfo').data,
				})
				post2.then(res => {
						this.withdrawConfig = res.data;
						this.withdrawConfig.withdraw_limit_min=parseFloat(this.withdrawConfig.withdraw_limit_min).toFixed(2)
						this.content = this.withdrawConfig.tips;
						this.show = true;
				
					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
					// 获取用户银行卡信息
				const post = api.bankcardList({
							"ticket": uni.getStorageSync('logInfo').data,
						})
						post.then(res => {
							if(res.data.length!=0){						
								this.BankValue=true;
								this.cardOne=res.data[0].acctId
								this.nameOne=res.data[0].acctName
								this.cid=res.data[0].id;
							    this.itemList=res.data;
								 
								
							}else{
								this.BankValue=false;
							}
						
							})
							.catch(e => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 2500
								})
							})
			},
			gow() {
				uni.navigateTo({
					url: '../index'
				})
			},
			goBouns() {
				uni.navigateTo({
					url: './transactions/index'
				})
			},
			goProRe() {
				uni.navigateTo({
					url: './withdrawlRecord/index'
				})
			},
			calulate() {
				this.fee = this.tranAmt * 0.1;
				this.fee = parseFloat(this.fee).toFixed(2)
				this.trueMoney = this.tranAmt - this.fee;
				this.trueMoney= parseFloat(this.trueMoney).toFixed(2)
				this.btncol = 1;
				if (this.tranAmt == '') {
					this.btncol = 0;
				}
			},
			open() {
				this.show = true;
			},
			widthDrawl() {
				uni.showLoading({
					title: 'loading'
				});
				if (this.tranAmt == '') {
					uni.showToast({
						title: 'Please enter the withdrawal amount',
						icon: 'none',
						duration: 1500
					})
					return;
				}




				const post2 = api.withdraw({
					"ticket": uni.getStorageSync('logInfo').data,
					'password': md5(this.password),
					'cardId':this.cid,
					"tranAmt": this.tranAmt,
				})
				post2.then(res => {
						if (res.success == true) {
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 1500
							})
                              this.ba();
							const post = api.withdrawServiceCharge({
								"ticket": uni.getStorageSync('logInfo').data,
								// 'password': md5(this.password),
								"tranAmt": this.tranAmt,
							})
							post.then(res => {

								})
								.catch(e => {
									uni.showToast({
										title: e,
										icon: 'none',
										duration: 2500
									})
								})
						} else {
							uni.showToast({
								title: 'Withdrawal failed',
								icon: 'none',
								duration: 1500
							})
						}

					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})

			}

		},

	}
</script>

<style scoped lang="scss">
	@import './index.css';
	/* #ifdef APP-PLUS  */
	.bread image{
		width: 28rpx;
		height: 24rpx;
		position: absolute;
		right: 36rpx;
		top: 60%;
		transform: translateY(-50%);
	}
	  /*  #endif   */
</style>
