<template>
    <div class="page">
        <van-form ref="resetForm">
            <remit-input
                v-model:value="loginName"
                type="text"
                :required="true"
                fkey="loginName"
                :label="t('login.p1')"
                :clearable="true"
                @change="handleChange"
                :placeholder="t('login.msg1')"
                :rules="[{ required: true, message: t('login.msg1') }]"
            >
            </remit-input>
            <remit-input
                v-model:value="oldPassword"
                :type="showPassword ? 'text' : 'password'"
                fkey="oldPassword"
                :required="true"
                :label="t('login.p3')"
                :clearable="true"
                @change="handleChange"
                :placeholder="t('login.msg3')"
                :rules="[{ required: true, message: t('login.msg3') }]"
            >
                <template #right-icon1>
                    <van-icon name="eye-o" @click="showPassword = !showPassword" />
                </template>
            </remit-input>
            <remit-input
                v-model:value="newPassword"
                :type="showPassword1 ? 'text' : 'password'"
                fkey="newPassword"
                :required="true"
                :label="t('login.p4')"
                :clearable="true"
                @change="handleChange"
                :placeholder="t('login.msg3')"
                :rules="[{ required: true, message: t('login.msg3') }]"
            >
                <template #right-icon1>
                    <van-icon name="eye-o" @click="showPassword1 = !showPassword1" />
                </template>
            </remit-input>
            <div class="fixed-btn">
                <div class="cwg-button">
                    <van-button type="primary" block :loading="loading" @click="handleReset">{{ t('reset-password.reset') }}</van-button>
                </div>
            </div>
        </van-form>
        <SuccessPrompt v-if="isShow" :btnClick="btnClick" :btn-title="t('reset-password.login')" />
    </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { userApi } from '@/api/user'
const { t } = useI18n()
const resetForm = ref()
const router = useRouter()
const loading = ref(false)
const loginName = ref('')
const oldPassword = ref('')
const newPassword = ref('')
const isShow = ref(false)
const showPassword = ref(false)
const showPassword1 = ref(false)
const btnClick = () => {
    router.push('/login')
}
const handleReset = async () => {
    loading.value = true
    try {
        await resetForm.value?.validate(['loginName', 'newPassword', 'oldPassword'])
        if (newPassword.value == oldPassword.value) {
            showToast(t('login.msg5'))
            return
        }
        const res = await userApi.updateEmailPassword({ newPassword: newPassword.value, oldPassword: oldPassword.value })
        if (res.code !== 200) {
            isShow.value = true
        } else {
            showToast(res.msg)
        }
    } catch (error: any) {
        if (Array.isArray(error) && error.length > 0) {
            showToast(error[0].message)
        } else {
            showToast(t('login.msg0_2'))
        }
        return
    } finally {
        loading.value = false
    }
}
const handleChange = (value: any) => {}
</script>

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