<template>
	<h-dark :title="t('pwd.titleSetPwd')"></h-dark>
	<view class="flex flex-col items-center px-[40rpx] box-border">
		<view class="w-full">
			<u-form :border-bottom="false" :label-width="150" label-position="top">
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.pwd')" :border-bottom="false" @click="inputClick(2)">
					<text v-if="formData.password_pay != ''">{{formData.password_pay}}</text>
					<text v-if="formData.password_pay == ''" class="text-muted">{{t('pwd.pwdEmpty')}}</text>
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.pwdConfirm')" :border-bottom="false" @click="inputClick(3)">
					<text v-if="formData.password_pay_confirm != ''">{{formData.password_pay_confirm}}</text>
					<text v-if="formData.password_pay_confirm == ''" class="text-muted">{{t('pwd.pwdConfirmEmpty')}}</text>
				</u-form-item>
			</u-form>
			<view class="mt-[100rpx]">
				<u-button type="primary" :disabled="formData.password_pay==''||formData.password_pay_confirm==''"
					@click="handleConfirm"> {{t('common.submit')}} </u-button>
			</view>
			
			<u-keyboard class="max-w-[750px]" ref="uKeyboard1" mode="number" :mask-close-able="false" :dot-enabled="false"
				tips=" " confirm-text="" cancel-text="" v-model="show_keyboard" @change="keyboardChange"
				@backspace="backspace" :show-input-val="true" :input-value="input.pwd"></u-keyboard>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { setPayPwd } from '@/api/user'
	import { reactive, ref } from 'vue'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('pwd.titleSetPwd') })
	const formData = reactive<any>({
		password_pay: '',
		password_pay_confirm: ''
	})
	const input = reactive<any>({
		pwd: '',
	})
	
	const show_keyboard = ref(false)
	const show_type = ref(1)
	const loading_keyboard = ref(false)

	const keyboardChange = (val : string) => {
		switch (show_type.value) {
			case 2:
				formData.password_pay += val;
				if (formData.password_pay.length == 6) {
					show_keyboard.value = false;
					setTimeout(() => {
						loading_keyboard.value = false;
					}, 500)
				}
				break
			case 3:
				formData.password_pay_confirm += val;
				if (formData.password_pay_confirm.length == 6) {
					show_keyboard.value = false;
					setTimeout(() => {
						loading_keyboard.value = false;
					}, 500)
				}
				break
		}
		input.pwd += val
	}
	const backspace = () => {
		// 删除value的最后一个字符
		switch (show_type.value) {
			case 2:
				if (formData.password_pay.length) formData.password_pay = (formData.password_pay).substr(0, (formData.password_pay.length) - 1);
				break
			case 3:
				if (formData.password_pay_confirm.length) formData.password_pay_confirm = (formData.password_pay_confirm).substr(0, (formData.password_pay_confirm.length) - 1);
				break
		}
		if (input.pwd.length) input.pwd = (input.pwd).substr(0, (input.pwd.length) - 1);
	}

	const inputClick = (type : number) => {
		if (loading_keyboard.value) return
		show_type.value = type
		input.pwd = ''
		switch (show_type.value) {
			case 2:
				formData.password_pay = '';
				break
			case 3:
				formData.password_pay_confirm = '';
				break
		}
		show_keyboard.value = true;
		loading_keyboard.value = true;
	}

	const handleConfirm = async () => {
		if (formData.password_pay.length != 6) return uni.$u.toast(t('pwd.pwdEmpty'))
		if (formData.password_pay_confirm.length != 6) return uni.$u.toast(t('pwd.pwdConfirmEmpty'))
		if (formData.password_pay != formData.password_pay_confirm) return uni.$u.toast(t('pwd.twoPwdError'))

		await setPayPwd(formData)
		uni.$u.toast(t('network.setSuccessful'))
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
</script>

<style lang="scss">
</style>