<template>
  <div class="login_title">
    {{ getFormTitle }}
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { LoginStateEnum, useLoginState } from './useLogin';

  const { t } = useI18n();

  const { getLoginState } = useLoginState();

  const getFormTitle = computed(() => {
    const titleObj = {
      [LoginStateEnum.RESET_PASSWORD]: '重置密码',
      [LoginStateEnum.LOGIN]: '用户登录',
      [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
      [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
      [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
    };
    return titleObj[unref(getLoginState)];
  });
</script>
<style lang="less" scoped>
  .login_title {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    height: 68px;
    font-family: Alibaba PuHuiTi;
    font-weight: 900;
    font-size: 22px;
    color: #131313;
  }
</style>
