<template>
  <a-spin size="large" :spinning="state.loading">
    <a-modal v-model:open="props.showModel" title=""  @cancel="$emit('update:showModel', false)" >
      <template #footer>
        <a-button type="primary" @click="handleSubmit">Close</a-button>
      </template>
      <a-form
        name="basic"
        autocomplete="off"
        :label-col="{ span: 8 }"
        :rules="rules"
        :model="state.LoginData"
        ref="formRef"
      >
        <BiometricEnrollCard :username="state.LoginData.UserMobile" />
      </a-form>
    </a-modal>
  </a-spin>
</template>
<script setup lang="ts">
import { reactive, ref,watch } from "vue";
import authService from "@/service/security/authService";
import { LoginData } from "@/data/auto/loginData";
import { LoginProfile } from "@/data/auto/loginProfile";
import { useLoginProfileStore } from "@/store/modules/loginProfile";
import type { Rule } from "ant-design-vue/es/form";
import BiometricEnrollCard from "@/components/basic/BiometricEnrollCard.vue";
import { v4 as uuidv4 } from "uuid";
import { JSEncrypt } from "jsencrypt";
import CryptoJS from "crypto-js";
import i18n from "@/locales";

const { t } = i18n.global;

const formRef = ref();

const userLoginProfileStore = useLoginProfileStore();
const getCurrentUser = () => userLoginProfileStore.loginProfile?.Username ?? "";

const state = reactive({
  loading: false,
  LoginData: {
    UserMobile: getCurrentUser(),
    RsaUserPassword: "",
    UserPassword: "",
    ConfirmNewPassword: "",
  },
});

const props = defineProps(["showModel"]);
const emit = defineEmits(["update:showModel"]);


// 监听弹窗打开，每次弹出都会执行赋值
watch(
  () => props.showModel,
  (isOpen) => {
    if (isOpen) {
      state.LoginData.UserMobile = getCurrentUser();
    }
  },
  { flush: "post" } // 保证dom更新后执行，兜底兼容
);

const validatePass = async (_rule: Rule, value: string) => {
  if (value !== state.LoginData.UserPassword) {
    return Promise.reject(t("login.register.twoDifferentPasswords"));
  } else {
    return Promise.resolve();
  }
};

const rules: Record<string, Rule[]> = {
  ConfirmNewPassword: [{ validator: validatePass, trigger: "change" }],
};

const handleSubmit = async () => {
  try {
    state.loading = true;

    emit("update:showModel", false);
  } catch (error) {
  } finally {
    state.loading = false;
  }
};
</script>
