<template>
	<view style="height: 100%;">

		<view v-if="!showAdd" class="container" @click.stop="hideKeyboard">
			<view class="main-content">
				<view class="status-area">
					<text class="status-text-title">
						{{languageData.bank.addBank}}
					</text>
				</view>
				<view class="status-area">
					<text class="status-text">
						{{languageData.bank.checkPwd}}
					</text>
				</view>
				<view class="password-area" @click.stop="handleFocus">
					<view
						v-for="(item, index) in 6"
						:key="index"
						class="password-item"
						:class="{ active: currentFocusIndex === index }"
					>
					<text v-if="password[index]" class="password-dot">●</text>
				</view>
			</view>
			
			<view v-if="showKeyboard" @click.stop="hideKeyboard"/>
				<!-- 键盘 -->
				<master-keyboard ref="keyboard" 
					keyboardtype="number" 
					:randomNumber="true" 
					:defaultValue="password" 
					@keyboardClick="handleClick"
				></master-keyboard>
				<button class="confirm-btn" :class="{ 'confirm-btn-active': password.length === 6 }" @click="handleConfirm">{{languageData.bank.agree}}</button>
				<text class="tip-text">{{languageData.bank.pwdConstitute}}</text>
			</view>
		</view>
		
		<view v-if="showAdd">
		  <view class="container2">
			<view class="card">
			  <view class="select-box" @click.stop="withoutCode()">
				<text class="menu-text">{{languageData.bank.freeNum}}</text>
				<uni-icons :size="20" type="bottom" color="#666"></uni-icons>
			  </view>
			</view>
			<view class="card">
			  <view class="card-title">
				<text class="input-title">{{languageData.bank.inputCardNum}}</text> 
				<uni-tooltip class="uni-stat-tooltip" 
					:content="languageData.bank.support" placement="left">
					<uni-icons type="help-filled" size="16" color="#999999" />
				</uni-tooltip>
			  </view>
			  <view class="input-group">
				<view class="input-label">{{languageData.bank.bankName}}</view>
				<uni-easyinput v-model="param.bankName" :placeholder="languageData.bank.inputBankName" :inputBorder="false"></uni-easyinput>
			  </view>
			  <view class="input-group">
				<view class="input-label">{{languageData.bank.cardNum}}</view>
				<uni-easyinput v-model="param.cardNum" :placeholder="languageData.bank.inputBankNum" :inputBorder="false"></uni-easyinput>
			  </view>
			  <view class="button-wrapper">
				<button class="next-button" @click="handleNext">{{languageData.bank.next}}</button>
			  </view>
			</view>
		  </view>
		  
		  <view class="">
		  	<!-- 弹出层 -->
		  	<uni-popup ref="bankListPopup" type="bottom">
		  		<view class="popup-content">
		  			<view class="popup-header">
		  				<text class="popup-title">{{languageData.bank.agreeAgreement}}</text>
		  				<uni-icons @click="closeBankList" type="close" size="20" color="#666666" />
		  			</view>
		  			<view class="bank-list">
		  				<view class="bank-item" @click="selectBank(bank)">
		  					<text class="bank-item-name">{{languageData.bank.userAgreement}}</text>
		  					<text class="bank-item-name">{{languageData.bank.bankAgreement}}</text>
		  				</view>
		  			</view>
					<view class="button-wrapper">
						<button class="disAgree-button" @click.stop="closeClauseList()">{{languageData.bank.disagree}}</button>
						<button class="agree-button" @click.stop="submitAdd()">{{languageData.bank.agree}}</button>
					</view>
		  		</view>
		  	</uni-popup>
		  </view>
		</view>
		<loading  ref="loading" :custom="false" :shadeClick="false" :type="1" />
	</view>
</template>


<script>
import keyboard  from "@/components/master-keyboard/master-keyboard.vue";
import { checkPwd } from '@/api/mine/payPwd.js'
import { addBankCard } from '@/api/bank/index.js'
export default {
	components: {
		'master-keyboard': keyboard
	},
	data() {
		return {
		  password: '',
		  name:'',
		  currentFocusIndex: -1,
		  showAdd:false,
		  showKeyboard: false,
		  param:{
			userId:this.$store.state.user.userId, 
			payPasswd:'',
			cardNum:'',
			bankName:''
		  },

		}
	},
	mounted() {
		
	},
	onLoad() {
		this.languageData = this.$languageData;
		uni.setNavigationBarTitle({
			title: this.$languageData.navBar.addCard
		});
	},
	methods: {
		// 提交
		submitAdd(){
			// 处理下一步逻辑
			uni.showToast({
				title: '处理中...',
				icon: 'none'
			})
			this.$refs.loading.open();
			addBankCard(this.param).then(res=>{
				if(res.code=='200'){
					setTimeout(()=>{
						this.$refs.loading.close();
					},1500)
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration:1000
					})
					this.$tab.navigateTo('/pages/mine/bankCard/index')
					// this.$tab.reLaunch('/pages/mine/bankCard/index')
					// uni.navigateBack()
				}else if(res.code=='500' && res.message=='该银行卡已存在'){
					uni.showToast({
						title: '该银行卡用户已添加',
						icon: 'none',
						duration:1000
					})
				}else{
					uni.showToast({
						title: '添加失败，请联系管理员',
						icon: 'none',
						duration:1000
					})
				}
			})
			this.closeClauseList()
		},
		showClauseList() {
			this.$refs.bankListPopup.open();
		},
		closeClauseList() {
			this.$refs.bankListPopup.close();
		},
		withoutCode(){
			uni.showToast({
				title: '功能建设中...',
				icon: 'none'
			})
		},
		handleNext() {
			let regex = /^(62[0-9]{14,17}|4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6[0-9]{15,18})$/
			// console.log("-----",regex.test(this.param.cardNum))
		  if (!this.param.cardNum) {
			uni.showToast({
			  title: '请输入银行卡号',
			  icon: 'none'
			})
			return
		  } else if (!this.param.bankName.replace(/\s/g, "")) {
			uni.showToast({
			  title: '请输入银行名称',
			  icon: 'none'
			})
			return
		  } else if (!regex.test(this.param.cardNum.replace(/\s/g, ""))) {
			uni.showToast({
			  title: '请检查银行卡正确性',
			  icon: 'none'
			})
			return
		  }else{
			  this.showClauseList()
		  }
		},
		handleClick(e){
			if (this.password.length < 7) {
				this.password = e.value
			}
			this.password = this.password.slice(0, 6)
			this.currentFocusIndex = this.password.length
		},
		handleFocus() {
		  this.showKeyboard = !this.showKeyboard
		  this.$refs.keyboard.open(this.showKeyboard)//true 键盘显示 false 键盘隐藏
		  this.currentFocusIndex = this.password.length
		},
		hideKeyboard() {
		  this.showKeyboard = !this.showKeyboard
		},
		validatePassword() {
		  if (this.password.length !== 6) {
			uni.showToast({
			  title: '请输入6位数字密码',
			  icon: 'none'
			})
			return false
		  }
		  return true
		},
		handleConfirm() {
		  if (!this.validatePassword()) return
			// 验证原密码
			this.param.payPasswd = this.password
			// 调用验证原密码的接口
			checkPwd(this.param).then(res=>{
				this.password = ''
				this.param.payPasswd = ''
				if(res.data!=null){
					// 转到添加页面
					// this.name = 
					this.showAdd = true
				}else{
					uni.showToast({
					  title: '密码错误',
					  icon: 'error',
					  duration: 1000
					})
				}
			})
		},
		handleBack() {
		  uni.showModal({
			title: '提示',
			content: '确认要放弃添加银行卡吗？',
			success: (res) => {
			  if (res.confirm) {
				uni.navigateBack()
			  }
			}
		  })
		}
	}
}
</script>

<style lang="scss" scoped>
page {
height: 100%;
}
.card-tooltip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: #ebebeb;
	border-radius: 10px;
	margin: 5px;
}

.uni-stat-tooltip {
	display: flex;
	justify-content: flex-end;
  min-width: 200rpx;
  max-width: 600rpx;
  max-height: 200rpx;
}
.card-title{
	display: flex;
	justify-content: space-between;
}
.container {
	height: 100%;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
}
.popup-content {
	background-color: #FFFFFF;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
.bank-item-name {
	font-size: 20rpx;
	color: #00a5bd;
	margin-bottom: 12rpx;
	display: block;
}

.bank-item {
	padding: 30rpx;
}
.bank-list {
	max-height: 600rpx;
	overflow-y: auto;
}
.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;
}
.container2{
	padding: 30rpx;
}
.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #F5F5F5;
	flex-shrink: 0;
}
.back-icon {
	position: absolute;
	left: 32rpx;
	width: 40rpx;
	height: 40rpx;
}
.title {
	font-size: 36rpx;
	color: #333333;
	font-weight: 500;
}
.menu-text {
	font-size: 26rpx;
	font-weight: 600;
	color: #333333;
}
.main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 32rpx;
}
.status-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 28rpx;
}

.status-text-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
}

.status-text {
	font-size: 30rpx;
	color: #333333;
}

.password-area {
	display: flex;
	justify-content: center;
	gap: 32rpx;
	margin-bottom: 80rpx;
}
.password-item {
	width: 80rpx;
	height: 80rpx;
	border: 2px solid #E5E5E5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.password-item.active {
	border-color: #F9AF21;
}
.password-dot {
	font-size: 38rpx;
	// color: #333333;
	color: #F9AF21;
}
.hidden-input {
	position: absolute;
	top: -999rpx;
	left: -999rpx;
}
.confirm-btn {
	width: 600rpx;
	height: 88rpx;
	background-color: #CCCCCC;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
}
.confirm-btn-active {
	background-color: #F9AF21;
}
.tip-text {
	font-size: 24rpx;
	color: #999999;
}

  
  .card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .select-box {
    position: relative;
	display: flex;
	justify-content: space-between;
  }
  
  .input-title {
    font-size: 16px;
    color: #333333;
    margin-bottom: 30rpx;
    font-weight: 600;
  }
  
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .input-label {
    font-size: 14px;
    color: #333333;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  
  .button-wrapper {
    padding: 20rpx 0;
	display: flex;
	padding-bottom: 50rpx;
  }
  .agree-button {
    width: 40%;
    height: 70rpx;
    line-height: 70rpx;
    background-color: #49d100;
    color: #ffffff; 
    font-size: 16px;
    text-align: center;
    border: 0;
  }
  ::v-deep .uni-button:after{
	  border: 0;
  }
  .disAgree-button{
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	background-color: #e6e6e6;
	color: #ffffff; 
	font-size: 16px;
	text-align: center;
	border: none;
  }
  .next-button {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #f5f5f5;
    color: #999999;
    font-size: 16px;
    text-align: center;
    border: none;
  }
  
  .next-button:active {
    opacity: 0.8;
  }
</style>
