<template>
	<h-dark :title="t('pwd.chPayPwd')"></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.oldPwd')" :border-bottom="false"
					@click="inputClick(1)">
					<text v-if="formData.old_password_pay != ''">{{formData.old_password_pay}}</text>
					<text v-if="formData.old_password_pay == ''" class="text-muted">{{t('pwd.oldPwdEmpty')}}</text>
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.newPwd')" :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.newPwdEmpty')}}</text>
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.confirmPwd')" :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.confirmPwdEmpty')}}</text>
				</u-form-item>
			</u-form>
			<view class="mt-[100rpx]">
				<u-button type="primary" @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 { getUserInfo, userChangePayPwd } from '@/api/user'
	import { reactive, ref } from 'vue'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('pwd.titleChangePayPwd') })
	const formData = reactive<any>({
		old_password_pay: '',
		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 1:
				formData.old_password_pay += val;
				if (formData.old_password_pay.length == 6) {
					show_keyboard.value = false;
					//延时触发，防止误触
					setTimeout(() => {
						loading_keyboard.value = false;
					}, 500)
				}
				break
			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 1:
				if (formData.old_password_pay.length) formData.old_password_pay = (formData.old_password_pay).substr(0, (formData.old_password_pay.length) - 1);
				break
			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 1:
				formData.old_password_pay = '';
				break
			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.old_password_pay.length != 6) return uni.$u.toast(t('pwd.oldPwdEmpty'))
		if (formData.password_pay.length != 6) return uni.$u.toast(t('pwd.newPwdEmpty'))
		if (formData.password_pay_confirm.length != 6) return uni.$u.toast(t('pwd.confirmPwdEmpty'))
		if (formData.password_pay != formData.password_pay_confirm) return uni.$u.toast(t('pwd.twoPwdError'))

		await userChangePayPwd(formData)
		uni.$u.toast(t('network.modifySuccessfully'))
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
	const getData = async () => {
		const res = await getUserInfo()
		if (res.need_set_pwd == 1) {
			uni.$u.toast(t('pwd.pwdSetFirstTips'))
			uni.redirectTo({
				url: '/pages/change_password/set_password_pay'
			})
			return
		}
	}
	getData()
</script>

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