<script lang="ts" setup>
import type { EasyFlowFormSchema } from '@easyflow/common-ui';

import { computed } from 'vue';

import { AuthenticationLogin, z } from '@easyflow/common-ui';
import { useAppConfig } from '@easyflow/hooks';
import { $t } from '@easyflow/locales';

import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
const authStore = useAuthStore();
const assetBase = import.meta.env.BASE_URL || '/';
const captchaAssetBase = `${assetBase}tac`;
const captchaButtonUrl = `${assetBase}tac-btn.png`;

const formSchema = computed((): EasyFlowFormSchema[] => {
  return [
    {
      component: 'EasyFlowInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'account',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'EasyFlowInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
  ];
});
function onSubmit(values: any) {
  // config 对象为TAC验证码的一些配置和验证的回调
  const config = {
    // 生成接口 (必选项,必须配置, 要符合tianai-captcha默认验证码生成接口规范)
    requestCaptchaDataUrl: `${apiURL}/userCenter/public/getCaptcha`,
    // 验证接口 (必选项,必须配置, 要符合tianai-captcha默认验证码校验接口规范)
    validCaptchaUrl: `${apiURL}/userCenter/public/check`,
    // 验证码绑定的div块 (必选项,必须配置)
    bindEl: '#captcha-box',
    // 验证成功回调函数(必选项,必须配置)
    validSuccess: (res: any, _: any, tac: any) => {
      // 销毁验证码服务
      tac.destroyWindow();
      // 调用具体的login方法
      values.validToken = res.data;
      authStore.authLogin(values);
    },
    // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
    validFail: (_: any, __: any, tac: any) => {
      // 验证失败后重新拉取验证码
      tac.reloadCaptcha();
    },
    // 刷新按钮回调事件
    btnRefreshFun: (_: any, tac: any) => {
      tac.reloadCaptcha();
    },
    // 关闭按钮回调事件
    btnCloseFun: (_: any, tac: any) => {
      tac.destroyWindow();
    },
  };
  const style = {
    logoUrl: null, // 去除logo
    // logoUrl: "/xx/xx/xxx.png" // 替换成自定义的logo
    btnUrl: captchaButtonUrl,
  };
  window
    // @ts-ignore
    .initTAC(captchaAssetBase, config, style)
    .then((tac: any) => {
      tac.init(); // 调用init则显示验证码
    })
    .catch((error: any) => {
      console.error('初始化tac失败', error);
    });
}
</script>

<template>
  <div>
    <AuthenticationLogin
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      @submit="onSubmit"
    />
    <div id="captcha-box" class="captcha-div"></div>
  </div>
</template>
<style scoped>
.captcha-div {
  position: absolute;
  top: 30vh;
  left: 21vh;
}
</style>
