<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import useI18n from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
const route = useRoute();
const appStore = useAppStore();
const { t } = useI18n();

/**
 * 国际化翻译转换
 */
 function fnLocale() {
  let title = route.meta.title as string;
  if (title.indexOf('router.') !== -1) {
    title = t(title);
  }
  appStore.setTitle(title);
}

onMounted(() => {
  fnLocale();
});
</script>

<template>
  <a-result
    status="404"
    :title="t('views.error.err404.ttile')"
    :sub-title="t('views.error.err404.subTitle')"
  >
    <template #extra>
      <RouterLink :to="{ name: 'Index' }" :replace="true">
        <a-button type="primary">
          {{ t('views.error.err404.backHome') }}
        </a-button>
      </RouterLink>
    </template>
    <a-typography>
      <a-typography-title>
        {{ t('views.error.err404.tipTitle') }}
      </a-typography-title>
      <a-typography-paragraph>
        1. {{ t('views.error.err404.paragraph') }}
      </a-typography-paragraph>
      <a-typography-paragraph>
        2. {{ t('views.error.err404.paragraph1') }}
      </a-typography-paragraph>
    </a-typography>
  </a-result>
</template>

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