<template>
	<view class="page full-height-with-titile">
		<view class="page container-with-lines full-height-with-titile" v-if="!showResult">
			<!-- 主内容区域 -->
			<view class="content" @click="hideKeyboard">
				<!-- 收款账户 -->
				<view class="bank-card">
					<view class="amount-header">
						<text class="section-title">{{languageData.account.reciAcc}}</text>
					</view>
					<view style="border-bottom: 1px solid #eee; height: 2.75em;">
						<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.toName" class="amount-input"
							:placeholder="languageData.account.reciCardOwnerPh" />
					</view>
					<view style="border-bottom: 1px solid #eee; height: 2.75em; margin-top: 10px;">
						<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.toAccount" class="amount-input"
							:placeholder="languageData.account.reciCardPh" />
					</view>
					<u-button v-show="false" style="width: 30%; margin-top: 20px;" size="small" type="primary" text="确定"></u-button>
				</view>
				<!-- 提现金额 -->
				<view class="withdraw-amount">
					<text class="section-title"
						style="border-bottom: 1px solid #EEEEEE">{{languageData.account.transferBankCard}}</text>
					<view class="bank-info" style="border-bottom: 1px solid #EEEEEE; padding-bottom: 9px;"  @click="showBankList">
						<view class="bank-detail">
							<text class="bank-name">{{userAccount.bankName}}</text>
							<text class="bank-number">{{userAccount.cardNum2}}</text>
						</view>
						<uni-icons type="right" size="16" color="#999999" />
					</view>
					<view class="amount-input-area">
						<u-input border="none" type="number" v-model="param.amount" class="amount-input"
							:placeholder="languageData.account.PleaseEnterTheAmount" />
						<text class="currency">KIP</text>
					</view>
					<view class="amount-footer">
						<text
							class="available-amount">{{languageData.account.availableBalance}}：{{formatNumber(availableBalance)}}</text>
						<text class="withdraw-all" @click="withdrawAll">{{languageData.account.allDeposit}}</text>
					</view>
				</view>
				<!-- 收款账户 -->
				<view class="bank-card">
					<view class="amount-header">
						<text class="section-title">{{languageData.account.fundUsage}}</text>
					</view>
					<view style="border-bottom: 1px solid #eee; height: 2.75em;">
						<u-input style="height: 100%; text-align: center;" border="none" type="text" v-model="param.fundUsage" class="amount-input"
							:placeholder="languageData.account.fundUsagePh" />
					</view>
					<u-button v-show="false" style="width: 30%; margin-top: 20px;" size="small" type="primary" text="确定"></u-button>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom-button">
					<button class="submit-btn" @click="onSubmit">{{languageData.account.immediatelyTrans}}</button>
				</view>
			</view>
			
			<!-- 银行卡列表弹出层 -->
			<uni-popup ref="bankListPopup" type="bottom">
				<view class="popup-content">
					<view class="popup-header">
						<text class="popup-title">{{languageData.account.selectBankCard}}</text>
						<uni-icons @click="closeBankList" type="close" size="20" color="#666666" />
					</view>
					<view class="bank-list">
						<view v-for="(bank, index) in bankList" :key="index" class="bank-item"
							@click="selectBank(bank)">
							<text class="bank-item-name">{{bank.bankName}}</text>
							<text class="bank-item-number">{{bank.cardNum2}}</text>
						</view>
					</view>
				</view>
			</uni-popup>

			<payPopup ref="clearPwd" :show.sync="show" @getPassword="getPassword"></payPopup>
			<!-- 弹出层 -->
			<uni-popup ref="message" type="center">
				<view class="popup-content2">
					<text>{{ tipMessage }}</text>
					<button type="primary" style="margin-top: 20rpx;"
						@click="closePopup">{{languageData.overview.close}}</button>
				</view>
			</uni-popup>
			<loading ref="loading" :custom="false" :shadeClick="false" type="1" />
		</view>
		<payResult :show="showResult" :success="success" :number="param.amount"></payResult>
	</view>
</template>
<script>
	import {
		createCashOut
	} from '@/api/home/qrcode.js'
	import {
		getBalance
	} from '@/api/account/userAccount.js'
	import {
		getBankList2
	} from '@/api/bank/index.js'
	import payPopup from '@/components/keyboard/payPopup.vue'
	import {
		checkPwd
	} from '@/api/mine/payPwd.js'
	import payResult from '@/components/payResult/index.vue'

	export default {
		components: {
			payPopup,
			payResult
		},
		data() {
			return {
				success: true,
				showResult: false,
				bankList: [],
				userAccount: {},
				param: {
					fromId: null,
					fromAccount: null,
					toId: null,
					toAccount: '',
					amount: null,
					accountId: null,
					fundUsage:'',
					toName: '',
				},
				show: false,
				paramPwd: {
					payPasswd: null
				},
				availableBalance: 0,
				tipMessage: ""
			}
		},
		created() {
			this.languageData = this.$languageData;
		},
		onLoad() {
			this.getBalance();
		},
		methods: {
			closePopup() {
				this.$refs.message.close();
			},
			//获取用户输入的支付密码
			getPassword(data) {
				//验证支付密码
				this.getChangePwd(data.password);
			},
			getChangePwd(pwd) {
				this.paramPwd.payPasswd = pwd;
				//TODO 
				// this.show = false;
				// this.cashOut();
				// return
				checkPwd(this.paramPwd).then(res => {
					if (res.data != null) {
						//支付
						this.show = false;
						this.cashOut();
					} else {
						//密码错误
						this.$nextTick(() => {
							this.$refs.clearPwd.errorPwd();
						})
					}
				})
			},
			selectBankList() {
				let params = {
					userId: this.param.fromId
				}
				getBankList2(params).then(res => {
					this.bankList = res
					let account = {
						bankName:this.languageData.tmp.zsyh,
						cardNum2:'**************3910'
					}
					this.bankList.unshift(account)
					let account1 = {
						bankName:this.languageData.tmp.gsyh,
						cardNum2:'**************9527'
					}
					this.bankList.unshift(account1)
					this.userAccount.bankName = res[0].bankName
					this.userAccount.cardNum2 = res[0].cardNum2
				}).catch(e => {
					let account = {
						bankName: this.languageData.wallet.balance,
						cardNum2: this.param.fromAccount
					}
					this.bankList = account
				})
			},
			goBack() {
				uni.navigateBack();
			},
			showBankList() {
				this.$refs.bankListPopup.open();
			},
			closeBankList() {
				this.$refs.bankListPopup.close();
			},
			selectBank(bank) {
				this.userAccount = bank;
				this.param.toAccount = bank.cardNum
				this.closeBankList();
			},
			showKeyboard() {
				// 数字键盘会自动显示
			},
			hideKeyboard() {
				// uni.hideKeyboard();
			},
			withdrawAll() {
				this.param.amount = this.formatNumber(this.availableBalance);
			},
			getBalance() {
				getBalance().then(res => {
					this.availableBalance = res.data.accountAmount;
					this.param.fromId = res.data.userId;
					this.param.accountId = res.data.accountId;
					this.param.fromAccount = res.data.accountId;
					this.param.toId = res.data.userId;
					this.selectBankList();
				})
			},
			cashOut() {
				this.$refs.loading.open();
				createCashOut(JSON.stringify(this.param)).then(res => {
					if (res.data.status == '2') {
						setTimeout(() => {
							this.$refs.loading.close();
							uni.showToast({
								title: this.languageData.submitSuccess,
								icon: 'success',
								duration: 1000
							});
							let obj = {
								number: this.param.amount,
								type: 'W',
								success: true
							}
							this.param.amount = null
							uni.navigateTo({
								url: `/components/payResult/indexNew?data=${encodeURIComponent(JSON.stringify(obj))}`
							})
							// this.showResult = true
							// setTimeout(()=>{
							// 	this.$tab.navigateTo('/pages/mine/wallet/index')
							// },1000)
						}, 1000)
					} else if (res.data.status == '0') {
						setTimeout(() => {
							this.$refs.loading.close();
							this.$refs.message.open();
							this.paramPwd.payPasswd = ''
							this.$refs.clearPwd.clearPwd();
							this.tipMessage = res.data.remark
						}, 1000)
					}
				}).catch(e => {
					setTimeout(() => {
						this.$refs.loading.close();
						this.$refs.clearPwd.clearPwd();
						uni.showToast({
							title: this.languageData.sysError,
							icon: 'error',
							duration: 1000
						});
					}, 1000)
				})
			},
			onSubmit() {
				if (this.param.toName == '') {
					uni.showToast({
						title: this.languageData.account.reciCardOwnerPh,
						icon: 'none',
						duration: 1000
					});
					return;
				}
				
				if (this.param.toAccount == '') {
					uni.showToast({
						title: this.languageData.account.reciCardPh,
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (this.param.amount == '' || this.param.amount == null) {
					uni.showToast({
						title: this.languageData.account.cannot0,
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (this.param.fundUsage == '') {
					uni.showToast({
						title: this.languageData.account.fundUsagePh,
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (this.availableBalance+'' < this.param.amount+'') {
					uni.showToast({
						title: this.languageData.account.insufficientBalance,
						icon: 'none',
						duration: 1000
					});
					return;
				}

				this.show = true;
			}
		}
	}
</script>

<style lang="scss" scoped>

	.popup-content2 {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		font-size: 20rpx;
		text-align: center;
	}

	.page {
		display: flex;
		flex-direction: column;
	}

	.nav-bar {
		height: 88rpx;
		background-color: #333333;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
	}

	.back-icon {
		width: 20px;
		height: 20px;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 500;
	}

	.content {
		flex: 1;
		padding: 20rpx 30rpx;
	}

	.bank-card {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 14px;
		color: #333333;
		margin-bottom: 14rpx;
		padding-bottom: 14rpx;
		display: block;
	}

	.bank-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bank-detail {
		display: flex;
		flex-direction: column;
	}

	.bank-name {
		font-size: 16px;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.bank-number {
		font-size: 14px;
		color: #666666;
	}

	.withdraw-amount {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.amount-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.withdraw-all {
		font-size: 14px;
		color: #2C54D0;
	}

	.amount-input-area {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 10rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.u-input ::v-deep .uni-input-input {
		font-size: 58rpx;
		font-weight: 500;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
	}

	.currency {
		font-size: 30px;
		color: #333333;
		margin-left: 20rpx;
	}

	.amount-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.available-amount {
		font-size: 14px;
		color: #999999;
	}

	.bottom-button {
		padding: 50rpx 0;
	}

	.submit-btn {
		background-color: #FDBE44;
		color: #000;
		font-size: 16px;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 24rpx;
	}

	.popup-content {
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.popup-title {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
	}

	.bank-list {
		max-height: 600rpx;
		overflow-y: auto;
	}

	.bank-item {
		padding: 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.bank-item-name {
		font-size: 16px;
		color: #333333;
		margin-bottom: 8rpx;
		display: block;
	}

	.bank-item-number {
		font-size: 14px;
		color: #666666;
	}
</style>