<script setup lang="ts">
import type { FormInstance } from 'vant'
import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
import {

  showFailToast,
  Button as VanButton,
  Field as VanField,
  Form as VanForm,
} from 'vant'
import { computed, reactive, ref, unref } from 'vue'

const { handleBackLogin, getLoginState } = useLoginState()
const { getFormRules } = useFormRules()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)

const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive({
  username: '',
  mobile: '',
  sms: '',
})

function handleReset() {
  formRef.value
    ?.validate()
    .then(async () => {
      try {
        loading.value = true
        // do something
      }
      finally {
        loading.value = false
      }
    })
    .catch((e) => {
      showFailToast('验证失败')
      console.error(e)
    })
}
</script>

<template>
  <div v-if="getShow" class="form forget_password_form">
    <VanForm ref="formRef" @submit="handleReset">
      <VanField
        v-model="formData.username"
        class="form_field"
        name="username"
        label="账号"
        placeholder="请输入账号"
        label-align="top"
        :rules="getFormRules.username"
      />
      <VanField
        v-model="formData.mobile"
        class="form_field"
        name="password"
        label="手机号码"
        placeholder="请输入手机号码"
        label-align="top"
        :rules="getFormRules.mobile"
      />

      <VanField
        v-model="formData.sms"
        class="form_field"
        center
        clearable
        label-align="top"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="getFormRules.sms"
      >
        <template #button>
          <VanButton size="small" type="primary">
            发送验证码
          </VanButton>
        </template>
      </VanField>
      <VanButton class="reset_btn btn" type="primary" block native-type="submit" :loading="loading">
        重 置
      </VanButton>
      <VanButton class="back_btn btn" plain type="primary" block @click="handleBackLogin">
        返 回
      </VanButton>
    </VanForm>
  </div>
</template>

<style scoped lang="less">
@import '@af-mobile-client-vue3/styles/login.less';
</style>
