<template>
<view class="page">
  <view class="group_1">
    <view class="box_2" v-if="mode==1">
      <view class="list_1">
        <view class="list-items_1-1">
			<view class="box_5-0" style="justify-content: space-between;" @click="banklistshow">
			  <text lines="1" class="text_5-0">提现方式</text>
			  <text lines="1" class="text_7-0">{{currentbank.name}}</text>
			  <img src="../../static/arr-r.png" class="image_7-0"/>
			</view>
			<view class="box_6-0">
			  <text lines="1" class="text_5-0">提现金额</text>
			</view>
			<view class="box_4-0">
			  <view>￥</view><view><input type="text" @input="moneyinput" placeholder="请输入提现金额" ></view>
			</view>
			<view class="box_6-0">
			   <text class="text_1-1">可提现金额</text>
			   <text class="text_1-2">￥{{userinfo.integral}}</text>
			   <view class="text_1-0">全部提现</view>
			 </view>
        </view>
      </view>
	  <view v-if="!btnenable" class="text-wrapper_1">
	    2小时到账，确认提现
	  </view>
	  <view v-else class="text-wrapper_1-1" @click="handon">
	    2小时到账，确认提现
	  </view>
    </view>
	<view v-if="mode==2">
		<view class="banklistfrm" >
			<view @click="chosebank(item)"  class="bankitem"  v-for="item in banklist">
				<view class="bankinfoshow">
					<view class="cardnum">{{item.name}}</view>
					<view>姓名：{{item.real_name}}</view>
				</view>
				<view class="btndelete">
					删除
				</view>
			</view>
		</view>
		<view @click="addbankcar" class="text-wrapper_1-1">添加银行卡</view>
	</view>
	<view v-if="mode==3" >
		<view class="addbankfrm">
			<view class="line-bot"><view class="ab_tit">卡号</view><view><input v-model="addinfo.account" placeholder="请输入银行卡号" type="text"></view></view>
			<view class="line-bot"><view class="ab_tit">姓名</view><view><input v-model="addinfo.real_name" placeholder="请输入姓名" type="text"></view></view>
			<view class="line-bot"><view class="ab_tit">开户行</view><view><input v-model="addinfo.account_bank" placeholder="请输入开户行" type="text"></view></view>
			<view><view class="ab_tit">银行</view><view><input v-model="addinfo.name" placeholder="请输入所属银行" type="text"></view></view>
		</view>
		<view class="text-wrapper_1-1" @click="bankhandon">
		  确认添加
		</view>
	</view>
  </view>
</view>
</template>

<script>
import * as UserApi from '@/api/user'

  export default {
    components: {
     
    },


    data() {
      return {
       userinfo:[],
	   btnenable:false,
	   cashval:0,
	   banklist:[],
	   mode:1,
	   addinfo:[],
	   currbank:[],
	   currentbank:[]
      }
    },

	onShow()
	{
		this.getpagedata();
		
		
	},

    methods: {
		chosebank(selectbank)
		{
			this.currentbank = selectbank;
			this.mode=1;
			
		},
		banklistshow()
		{
			this.mode=2;
		},
		bankhandon(){
			const app = this;
			if(!app.addinfo.account||app.addinfo.account=='')
			{
				this.$toast('请输入卡号');
				return false;
			}
			
			if(!app.addinfo.name||app.addinfo.name=='')
			{
				this.$toast('请输入所属银行');
				return false;
			}
			
			if(!app.addinfo.account_bank||app.addinfo.account_bank=='')
			{
				this.$toast('请输入开户行');
				return false;
			}
			
			if(!app.addinfo.real_name||app.addinfo.real_name=='')
			{
				this.$toast('请输入姓名');
				return false;
			}
			

			UserApi.addBank(
			{
				name:app.addinfo.name,
				real_name:app.addinfo.real_name,
				account:app.addinfo.account,
				account_bank:app.addinfo.account_bank
			})
			  .then(result => {
				 console.log(result);
				if(result.code==200)
				{
					this.$toast('添加成功');
					app.getpagedata();
					app.mode=1;
				}
				 else
				 {
					 this.$toast('添加失败，请稍后重试');
				 }
				
			  })
		},
		addbankcar()
		{
			this.mode=3;
		},
		moneyinput(e)
		{
			this.cashval = e.target.value;
			if(this.cashval!='')
			{
				this.btnenable=true;
			}
			else
			{
				this.btnenable=false;
			}
		},
		getpagedata()
		{
			this.getUserInfo();
			this.getBankInfo();
		},
		getUserInfo() {
		  const app = this;
		  UserApi.info()
		    .then(result => {
		  	 console.log(result);
		      app.userinfo = result.data;
		  	 
		  	
		    })
		},
		getBankInfo() {
		  const app = this; 
		  UserApi.bankList()
		    .then(result => {
		  	 
		  	 if(result.data.length ==0)
			 {
				app.mode=2; 
				 console.log(result.data);
			 }
			 else
			 {
				 app.banklist= result.data;
				 if(app.banklist.length>0)
				 {
					 app.currentbank = result.data[0];
				 }
				 
			 }
		    })
		},

		handon()
		{
			var app = this;
			
			if(this.cashval>app.userinfo.integral)
			{
				 this.$toast('积分不足');
				return false;
			}
			
			
			if(this.cashval>0)
			{
				app.btnenable= false;
				
				UserApi.withdrawal({integral:app.cashval,bank_id:app.currentbank.bank_id})
				  .then(result => {
					 console.log(result);
					 
					 if(result.code==200)
					 {
						 app.cashval = '';
						 this.$toast('提现成功');
						 
						 setTimeout(function() {
						   app.$navTo('pages/user/user');
						 }, 500);
					 }
					 else
					 {
						 this.$toast(result.msg);
					 }
					
				  })
			}
			
			
			
		},


      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta = 1) {
        uni.redirectTo({url:'/pages/user/index'
        	
        })
      },
	  
	  
	  
	  
	  /**
	   * AUTHOR: 单乘风
	   * DESC: 输入框输入事件 
	   * */
	  codeNumInputFun(e) {
	  	let val = e.detail.value
	  	this.code = val
	  	if (val.length == this.strlen) this.isCode = false
	  	else this.isCode = true
	  },
	  /**
	   * AUTHOR: 单乘风
	   * DESC: 输入框失去焦点事件 
	   * */
	  codeNumBlurFun(e) {
	  	let val = e.detail.value
	  	this.focus = false
	   if (val.length == this.strlen) this.isCode = false
	  	else this.isCode = true
	  },
	  /**
	   * AUTHOR: 单乘风
	   * DESC: 输入框点击事件
	   * @param {Number} index 当前点击框索引
	   * */
	  codefocusFun(index) {
	  	this.focus = true
	  },

    }
  }
</script>

<style lang="scss" scoped>
	.line-bot
	{
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	
	.banklistfrm
	{

		
		margin-top: 30rpx;
	}
	
	.bankitem
	{
		margin:20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		
	}
	
	.bankinfoshow
	{
		width: 100%;
		padding: 0 30rpx;
	}

	.bankinfoshow>view
	{
		padding:20rpx 0;
	}
	
	
	.banklistfrm>view
	{
		display: flex;
		padding:30rpx 0;
		margin:20rpx;
		align-items: center;
	}
	
	.cardnum
	{
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.btndelete
	{
		white-space: nowrap; font-size: 30rpx; font-weight: bold;color:crimson; padding:0 30rpx;
		text-decoration: underline;
	}

	.addbankfrm
	{
		margin:20rpx 30rpx;
		background-color: #fff;
		
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
	
	
	.addbankfrm>view
	{
		display: flex;
		padding:30rpx 0;
		
	}
	
	
	.addbankfrm input
	{
		width: 100%;
		
	}
	
	.ab_tit
	{
		font-size: 30rpx;
		font-weight: bold;
		text-align: right;
		color:#999;
		width: 100rpx;
		margin-right: 20rpx;
		
	}
  .page {
    background-color: #efefef;
    position: relative;
    width: 750rpx;
    height: 1642rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .group_1 {
    width: 750rpx;
    height: 100vh;
    background-color: #efefef;
    display: flex;
    flex-direction: column;
  }
  
  .box_2 {
    width: 750rpx;
    margin-bottom: 1rpx;
    display: flex;
    flex-direction: column;
  }
  
  .image_4 {
    width: 337rpx;
    height: 337rpx;
    margin: 61rpx auto 0 auto;
  }
  .list_1 {
    width: 702rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 26rpx 0 0 29rpx;
  }
  .list-items_1-0 {
    background-color: rgba(255,255,255,1.000000);
    border-radius: 30rpx;
    position: relative;
    width: 702rpx;
    margin-bottom: 26rpx;
    display: flex;
    flex-direction: column;
  }
  .box_3-0 {
    background-color: rgba(255,255,255,1.000000);
    border-radius: 50%;
    width: 110rpx;
    height: 110rpx;
    border: 1px solid rgba(234,234,234,1);
    display: flex;
    flex-direction: column;
	margin: 30rpx auto 0 auto;
  }
  .box_5-0 {
    width: 660rpx;
    height: 106rpx;
    flex-direction: row;
    display: flex;
    margin: 10rpx auto 0 auto;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	align-items: center;
	position: relative;
  }
  
  .box_4-0 {
    width: 660rpx;
    height: 106rpx;
    flex-direction: row;
    display: flex;
    margin: 10rpx auto 0 auto;
  	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  	align-items: center;
  	position: relative;
  }
  
  .box_4-0 view
  {
	  font-size: 36rpx;
	  font-family: PingFang;
	  font-weight: 500;
	  color: #333333;
  }
  
    .box_4-0 input
	{
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #999999;
		margin-left: 20rpx;
		padding-left: 18rpx;
	}
  
  .text_5-0 {
    width: 175rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color:#999;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
  }
  .text_6-0 {
    width: 194rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    color: rgba(51,51,51,1);
  }
  .image_7-0 {
    width: 13rpx;
    height: 22rpx;
    position: absolute;
	top:44rpx;
	right: 0;
  }
  
  .text_1-1
  {
  	  font-size: 30rpx;
  	  font-family: PingFang;
  	  font-weight: 500;
  	  color: #333333;
  }
  
  .text_1-2
  {
  	  font-size: 30rpx;
  	  font-family: PingFang;
  	  font-weight: 500;
  	  color:   #01803D;
	  margin-left: 10rpx;
  }
  
  

  
  
  
  .text_1-0
  {
	  position: absolute;
	  top:40rpx;
	  right: 0;
	  font-size: 30rpx;
	  font-family: PingFang;
	  font-weight: 500;
	  color: #01803D;
  }
  
  .input_text
  {
	font-size: 28rpx;
	
  }
  
    .uni-input-placeholder
	{
		color:#DBDBDB;
	}
  
  .box_6-0 {
    width: 660rpx;
    height: 106rpx;
    flex-direction: row;
    display: flex;
    margin: 10rpx auto 0 auto;
    align-items: center;
	position: relative;
  }
  
  

  
  .text_7-0 {
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(51,51,51,1);
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
	margin-right: 20rpx;
  }
  .text_8-0 {
    width: 250rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 2rpx 0 0 65rpx;
    color: rgba(51,51,51,1);
  }
  .image_9-0 {
    width: 13rpx;
    height: 22rpx;
    margin: 1rpx 0 0 330rpx;
  }
  .list-items_1-1 {
    background-color: rgba(255,255,255,1.000000);
    border-radius: 30rpx;
    position: relative;
    width: 702rpx;
    margin-bottom: 26rpx;
    display: flex;
    flex-direction: column;
  }
  .box_4-1 {
    position: absolute;
    left: 23rpx;
    top: 79rpx;
    width: 659rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
  }
  .text_3-1 {
    width: 79rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(51,51,51,1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
  }
  .text_4-1 {
    width: 165rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(219,219,219,1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin-left: 64rpx;
  }
  .image_5-1 {
    width: 13rpx;
    height: 22rpx;
    margin: 2rpx 0 0 338rpx;
  }
  .image_6-1 {
    position: absolute;
    left: 20rpx;
    top: 146rpx;
    width: 662rpx;
    height: 1rpx;
  }
  .box_5-1 {
    width: 660rpx;
    height: 26rpx;
    flex-direction: row;
    display: flex;
    margin: 190rpx 0 0 22rpx;
  }
  .text_5-1 {
    width: 82rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(51,51,51,1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
  }
  .text_6-1 {
    width: 194rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin-left: 91rpx;
    color: rgba(219,219,219,1);
  }
  .image_7-1 {
    width: 13rpx;
    height: 22rpx;
    margin: 1rpx 0 0 365rpx;
  }
  .image_8-1 {
    width: 662rpx;
    height: 1rpx;
    margin: 40rpx 0 0 20rpx;
  }
  .box_6-1 {
    width: 661rpx;
    height: 26rpx;
    flex-direction: row;
    display: flex;
    margin: 40rpx 0 41rpx 21rpx;
  }
  .text_7-1 {
    width: 110rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(51,51,51,1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
  }
  .text_8-1 {
    width: 250rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 2rpx 0 0 65rpx;
    color: rgba(219,219,219,1);
  }
  .image_9-1 {
    width: 13rpx;
    height: 22rpx;
    margin: 1rpx 0 0 330rpx;
  }
  .text-wrapper_1,.text-wrapper_1-1 {
    width: 702rpx;
    height: 98rpx;
    background: #CCCCCC;
    border-radius: 49rpx;
	font-size: 34rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #FFFFFF;
	margin: 70rpx auto;
	line-height: 98rpx;
	text-align: center;
  }
  
  .text-wrapper_1-1
  {
  	  background-color: #01803D;
  }

</style>
