<template>
	<view class="content">
		<view class="block" v-if="banks.length > 0">
			<view class="bank">
				<!-- <view class="block-title">到账<text>{{type == 1 ? '本人': '非本人'}}</text>银行卡</view> -->
				<view class="bank-tabs">
					<view class="item" :class="{'active': type == 1}" @click="onTypeTab(1)">本人银行卡</view>
					<view class="item" :class="{'active': type == 2}" @click="onTypeTab(2)">非本人银行卡</view>
				</view>
				<view class="bank-input">
					<label>开户银行</label>
					<picker class="banks-picker" :range="banks" range-key="name" :value="bankVal" @change="bankVal = $event.detail.value" :disabled="isDisabled" >
						<view class="banks-text" :class="{'gray': bankVal === 0}">{{banks[bankVal].name}}<uni-icons class="banks-icon" type="bottom" size="18" color="gray"></uni-icons></view>
					</picker>
				</view>
				<view class="bank-input">
					<label>银行卡号</label>
					<input type="number" placeholder="输入银行卡号" maxlength="20" v-model="bankNo" :disabled="isDisabled">
				</view>
				<view class="bank-input">
					<label>预留手机号</label>
					<input type="number" placeholder="输入银行开户预留手机号" maxlength="11" v-model="mobile" :disabled="isDisabled">
				</view>
				<view class="bank-input">
					<label>持卡人姓名</label>
					<input type="text" placeholder="输入开户人真实姓名" maxlength="15" :disabled="isDisabled || type == 1" v-model="name">
				</view>
				<view class="bank-input" v-if="type === 2">
					<label>身份证号</label>
					<input type="idcard" placeholder="输入开户人身份证号" maxlength="18" v-model="idcard" :disabled="isDisabled">
				</view>
			</view>
			<view class="cny">
				<view class="bank-from">
					<view class="block-title">提现金额</view>
					<view class="title"><text v-if="min >= 1">最小提现金额：{{min}}元，</text><text>提现手续费{{rate}}%</text></view>
					<view class="input">
						<label>￥</label>
						<input placeholder="0.00" type="number" v-model="amount" />
					</view>
					<view class="balance" v-if="!greater">当前账户余额{{balance}}<text @click="amount = balance">全部提现</text></view>
					<view class="balance red" v-else>输入金额超过账户余额</view>
				</view>
				<button class="cny-btn" :disabled="greater" @click="onSubmit">申请提现</button>
			</view>
		</view>
		<!-- 提现提醒 -->
		<view class="withdraws-hint">后台提现管理时间 上午11:00-12:00 下午17:00-18:00</view>
	</view>
</template>
<script>
	import { withdrawsCreate, withdraws } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				type		: 1,
				banks		: [],
				bankVal 	: 0,
				bankNo		: '',
				mobile		: '',
				name		: '',
				idcard		: '',
				identity	: {
					name		: '',
					id_card_no	: '' 
				},
				amount		: '',
				min			: 0,
				rate		: 0,
				balance		: '0.00',
				isDisabled	: false,
				
			};
		},
		computed: {
			greater(){
				return parseFloat(this.amount) > parseFloat(this.balance)
			}
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			withdrawsCreate().then(res => {
				let { bank, tax, min, balance, banks, id_card, has_bank} = res;
				
				this.rate 	  	= tax
				this.min  	  	= min
				this.balance  	= balance
				this.banks    	= [ { id: '', name: '请选择开户银行'}, ...banks ]
				this.identity 	= id_card
				this.type	  	= bank.message_type
				this.isDisabled	= has_bank
				
				this.name		= id_card.name
				this.idcard		= id_card.id_card_no
				if(has_bank){
					let bankIndex = this.banks.findIndex(val => val.name === bank.bank_name)
					
					this.bankNo	 	= bank.bank_no
					this.mobile	 	= bank.mobile
					this.bankVal 	= bankIndex >= 0 ? bankIndex : 0
				}
		
				uni.hideLoading()
			}).catch(err => {
				uni.showModal({
					content		: err.message,
					showCancel	: false,
					success		: ModalRes => {
						if(ModalRes.confirm){
							this.$Router.back()
						}
					}
				})
			})
		},
		methods: {
			onTypeTab(type){
				if(type == this.type) return
				if(this.isDisabled){
					uni.showToast({
						title: "银行卡信息已绑定，如需变更请联系系统管理员",
						icon : "none"
					})
					return
				}
				
				if(type == 1){
					this.name 	= this.identity.name
					this.idcard	= this.identity.id_card_no
				}else{
					this.name 	= ''
					this.idcard	= ''
				}
				this.type = type
			},
			onSubmit(){
				if(this.bankVal === 0){
					uni.showToast({
						title: '请选择开户银行',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask : true
				})
				withdraws({
					bank_name	: this.banks[this.bankVal].name,
					amount		: this.amount,
					name  		: this.name,
					mobileNo	: this.mobile,
					bank_no		: this.bankNo,
					id_card		: this.idcard,
					message_type: this.type,
				}).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						success		: ModalRes => {
							if(ModalRes.confirm){
								this.$Router.back()
							}
						}
					})
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>
<style lang="scss">
	.content{
		padding: 30rpx;
	}
	.withdraws-hint{
		padding: 30rpx;
		font-size: 30rpx;
		color: gray;
	}
	.block{
		background: white;
		.block-title{
			font-size: 30rpx;
			color: gray;
			line-height: 50rpx;
			text{
				color: $main-color;
				margin: 0 5rpx;
			}
		}
		.bank{
			background: #fdfdfd;
			padding: 50rpx;
			.bank-tabs{
				@extend .border-solid;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				line-height: 100rpx;
				.item{
					width: 50%;
					text-align: center;
					font-size: 30rpx;
					&.active{
						color: $main-color;
					}
				}
			}
			.bank-input{
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				@extend .border-solid;
				label{
					width: 200rpx;
					color: #333;
				}
				input{
					font-size: 30rpx;
					width: calc(100% - 200rpx);
					height: 100rpx;
					vertical-align: top;
					text-align: right;
				}
				.banks-picker{
					font-size: 30rpx;
					width: calc(100% - 200rpx);
					text-align: right;
					.banks-text{
						&.gray{
							color: gray;
						}
						.banks-icon{
							vertical-align: middle;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.cny{
			padding: 50rpx;
			.cny-btn{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				background: $main-color;
				color: white;
				font-size: 34rpx;
				margin-top: 50rpx;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .7;
				}
			}
			// 提现
			.bank-from{
				background: white;
				border-radius: 10rpx;
				.title{
					padding-bottom: 20rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #333;
					text{
						font-size: 90%;
						color: gray;
					}
				}
				.input{
					display: flex;
					@extend .border-solid;
					font-size: 60rpx;
					height: 120rpx;
					line-height: 120rpx;
					font-weight: 500;
					font-family: Arial, Helvetica, sans-serif;
					input{
						flex: 1;
						height: 120rpx;
						padding: 0;
						margin: 0;
						font-size: 70rpx;
					}
				}
				.balance{
					font-size: 28rpx;
					line-height: 60rpx;
					padding-top: 20rpx;
					text{
						color: $main-color;
						margin-left: 10rpx;
					}
					&.red{
						color: $text-price;
					}
				}
			}
		}
	}
</style>