<template>
	<view class="page container-with-elep full-height-with-titile">
		<view class="content" v-if="showDetail">
			<view class="card">
				<view class="card-info">
					<view class="card-logo">
						<uni-icons type="wallet" size="24" color="#FFFFFF"></uni-icons>
					</view>
					<view class="bank-info">
						<!-- <image class="bank-logo" src="https://ai-public.mastergo.com/ai/img_res/882ef89ac6b6c17bbfdd31cf02b15b7d.jpg" /> -->
						<text class="bank-name">{{bankDetail.bankName}}</text>
					</view>
					<view class="card-number">{{bankDetail.cardNum}}</view>
					<view class="complete-btn" @click.stop="showCardNumber()">{{$languageData.settings.fullCardNum}}</view>
				</view>
			</view>

			<view class="menu-list-detail">
				<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="toFunction(item.index)">
					<text class="menu-text">{{ item.name }}</text>
					<uni-icons class="arrow" type="right" size="16" color="#666666" />
				</view>
			</view>
		</view>


		<view class="container" v-if="!showDetail" @click.stop="hideKeyboard">
			<view class="main-content">
				<view class="status-area">
					<uni-icons type="locked" size="48" color="#1E90FF" class="status-icon" />
					<text class="status-text">
						{{ languageData.password.oldPayPwd }}
					</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.stop="handleConfirm">{{languageData.affirm}}</button>
				<text class="tip-text">{{languageData.password.pwdConstitute}}</text>
			</view>

		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$languageData.settings.cancel" :confirmText="$languageData.settings.copy" :title="$languageData.settings.cardNnum" :content="cardNumber"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="balanceDialog" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$languageData.settings.cancel" :confirmText="$languageData.settings.confirm" :title="$languageData.settings.balance"
				:content="bankDetail.cardAmount"></uni-popup-dialog>
		</uni-popup>

		<loading ref="loading" :custom="false" :shadeClick="false" :type="1" />

	</view>
</template>

<script>
	import {
		getCompleteCardNumber,
		unbindCard
	} from "@/api/bank/index.js";
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	import {
		haveOrNotPayPwd,
		checkPwd
	} from '@/api/mine/payPwd.js'
	export default {
		components: {
			'master-keyboard': keyboard
		},
		data() {
			return {
				dialogIndex: "1",
				cardNumber: "",
				currentFocusIndex: -1,
				password: "",
				showKeyboard: false,
				showDetail: true,
				param: {
					userId: this.$store.state.user.userId,
					payPasswd: ''
				},
				menuList: [{
						index: 1,
						name: this.$languageData.settings.balanQuery,
					},
					{
						index: 2,
						name: this.$languageData.settings.bizDetail,
					},
					{
						index: 3,
						name: this.$languageData.settings.payLimitQuer,
					}
				],
				bankDetail: {}
			}
		},
		onLoad(item) {
			this.languageData = this.$languageData;
			if (item.data) {
				try {
					let jsonString = decodeURIComponent(item.data); // 解码 JSON 字符串
					let obj = JSON.parse(jsonString); // 解析为 JSON 对象
					this.bankDetail = obj
					console.log("this.bankDetail：", this.bankDetail);
				} catch (error) {
					console.error("解析 JSON 失败：", error);
				}
			}
		},
		created() {

		},
		methods: {
			// 查询完整卡号
			completeCardNumber() {
				getCompleteCardNumber(this.bankDetail).then(res => {
					// console.log("-------------",res.cardNum)
					this.cardNumber = res.cardNum
				})
			},
			dialogConfirm() {
				// 复制卡号
				uni.setClipboardData({
					data: this.cardNumber,
					success: function() {
						uni.showToast({
							title: this.$languageData.settings.copySuc,
							icon: 'none',
							duration: 1000
						})
						console.log('success'); //调用方法成功
					}
				})
			},
			handleConfirm() {
				// 验证原密码
				this.param.payPasswd = this.password
				// 调用验证原密码的接口
				checkPwd(this.param).then(res => {
					this.password = ''
					this.param.payPasswd = ''
					if (res.data != null) {
						this.showDetail = true
						// 查询完整卡号
						if (this.dialogIndex == '1') {
							this.completeCardNumber()
							this.$refs.alertDialog.open()
						} else {
							this.$refs.balanceDialog.open()
						}
					} else {
						uni.showToast({
							title: this.languageData.password.pwdError,
							icon: 'error',
							duration: 1000
						})
					}
				}).catch(e => {
					this.password = '';
					this.param.payPasswd = '';
				})
			},
			handleFocus() {
				this.showKeyboard = !this.showKeyboard
				this.$refs.keyboard.open(this.showKeyboard) //true 键盘显示 false 键盘隐藏
				this.currentFocusIndex = this.password.length
			},
			handleClick(e) {
				if (this.password.length < 7) {
					this.password = e.value
				}
				this.password = this.password.slice(0, 6)
				this.currentFocusIndex = this.password.length
			},
			toFunction(item) {
				if (item == 1) {
					this.selectBalance();
				} else if (item == 2) {
					this.toList();
				} else if (item == 3) {
					this.selectLimit();
				} else {
					uni.showToast({
						title: this.$languageData.settings.unknow,
						icon: "none"
					});
				}
			},
			// 监听导航栏按钮点击事件
			onNavigationBarButtonTap(e) {
				// console.log("导航栏按钮被点击", e);
				this.unbindCardByUser()
			},
			// 展示完整卡号
			showCardNumber() {
				this.dialogIndex = '1'
				this.showDetail = !this.showDetail
			},
			// 解绑银行卡
			unbindCardByUser() {
				this.$refs.loading.open();
				unbindCard(this.bankDetail).then(res => {
					setTimeout(() => {
						this.$refs.loading.close();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								complete() {
									uni.$emit('refreshList');
								}
							})
						}, 660)
					}, 1000)
				})
			},
			// 展示明细
			toList() {
				// console.log("---",this.bankDetail.cardNum2)
				let data = {
					type: 2,
					id: this.bankDetail.cardNum2
				}
				uni.navigateTo({
					url: `/pages/account/transactionRecord?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			},
			// 查询余额
			selectBalance() {
				this.dialogIndex = '2'
				this.showDetail = !this.showDetail
			},
			// 查询支付限额
			selectLimit() {

			}

		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #FFFFFF;
	}
</style>
<style scoped>
	page {
		height: 100%;
	}

	.page {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.content {
		flex: 1;
		padding: 0 32rpx;
	}

	.card {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: linear-gradient(135deg, #E54D42 0%, #D03B30 100%);
		padding: 40rpx;
		background-color: #2D2D2D;
		background-image: url('/static/svgs/lines.svg');
		background-size: 369%;
		background-position: center;
	}

	.bank-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.bank-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.bank-name {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
	}

	.card-number {
		color: #FFFFFF;
		font-size: 48rpx;
		font-weight: 500;
		margin-bottom: 40rpx;
		letter-spacing: 4rpx;
	}

	.complete-btn {
		align-self: flex-end;
		background: rgba(255, 255, 255, 0.2);
		color: #FFFFFF;
		font-size: 12px;
		padding: 8rpx 24rpx;
		border-radius: 32rpx;
		display: inline-block;
	}

	.menu-list-detail {
		margin-top: 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1px solid #F5F5F5;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		color: #333333;
		font-size: 14px;
	}

	.divider {
		color: #CCCCCC;
		margin: 0 16rpx;
		font-size: 14px;
	}

	.security-text {
		color: #999999;
		font-size: 12px;
	}


	.container {
		height: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

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

	.main-content {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		padding: 48rpx 32rpx;
	}

	.status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 64rpx;
	}

	.status-icon {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 24rpx;
	}

	.status-text {
		font-size: 32rpx;
		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: #1E90FF;
	}

	.password-dot {
		font-size: 36rpx;
		color: #333333;
	}

	.hidden-input {
		position: absolute;
		top: -999rpx;
		left: -999rpx;
	}

	.card-logo {
		margin-bottom: 20rpx;
	}

	.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: #1E90FF;
	}

	.tip-text {
		font-size: 24rpx;
		color: #999999;
	}
</style>