<template>
	<view>
		<view class="accounmt">
			<div  class="applydraw">
			    <p><span style="font-size:16px;color: #000000FF;font-weight: bold;">转出到</span></p>
				<p style="font-size:13px;color: #808080FF;margin:8px 0 13px 0"><span >请选择余额转出到哪里</span></p>
			    <u-input style="width:100%;"  v-model="Withdrawalform.withdraw" type="select"  @click="psytypeshow = true" placeholder='选择添加类型' />
			    <u-select v-model="psytypeshow"  :list="payList"  @confirm="paychange" mode="mutil-column-auto" ></u-select>
				
				<!-- 支付宝 -->
				<block v-if="Withdrawalform.withdraw == '支付宝' && accountdata.alipay">
					<view style="height: 20rpx;"></view>
					<u-input :value="`${accountdata.alipay}(${accountdata.name})`"  disabled ></u-input>
				</block>
				<!-- 银行卡 -->
				<block v-if="Withdrawalform.withdraw == '银行卡' && accountdata.bankAccount">
					<view style="height: 20rpx;"></view>
					<u-input :value="`${accountdata.bankAccount}(${accountdata.name})`"  disabled ></u-input>
					<view style="height: 20rpx;"></view>
					<u-input :value="accountdata.bankDeposit"  disabled ></u-input>
				</block>
				
				
			    <div style="border: 1px dashed #EBEBEB;margin: 20px 0;"></div>
			    <div style="display: flex;align-items: center;">
			        <p style="font-size:16px;color: #000000FF;font-weight: bold;">提现金额</p>
			        <!-- <i style="color:#FD5D5DFF;margin: 0 5px;" class="u-icon-warning"></i> -->
					
			    </div>
				<div style="margin:8px 0 13px 0">
					<u-icon name="info-circle-fill" size='26' color='#fd5d5dFF'></u-icon>
					<span style="font-size:13px;color: #808080FF;">提现金额将在7个工作日到账，请耐心等待</span>
				</div>
			    <u-input  v-model="Withdrawalform.recordAmount" style="width:500px" placeholder='请输入提现金额'></u-input>
			    <p style="font-size:14px;color: #4D4D4DFF;margin-top: 20px;"> 
			        <span>本次最大可提现金额</span>
			        <span style="color:#FD5D5DFF">{{ accountdata.availableBalance }}元</span>
			        <span></span>
			    </p>
			    <div style="border: 1px dashed #EBEBEB;margin: 20px 0;"></div>
			    <p>
			        <span style="font-size:16px;color: #000000FF;font-weight: bold;">交易密码</span>
			        
			    </p>
				<p v-if="!accountdata.password" style="font-size:13px;color: #808080FF;margin:8px 0 13px 0"><span >你还未设置交易密码，<text @click="goPassword" style="color:#358efa">去设置</text></span></p>
			    <u-input type="password" show-password auto-complete="new-password" v-model="Withdrawalform.password" placeholder='请输入交易密码'></u-input>
			    <div style="border: 1px dashed #EBEBEB;margin: 20px 0;width:"></div>
			    <p>
			        <span style="font-size:16px;color: #000000FF;font-weight: bold;">备注</span>
			       
			    </p>
				<p style="font-size:13px;color: #808080FF;margin:8px 0 13px 0"> <span >备注信息（非必需）</span></p>
				<div class="remak">
					
					<u-input type="textarea" auto-height="true" v-model="Withdrawalform.remark" />
				</div>
				<div class="addbtn">
				    <button class="applbtn" @click="Withdapply('applyfor')" 
					style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>提现申请</button>
				    <button class="applbtn" @click="Withdapply('cancel')" 
				    style="border: 1px solid #E0E0E0;background: #FFFFFF;color: #666666;">取消</button>
				</div>
			 </div>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { encrypt, decrypt } from '../../../utils/encrypt.js'
	export default {
		data() {
			return {
				psytypeshow:false,
				payList:[{value:'alipay',label:'支付宝'},{value:'bank',label:'银行卡'},],
				Withdrawalform:{withdraw:'支付宝',recordAmount:'',password:''},
				wxUserInfo:{},
				accountdata:{},
			}
		},
		onShow() {
			this.wxUserInfo = uni.getStorageSync('wxUserInfo');
			this.http.quickGet(`/mpay/my/account/${this.wxUserInfo.userId}`,true).then(res=>{
			    console.log('账户概览---',res)
			    this.accountdata=res.data
			})
		},
		methods: {
			goPassword() {
				uni.navigateTo({
					url: '/pages/personal/setup/tranpassword'
				})
			},
			paychange(e){
				if (e[0].label == '支付宝' && !this.accountdata.alipay) {
					return this.$refs.uToast.show(
						{
							type: 'default',
							title: "请先添加提现支付宝",
						}
					)
				}
				if (e[0].label == '银行卡' && !this.accountdata.bankAccount) {
					return this.$refs.uToast.show(
						{
							type: 'default',
							title: "请先添加提现银行卡",
						}
					)
				}
				this.Withdrawalform.withdraw=e[0].label
			},
			// 提现申请
			Withdapply(type){
			    if(type=='applyfor'){
			        // Withdrawalform:{withdraw:'alipay',recordAmount:'',password:''}
					if(!this.accountdata.password){
						uni.showToast({ title: '请先设置交易密码', icon: 'none', duration:1000 });
					    return;
					}
			        if(!this.Withdrawalform.recordAmount){
						uni.showToast({ title: '请输入提款金额', icon: 'none', duration:1000 });
			            return;
			        }
			        if (!/^[1-9]\d*$/.test(this.Withdrawalform.recordAmount)){
						uni.showToast({ title: '请输入数字', icon: 'none', duration:1000 });
			            return;
			        }
			        if(Number(this.Withdrawalform.recordAmount) > this.accountdata.availableBalance){
						uni.showToast({ title: '超出提现范围', icon: 'none', duration:1000 });
			            return;
			        }
			        if(!this.Withdrawalform.password){
						uni.showToast({ title: '请输入密码', icon: 'none', duration:1000 });
			            return;
			        }
			        if(this.Withdrawalform.password.length < 6){
						uni.showToast({ title: '密码少于6位', icon: 'none', duration:1000 });
			            return;
			        }
			        let data={
			                accountId:this.accountdata.accountId,
			                userId:this.wxUserInfo.userId,
			                withdraw:this.Withdrawalform.withdraw,
			                // password:this.Withdrawalform.password,
			                password:encrypt(this.Withdrawalform.password),
			                recordAmount:parseInt(this.Withdrawalform.recordAmount)
			            }
			            console.log('data---',data)
			            // return;
			            this.http.quickPost(`/mpay/account/withdraw`,data,true).then(res=>{
			                console.log('res---',res)
			                if(res.data.data.code==200){
								uni.showToast({ title: '提现申请成功', icon: 'none', duration:2000 });
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/personal/setup/accountoverview'
									})
								},1000)
							}else{
								uni.showToast({ title: res.data.data.msg, icon: 'none', duration:1000 });
			                }
			            })
			    }else{
			        uni.navigateTo({
			        	url:'/pages/personal/setup/accountoverview'
			        })
			    }
			}
		}
	}
</script>

<style>
	.accounmt{
		background: #FFFFFF;
		width:96vw;
		/* height:96vh; */
		margin:2vh auto;
		border-radius: 10px;
		padding:10px 13px; 
	}
	.applbtn{
		border-radius:50px;
		width:150px;
		height:40px;
		font-size: 18px;
		margin-right:20px;
		background: #909399;
		text-align: center;
		line-height: 40px;
		color: #FFFFFF;
	}
	.addbtn{
		display: flex;
		/* position: fixed; */
		/* bottom: 50px; */
		margin: 20px;
	}
	.u-input{
		padding: 0 10px!important;
		height:35px;
		border-radius: 4rpx;
		border: 1px solid #E6E6E6;
	}
	.remak .u-input{
		/* width:75vw; */
		height:100px;
		/* border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding-left: 10px!important;
		margin-top:70px */
	}

</style>
