<script setup>
	/**
	 * 支付密码
	 * @property {Boolean} check 是否验证
	 * @property {Function} confirm 输入密码完成时回调
	 */
	import {
		computed,
		defineExpose,
		ref,
		getCurrentInstance,
		defineEmits,
		onMounted,
		nextTick
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 加密
	import CryptoJS from 'crypto-js';
	// 条形码输入框
	import codeInput from '@/components/mine/codeInput.vue'
	// 软键盘
	import keyboard from '@/components/public/keyboard/keyboard.vue'

	// 
	const props = defineProps({
		// 是否验证
		check: {
			type: Boolean,
			default: false
		},
		// 金额
		price: {
			type: [Number, String],
		},
		// 单位
		unitKey: {
			type: String,
			default: 'balance'
		},
	})

	// 
	const {
		proxy
	} = getCurrentInstance()
	// 触发父组件事件
	const emits = defineEmits(['confirm'])
	// 仓库
	const store = useStore()
	// 密码
	const pwd = ref('')
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)
	// 单位
	const unit = computed(() => {
		let config = util.config.payType
		return config[props.unitKey] || {}
	})

	onMounted(() => {
		console.log('onMounted', keyboard, proxy.$refs)
	})

	// 打开弹窗
	function open() {
		// 如果用户没有二级密码
		if (userinfo.value.hasSecondCipher) {
			proxy.$refs.pwdRef.open()
		} else {
			uni.navigateTo({
				url: '/pages/mine/setting/secondPwd'
			})
		}
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.pwdRef.close()

		setTimeout(() => {
			// 清空二级密码
			pwd.value = ''
		}, 500)
	}

	/**
	 * 支付键盘回调
	 * @param {Object} val
	 */
	function KeyInfo(val) {
		// 判断是否输入的是删除键
		if (val.keyCode === 8) {
			// 删除最后一位
			pwd.value = pwd.value.slice(0, -1)
			return
		}
		// 如果大于六位
		if (pwd.value.length >= 6) return
		// 判断是否输入的是.
		else if (val.keyCode == 190) {
			// 输入.无效
		} else {
			pwd.value += val.key
			// passwordArr.push(val.key);
		}
	}

	// 确认
	function handleConfirm() {
		if (!/^\d{6}$/.test(pwd.value)) {
			util.alert('二级密码不正确')
			return
		}
		// 加密后的密码
		let password = CryptoJS.MD5(pwd.value).toString()
		// 
		if (!props.check) {
			// 验证
			emits('confirm', password)
			close()
			return
		}

		// 验证二级密码
		api.mine.checkSecondLevelCipher({
			data: {
				secondLevelCipher: password,
			}
		}).then(rs => {
			if (rs.code == 200) {
				emits('confirm', password)
				close()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 
	defineExpose({
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="pwdRef" type="bottom">
		<view class="pwdAlt popBot plr30 bfff">
			<view class="header rows mtb30 f30">
				<view class="title ">验证二级密码</view>
				<uni-icons type="closeempty" @click="close()" />
			</view>

			<view class="tac f48" v-if="price || unit">
				<text>￥{{price}}</text>
				<text>{{unit.name}}</text>
			</view>

			<view class="line mtb20 plr30">
				<codeInput v-model:modelValue="pwd" />
				<!-- <input v-model="pwd" :maxlength="6" type="number" placeholder="输入二级密码" /> -->
			</view>

			<view class="btns mtb30 rows">
				<view class="btn lg cancel plr40 f1" @click="$refs.pwdRef.close()">取消</view>
				<view class="btn lg black plr40 f1" @click="handleConfirm">验证</view>
			</view>

			<!-- 安全键盘 -->
			<keyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"  />
		</view>
	</uni-popup>
</template>

<style>
</style>