<template>
	<view class="page container-with-lines full-height-with-titile">
		<view class="page full-height-with-titile" v-if="!showResult">
			<!-- 主内容区域 -->
			<view class="content" @click="hideKeyboard">
				<!-- 银行卡信息 -->
				<view class="bank-card" @click="showBankList">
					<text class="section-title"
						style="border-bottom: 1px solid #EEEEEE">{{languageData.account.refundYourBankCard}}</text>
					<view class="bank-info">
						<view v-if="bankList.length>0" class="bank-detail">
							<text class="bank-name">{{userAccount.bankName}}</text>
							<text class="bank-number">{{userAccount.cardNum2}}</text>
						</view>
						<view v-if="bankList.length<=0">
							<text class="bank-name">{{languageData.account.noCard}}</text>
						</view>
						<uni-icons type="right" size="16" color="#999999" v-if="bankList.length>0"/>
						<uni-icons type="plus"  size="16" color="#999999" v-if="bankList.length<=0"/>
					</view>
				</view>
				<!-- 充值金额 -->
				<view class="withdraw-amount">
					<!-- {{languageData.account.}} -->
					<view class="amount-header">
						<text class="section-title">{{languageData.account.topUpAmount}}</text>
					</view>
					<view class="amount-input-area">
						<u-input border="none" type="number" v-model="param.amount" class="amount-input"
							:placeholder="languageData.account.PleaseEnterTheRefundAmount"/>
						<text class="currency">KIP</text>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom-button">
					<button class="submit-btn" @click="onSubmit">{{languageData.account.immediatelyTopUp}}</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 { createTopUp } 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 keyboard  from "@/components/master-keyboard/master-keyboard.vue";
	import payResult from '@/components/payResult/index.vue'
	
	export default {
		components: {
			payPopup,
			payResult
		},
		data() {
			return {
				success:true,
				showResult:false,
				bankList: [],
				userAccount:{},
				tipMessage:"",
				param: {
					fromId: null,
					fromAccount: null,
					toId: null,
					toAccount: null,
					amount: null
				},
				show: false,
				paramPwd: {
					payPasswd: null
				},
				userId:this.$store.state.user.userId,
			}
		},
		onLoad() {
			this.getBalance();
		},
		created() {
			this.languageData = this.$languageData;
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.topUp
			});
		},
		watch:{
			languageData(){
				uni.setNavigationBarTitle({
					title: this.$languageData.navBar.topUp
				});
			}
		},
		methods: {
			// // 监听输入框
			//  handleInput(value) {
			// 	 console.log("---------value",value)
			// 	// 如果输入内容以小数点开头
			// 	if (value.startsWith(".")) {
			// 	// 在前面加上 0
			// 	this.param.amount = "0" + value;
			// 	} else {
			// 	// 正常输入，保持原值
			// 	this.param.amount = value;
			// 	}
			// },
			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.userId
				}
				//TODO
				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=>{
					// this.$modal.msg('暂未添加银行卡')
					// let account = {
					// 	bankName:this.languageData.wallet.balance,
					// 	cardNum2:this.param.fromAccount
					// }
					// this.bankList = account
				})
			},
			goBack() {
				uni.navigateBack();
			},
			showBankList() {
				// console.log("---this.bankList---",this.bankList)
				if(this.bankList!=null){
					this.$refs.bankListPopup.open();
				}else{
					// 添加银行卡
				}
			},
			closeBankList() {
				this.$refs.bankListPopup.close();
			},
			selectBank(bank) {
				this.userAccount = bank;
				this.param.fromAccount = bank.cardNum
				this.closeBankList();
			},
			hideKeyboard() {
				// uni.hideKeyboard();
			},
			getBalance(){
				getBalance().then(res=>{
					this.userAccount.availableBalance = res.data.accountAmount;
					this.param.fromId = res.data.userId;
					this.param.toId = res.data.userId;
					this.param.toAccount = res.data.accountId;
					this.param.fromAccount = res.data.accountId;
					this.selectBankList();
				}).catch(e=>{
					this.selectBankList();
				})
			},
			cashOut(){
				this.$refs.loading.open();
				createTopUp(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,
								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(isNaN(this.param.amount) || this.param.amount <= 0){
					uni.showToast({
						title: this.languageData.account.cannot0,
						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 {
		padding: 0;
		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;
	}

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

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

	.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: #FDBF44;
		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>