<template>
	<!-- 商家端 用户端 都有用 要拆开来  -->
	<!-- （商家资金转出/提现） -->
	<!-- 商家资金转出/提现 -->
	<!-- 佣金提现页面 -->
	<!-- okkkk -->
	<view class="yjWithdraw yocode">
		<view class="yjhead">
			<view class="conmtentboxs">
				<view class="textifno">可提现佣金</view>
				<view v-if="type==0" class="money">{{userinfo.commission}}</view>
				<view v-if="type==1" class="money">{{userinfo.agent_brokerage}}</view>
				<view v-if="type==2" class="money">{{gold}}</view>
			</view>
		</view>
		<!-- 余额end -->
		
		<view class="yjtypetab flex">
			<view class="typeitem flex1"  :class="{active:tabactive==1}"  @tap="taggletab(1)" >
				<image class="imgs" src="/static/news/weiicon.png" mode=""></image>
				<view class="title " :class="{active:tabactive==1}" >提现到微信</view>
			</view>
			<!-- <view class="typeitem flex1" @tap="taggletab(2)" >
				<image class="imgs" src="/static/news/yueicon.png" mode=""></image>
				<view class="title" :class="{active:tabactive==2}">提现到余额</view>
			</view> -->
			<view class="typeitem flex1" :class="{active:tabactive==3}" @tap="taggletab(3)" >
				<image class="imgs" src="/static/news/cardicon.png" mode=""></image>
				<view class="title" :class="{active:tabactive==3}">提现到银行卡</view>
			</view>
		</view>
		
		<!-- 提现到银行卡 -->
		<view class="tocards" v-show="tabactive==3">
			<!-- 输入框 -->
			<view class="chindbox">
				<view class="heads flex ali-c jus-b">
					<view class="title">提现佣金</view>
					<view class="alltx" @tap="alltxs">全部提现</view>
				</view>
				
				<view class="moneybox flex ali-c">
					<view class="fuhao">￥</view>
					<input class="inputs" type="number" v-model="txsum" value="" placeholder-class="plclass" placeholder="0.00" />
				</view>
				
				<view class="titletow flex">
					<view class="tests">到账银行卡</view>
					<view class="textf">（必填项）</view>
				</view>
				
				<!-- 选择银行卡 -->
				<!-- 没有选择卡片 -->
				<view class="slesctCard flex ali-c jus-b" @tap="selcard" v-show="!selcarddata.id">
					<view class="title">请添加银行卡</view>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</view>
				
				<!-- 选择了卡片 -->
				<view class="slesctCard flex ali-c jus-b" v-if="selcarddata.id"  @tap="selcard">
					<view class="cardinfo flex ali-c">
						<image class="imgs" :src="uploadurl1+'/static/applet5/images/bank/logo/'+selcarddata.bank_code.toLowerCase()+'.png'" mode=""></image>
						<view class="card_right">
							<view class="titles">{{selcarddata.bank_name}}</view>
							<view class="numbers">尾号{{selcarddata.cardno}}储蓄卡</view>
						</view>
					</view>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</view>
				
			</view>
			
			<view class="psmsgs">
				温馨提示：单笔最少提现1000元，单笔最多提现5000 元；到账时间为T+1
			</view>
			
			<!-- 提交按钮 -->
			<view  class="submitbtn" :class="{active:activechind}" @tap="submittxfun">
				T+1到账，申请提现
			</view>
			
			
			<view class="understand flex flexc">
				
				
				
				<view @tap="gettijilu" class="flex ali-c">
					<text>查看提现记录</text>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</view>
				
				<!-- <navigator url="/pages/moneyLog/storeBill" hover-class="navigator-hover" class="flex ali-c">
					<text>店铺账单</text>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</navigator> -->
				
			</view>
			
			
		</view>
		<!-- 转到银行卡end -->
		

		
		<!-- 转到微信 -->
		<view class="tocards" v-show="tabactive==1">
			<!-- 输入框 -->
			<view class="chindbox">
				<view class="heads flex ali-c jus-b">
					<view class="title">提现佣金</view>
					<view class="alltx" @tap="alltxs">全部提现</view>
				</view>
				
				<view class="moneybox flex ali-c">
					<view class="fuhao">￥</view>
					<input class="inputs" type="number" v-model="txsum" value="" placeholder-class="plclass" placeholder="0.00" />
				</view>
				
				<view class="titletow flex">
					<view class="tests">真实姓名</view>
					<view class="textf">（必填项）</view>
				</view>
				
				<!-- 姓名输入框 -->
				<view class="nameinput">
					<input type="text"  value="" v-model="bank_realname" placeholder="请填写微信实名认证的真实姓名" placeholder-class="plclasss"  />
				</view>
				
			</view>
			
			<view class="psmsgs">
				温馨提示：提现到微信零钱预计两小时内到达,提现到银行卡正常到账时间为T+1，节假日顺延；提现时间为：8:00-21:00
			</view>
			
			<!-- 提交按钮 -->
			<view  class="submitbtn" :class="{active:activechind}" @tap="submittxfun" >
				T+1到账，申请提现
			</view>
			
			<!--  -->
			<view class="understand flex flexc">
				<!-- <view class="flex ali-c leftinfos"  @tap="tolj">
					<text>了解微信实名认证</text>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</view> -->
				
				
				<view @tap="gettijilu" class="flex ali-c">
					<text>查看提现记录</text>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</view>
				
				<!-- <navigator url="/pages/moneyLog/storeBill" hover-class="navigator-hover" class="flex ali-c">
					<text>店铺账单</text>
					<image class="imgs" src="/static/news/jiantous3.png" mode=""></image>
				</navigator> -->
				
			</view>
			
			
		</view>
		<!-- 转到微信 -->
		
		<!-- 密码输入弹窗 -->
		<best-payment-password :show="payFlag" :money="showmoney" :msg="msg" :forget="true" :value="paymentPwd" digits="6" @submit="checkPwd" @cancel="togglePayment"></best-payment-password>
		
		
		<VerifyIdentity ref="VerifyIdentity" v-model="userInfo.mobile" type="sms_withdraw" @fromSubmitfun="fromSubmitfun" ></VerifyIdentity>
		<!-- userinfo.mobile -->
		<!-- 验证身份组件 -->
		
		
		<eModal :visible.sync="visible" :animation='true'>
			<view class="eModalbox">
				<view class="names">验证码验证</view>
				<!-- <view class="names-min">*请勿必绑定手机号，否则将无法提现</view> -->
				<view class="inputboxitem flex">
					<view class="inputsview flex1">
						<!-- <input type="number" value="" v-model="mobile" class="inputs" placeholder="请输入手机号" /> -->
						<view class="">
							{{mobile}}
						</view>
					</view>
				</view>
				<view class="inputboxitem flex">
					<view class="inputsview flex1">
						<input type="number" value="" v-model="code" class="inputs" placeholder="请输入验证码" />
						<view v-if="!isdjs" class="sendcode" @tap="sendSmsfun">获取验证码</view>
						<view v-if="isdjs"  class="sendcode djs"  >{{times}}</view>
					</view>
				</view>
				<view class="submitbtn 111"  :class="{active:issubm}" @tap="cashUserFundFun">确认</view>
			</view>
		</eModal>
		<!-- 绑定手机号 -->
		
	</view>
</template>

<script>
	import bestPaymentPassword from '@/components/best-payment-password/best-payment-password.vue';
	// import {transferMoney,cashUserFund,userTransferMoney,cashBank}  from "@/utils/api/users_cash.js";
	// import { getUserCash, getUserInfo } from '@/utils/api/user.js';
	// import {cashBank} from "@/utils/api/users_cash.js";
	//userTransferMoney 佣金 资金 转余额
	//cashUserFund 提现
	
	import {cashUserFund,storeIndex,storeSendSms } from "@/utils/api/api.js";
	import VerifyIdentity from "@/components/VerifyIdentity/VerifyIdentity.vue";
	import eModal from "@/components/e-modal/e-modal.vue";
	
	export default {
		components:{
			bestPaymentPassword,
			VerifyIdentity,
			eModal,
		},
		data() {
			return {
				issubm:false,//忘记密码的表单提交状态 是否允许提交
				isdjs:false,//
				times:60,
				visible: false,
				code:"",//验证码
				smstype:'sms_withdraw',//验证码类型
				withdrawcount:'',//提现次数
				
				txsum:"",//提现的金额
				conts:"985.00",
				activechind:false,
				tabactive:1,
				
				//密码弹窗
				payFlag: false,
				showmoney:"",//显示弹窗输入支付密码的金额
				msg:"向好友xxx转账",
				paymentPwd: '' ,//可以写默认值
				
				type:"",//0佣金提现，1代理提现,2商家提现
				bank_realname:"",//证实姓名
				selcarddata:{},//选择的银行卡 跨页面选的
				userCount:{},//用户信息
				userinfo:{},
				deposit:100,//保证金
				gold:0,//可提现
				
				mobile:"",//手机号码 用户的
				params:{},
			};
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			uploadurl1(){
				return this.$store.state.uploadurl1;
			},
			// userinfo(){
			// 	return this.$store.state.userInfo;
			// }
			userInfo(){
				return this.$store.state.userInfo;
			}
		},
		onLoad(opdata){
			// 0 用户佣金 1是代理佣金 2是商家资金
			this.type =opdata.type;
			let title = "佣金提现";
			if(this.type==0){
				title = "佣金提现";
			}else if(this.type==1){
				title = "代理提现";
			}else if(this.type==2){
				title = "商家资金提现";
				this.deposit = opdata.deposit;//保证金
			}else{
				this.type = 0;
				title = "佣金提现";
			}
			
			
			if(opdata.tab){
				//切换
				this.tabactive = opdata.tab;
			}
			

			uni.setNavigationBarTitle({
				title
			})
			
			//this.cashBankFun();//获取默认银行卡
			
			
			this.bank_realname = this.userInfo.contact;//真实姓名
			
			
			
			// //测试组件
			// setTimeout(()=>{
			// 	this.$refs.VerifyIdentity.show();
			// },1000)
			
			
			
		},
		
		onShow(){
			this.getUserInfoFun();
			
			//取之前页面选的获取到的银行卡
			let selcarddata = uni.getStorageSync('selcard');
			if(selcarddata){
				this.selcarddata =selcarddata;
				this.selcarddata.cardno = this.selcarddata.cardno.slice(-4);
				//uni.removeStorageSync('selcard');//移除
				setTimeout(()=>{
					uni.removeStorageSync('selcard');//移除
				},1000)
			}
		},
		methods:{
			//发送验证码 忘记支付密码
			
			async sendSmsfun(){
				
				if(!/(^1[1-9][0-9]{9}$)/.test(this.mobile)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				let res =  await storeSendSms({
					mobile:this.mobile,
					smstype: this.smstype,
				});
				
				if(res.code==0 || true){
					this.$api.msg(res.msg);
					//发送成功
					this.isdjs = true;
					
					let iv  = setInterval(()=>{
						this.times--;
						if(this.times<=0){
							this.isdjs = false;
							clearInterval(iv);//结束
						}
					},1000)
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			
			//提交按钮控制
			VerificationFun(){
				if( this.code!="" && this.mobile!=""){
					this.issubm = true;
				}else{
					this.issubm = false;
				}
			},
			
			//验证身份提交方法
			fromSubmitfun(e){
				this.$refs.VerifyIdentity.cancel();//关闭
				let edata = e;//验证码数据
				delete edata.type;
				this.params =edata;
				this.cashUserFundFun(1);
				
			},
			//获取用户信息
			//获取余额信息
			async getUserInfoFun(){
				let res = await storeIndex({
				
				})
				
				if (res.code== 0) {
					// //
					// //this.userCount = res.data;
					// this.userinfo = res.data.info;
					// this.deposit = parseFloat(this.deposit).toFixed(2);//保证金 单位分
					// this.gold = this.userinfo.gold;//可提现
					// //计算可提现金额 计算一遍就可以了
					// if(parseFloat(this.gold - this.deposit)>0){
					// 	this.gold = parseFloat(this.gold - this.deposit);
					// 	this.gold = this.gold.toFixed(2);
					// }else{
					// 	this.gold = "0.00";
					// }
					
					this.gold = res.data.counts.gold;
					
					this.mobile = res.data.mobile;
					this.withdrawcount = res.data.withdrawcount;
					
				} else {
					this.$api.msg(res.code);
				}
			},
			//查看提现记录
			gettijilu(){

				uni.navigateTo({
					url:"/pages/user/record/record"
				})
			},
			//去选择银行卡的事件
			selcard(){
				uni.navigateTo({
				    url: '/pages/user/fenxiao/bankcard/bankcard?issel=1'
				});
			},
			//佣金提现事件 微信 和 银行卡
			async cashUserFundFun(iscode=0){
				this.visible= false
				let totype = ""
				
				if(this.tabactive==1){
					//微信
					totype = 1;
				}else if(this.tabactive==3){
					//银行卡
					totype = 2;
				}else {
					//默认的
					this.$api.msg("请选择提现类型");
					return false;
				}
				
				
				let can = {
					phone:this.mobile,
					code: this.code,
					type:this.type,//0佣金提现，1代理提现,2商家提现
					money:this.txsum,
					totype:totype,//1提现微信，2提现银行卡
					bank_realname:this.bank_realname,//实名认证真实姓名
					user_bank_id:this.selcarddata.id,//绑定的银行卡id （提现银行卡必填）
					paw_val:this.paymentPwd,
				};
				
				if(iscode==1){
					can = {...can,...this.params}
				}
				
				
				let res = await cashUserFund(can);
				
				this.paymentPwd = "";
				if(res.code==0){
					this.paymentPwd = "";
					
					if(this.tabactive==1){//微信
						uni.navigateTo({
						    url: `/pages/user/fenxiao/success/success?type=0&money=${this.txsum}&cartname=${this.selcarddata.bank_name}&cartrNumber=${this.selcarddata.cardno}`
						});
					}else if(this.tabactive==3){//银行卡
					
						let imgurls = this.uploadurl1+'/static/applet5/images/bank/logo/'+this.selcarddata.bank_code.toLowerCase()+'.png'
						uni.navigateTo({
						    url: `/pages/user/fenxiao/success/success?type=1&money=${this.txsum}&cartname=${this.selcarddata.bank_name}&cartrNumber=${this.selcarddata.cardno}&imgurl=${imgurls}`
						});
					}
					
				}else if(res.code==-8888){
					uni.showModal({
						title: '温馨提示',
						content: '您还未设置鹿马支付密码，请前往设置！',
						confirmText:"去设置",
						showCancel:false,
						success:  (res)=> {
						  if (res.confirm) {
							uni.navigateTo({
							  url: '/pages/setPassword/setPayPassword',
							})
						  }
						}
					})
				}
				else{
					this.paymentPwd = "";
					this.$api.msg(res.msg);
				}
				// this.mobile='';
				this.code='';
				this.txsum=''
			},
			//佣金提现 佣金提现方法 转到余额
			
			//全部提现
			alltxs(){
				if(this.type==0){
					this.txsum=this.userinfo.commission;
				}else if(this.type==1){
					this.txsum=this.userinfo.agent_brokerage;
				}else if(this.type==2){
					//this.txsum=this.userinfo.gold;
					//this.txsum=this.gold;//使用计算后的
					
					this.txsum = this.gold.replace(/,/g,'');//去除逗号

				}
				
				// <view v-if="type==0" class="money">{{userinfo.commission}}</view>
				// <view v-if="type==1" class="money">{{userinfo.agent_brokerage}}</view>
				// <view v-if="type==2" class="money">{{userinfo.gold}}</view>
			},
			//获取提现的默认银行卡 做了跳转获取 这个可以不用其实
			async cashBankFun(){
				let res = await cashBank({
					
				});
				if(res.code==0){
					if(res.data.bank.cardno){
						this.selcarddata = res.data.bank;
						this.selcarddata.cardno = this.selcarddata.cardno.slice(-4);
						this.bank_realname = this.selcarddata.realname;
					}
					
				}else{
					
				}
			},
			//tab切换
			taggletab(inds){
				this.tabactive = inds;
				if(inds==2){
					//切换到？
				}
			},
			tolj(){
				
				uni.navigateTo({
				    url: '/pages/RealNameCourse/RealNameCourse'
				});
			},
			//三个提现的地方提交按钮同一事件
			submittxfun(){
				
				if(this.txsum==""){
					this.$api.msg("提现金额不能为空");
				}
				
				if(!this.activechind){
					this.$api.msg("请填写后再提交");
					return false;
				}
				
				
				 let reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^[1-9]$)|(^\d\.[1-9]{1,2}$)|(^\d\.[0]{1}[1-9]{1}$|(^\d\.[1-9]{1}[0]{1}$)$)/;
				 let num = this.txsum;
				 if (reg.exec(num)) {
					if(this.tabactive==1){
					 	this.msg = "提现到微信";
					}else if(this.tabactive==2){
					 	this.msg = "提现到余额";
					}else{
					 	this.msg = "提现到银行卡";
					}
					this.showmoney= this.txsum;
					this.togglePayment();
					 
				 } else {
					this.$api.msg("您输入的金额有误~");
				 }
				
				
				
			},
			//密码输入
			togglePayment() {
				this.payFlag = !this.payFlag;
			},
			//密码输入完成后的事件
			checkPwd(e) {
				// 这里是写验证密码的业务逻辑,比如密码错误可以在这边清空
				this.paymentPwd = e;
				this.togglePayment();//关闭
				if(parseFloat(this.txsum)>500||this.withdrawcount!=0){
					this.visible= true
					}else{
						
						if(this.tabactive==1){
							//提现到微信
							// this.cashUserFundFun();
							this.$refs.VerifyIdentity.show();
						}else if(this.tabactive==2){
							//提现到余额
							//this.userTransferMoneyFun();
							
						}else if(this.tabactive==3){
							//提现到银行卡
							// this.cashUserFundFun();
							this.$refs.VerifyIdentity.show();
						}
				}
				// uni.navigateTo({
				//     url: '/pages/withdrawSucc/withdrawSucc'
				// });
				
				//处理提交支付密码事件
				
			},
			//检测按钮是否可以按
			jiancefun(){
				if(this.tabactive==1){
					//微信
					if(this.txsum !="" && this.bank_realname!=""){
						this.activechind = true;
					}else{
						this.activechind = false;
					}
					
				}
				
				if(this.tabactive==2){
					//余额
					if(this.txsum !=""){
						this.activechind = true;
					}else{
						this.activechind = false;
					}
				}
				
				if(this.tabactive==3 && this.selcarddata.id){
					//银行卡
					if(this.txsum !=""){
						this.activechind = true;
					}else{
						this.activechind = false;
					}
				}
				
			}
			
		},
		watch:{
			txsum(e){
				this.jiancefun();
			},
			bank_realname(){
				this.jiancefun();
			},
			selcarddata(){
				this.jiancefun();
			},
			code(){
				this.VerificationFun()
						},
		},
		
	}
</script>

<style lang="scss">
@import  "./yjWithdraw.scss";
.eModalbox{
		width: 100%;
		height: 40vh;
		padding: 40upx 40upx 0 40upx;
		.names{
			font-size:30upx;
			color:rgba(0,0,0,1);
			text-align: center;
			margin-bottom: 20upx;
		}
		.names-min{
			font-size:24upx;
			color:#ff6900;
			text-align: center;
			margin-bottom: 80upx;
		}
		.inputboxitem{
			height: 92upx;
			line-height: 92upx;
			border-bottom: 1px solid #E4E4E4;
			position: relative;
			.inputs{
				height: 92upx;
				line-height: 92upx;
				font-size:30upx;
				color:rgba(0,0,0,1);
			}
			.sendcode{
				width:184upx;
				height:68upx;
				line-height: 68upx;
				text-align: center;
				background:rgba(255,105,0,1);
				border-radius:4upx;
				color:#FFFFFF;
				
				font-size:30upx;
				position: absolute;
				z-index: 3;
				top:5px;
				right: 0;
			}
			.sendcode.djs{
				background: #b3b1af;
			}
		}
		
	
	}
	.submitbtn{
		margin: 60upx 24upx;
		height:88upx;
		line-height: 88upx;
		text-align: center;
		background:rgba(254,197,156,1);
		border-radius:6upx;
		font-size:32upx;
		color:rgba(255,255,255,1);
	}
	
	.submitbtn.active{
		background: #FF6900;
	}
	
</style>
