<template>
	<view class="page container-with-lines full-height-with-titile">
		<view class="page full-height-with-titile" style="overflow: auto;" v-if="!showResult">
			<!-- 主内容区域 -->
			<view class="content" @click="hideKeyboard">
<!-- 				<view v-show="step === 1" style="width: 100%;">
					<u-subsection style="width: 100%;" activeColor="#FDBE44" :list="['代付', '代收']" :current="0" @change="handleUserTypeChg"></u-subsection>
				</view> -->
				<view v-show="false" class="withdraw-amount" style="margin-bottom: 20rpx;">
					<text>支付类型</text>
					<view style="display: grid; grid-template-columns: repeat(3,1fr); width: 100%; margin: 10px auto;">
						<view v-for="item in payType" @click="param.payType = item.key" :class="{'active': param.payType === item.key}" style="display: flex; flex-direction: column;justify-content: center; border-radius: 8px; align-items: center; padding: 5px 0;">
							<u--image style="height: 40px;"  :src="item.img" mode="widthFix" width="40" shape="circle"></u--image>
							<text class="text">{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 代理信息 -->
				<view v-show="step === 1" class="withdraw-amount">
					<text>{{$languageData.functions.proxyInfo}}</text>
					<uni-section :title="$languageData.functions.pName" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="text" v-model="param.cname" :fontSize="12"
								:placeholder="$languageData.functions.pNamePh"/>
						</view>
					</uni-section>
					<uni-section :title="$languageData.functions.pPhone" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="text" v-model="param.phone" :fontSize="12"
								:placeholder="$languageData.functions.pPhonePh"/>
						</view>
					</uni-section>
					<uni-section :title="$languageData.functions.pIdCard" type="line">
						<view style="display: flex; width: 100%; justify-content: space-around;">
							<u-radio-group
							    v-model="param.idType"
							    placement="row"
								style="justify-content: space-around;"
							  >
							    <u-radio
								size="25"
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(item, index) in [{name:$languageData.functions.idCard, key:'id'},{name:$languageData.functions.passport, key:'pp'}]"
							      :key="index"
							      :label="item.name"
							      :name="item.key"
							    >
							    </u-radio>
							  </u-radio-group>
						</view>
					</uni-section>
					<uni-section :title="$languageData.functions.pIdCardNum" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="text" v-model="param.idNum" :fontSize="12"
								:placeholder="$languageData.functions.pIdCardNumPh"/>
						</view>
					</uni-section>
					<uni-section :title="$languageData.functions.pAmount" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="number" v-model="param.amount" :fontSize="12"
								:placeholder="$languageData.functions.pAmountPh"/>
							<text class="currency">KIP</text>
						</view>
					</uni-section>
					<uni-section :title="$languageData.functions.pUsage" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="text" v-model="param.pUsage" :fontSize="12"
								:placeholder="$languageData.functions.pUsagePh"/>
						</view>
					</uni-section>
				</view>
				<!-- 收款方信息 -->
				<view v-show="step === 1" class="withdraw-amount" style="margin-top: 15rpx;">
					<text>{{$languageData.functions.reciInfo}}</text>
					<uni-section :title="$languageData.functions.reciWay" type="line">
						<view style="display: flex; width: 100%; justify-content: space-around;">
							<u-radio-group
								v-model="param.reciWay"
								placement="row"
								style="justify-content: space-around;"
							  >
								<u-radio
								size="25"
								  :customStyle="{marginBottom: '8px'}"
								  v-for="(item, index) in reciWay"
								  :key="index"
								  :label="item.name"
								  :name="item.key"
								>
								</u-radio>
							  </u-radio-group>
						</view>
					</uni-section>
					<uni-section :title="param.reciWay === 'u' ? this.$languageData.functions.accNum:this.$languageData.functions.bankCardNum" type="line" padding>
						<view class="amount-input-area">
							<u-input border="none" type="text" cursor-spacing="15" v-model="param.famId" :fontSize="12"
								:placeholder="(param.reciWay === 'u' ? this.$languageData.functions.accNum:this.$languageData.functions.bankCardNum)"/>
						</view>
					</uni-section>
				</view>
				<!-- 付款方信息 -->
				<view v-show="step === 2" class="withdraw-amount" style="margin: 20rpx 0;">
					<text>{{$languageData.functions.payInfo}}</text>
					<uni-section :title="languageData.functions.payWay" type="line" padding>
						<view class="bank-info"   @click="showBankList">
							<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>
					</uni-section>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom-button">
					<button v-if="step === 1" class="submit-btn" @click="step = 2" style="background-color: #2A79FF; color: white;">{{this.$languageData.functions.nextStep}}</button>
					<button v-if="step === 2" class="submit-btn" @click="step = 1" style="background-color: lightgray; color: white;">{{this.$languageData.functions.lastStep}}</button>
					<button v-if="step === 2" class="submit-btn" @click="onSubmit" style="margin-top: 30rpx;">{{this.$languageData.functions.payimme}}</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>


	</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 {
				reciWay:[
					{
						key: 'u',
						name: this.$languageData.functions.sysUsr,
						img: '/static/img/electricity.png'
					},
					{
						key: 'c',
						name: this.$languageData.functions.bankCard,
						img:'/static/img/water.png'
					}
				],
				payWay:[
					{
						key: 'u',
						name: '系统账户余额',
						img: '/static/img/electricity.png'
					},
					{
						key: 'c',
						name: this.$languageData.functions.bankCard,
						img:'/static/img/water.png'
					}
				],
				step: 1,
				
				success:true,
				showResult:false,
				bankList: [],
				userAccount:{},
				tipMessage:"",
				param: {
					payType: '',
					reciWay: 'u',
					payWay: '',
					usage: '',
					idType: 'id',
					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;
		},
		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;
				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
				}
				getBankList2(params).then(res=>{
					this.bankList = res
					let account = {
						bankName:this.languageData.tmp.zsyh,
						cardNum2:'**************3910'
					}
					this.bankList.unshift(account)
					account = {
						bankName:this.languageData.tmp.gsyh,
						cardNum2:'**************9527'
					}
					this.bankList.unshift(account)
					account = {
						bankName:this.$languageData.functions.accBalance,
						cardNum2:'20 KIP'
					}
					this.bankList.unshift(account)
					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() {
				// 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(!this.param.payType || this.param.payType.length === 0){
				// 	uni.showToast({
				// 		title: this.languageData.functions.payTypePh,
				// 		icon: 'none',
				// 		duration:1000
				// 	});
				// 	return;
				// }
				// if(!this.param.famId || this.param.famId.length === 0){
				// 	uni.showToast({
				// 		title: this.languageData.functions.famIdPh,
				// 		icon: 'none',
				// 		duration:1000
				// 	});
				// 	return;
				// }
				// 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>
	
	.active{
		border: 1px solid #FDBF44;
		background-color: rgba(253, 191, 68, .2);
	}
	

	.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;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
	}

	.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: 20rpx;
		padding-bottom: 15rpx;
	}

	.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;
		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>