<script lang="ts" setup>
import { onActivated, ref } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import BaseInfo from './components/base-info.vue';
import ResetPasswd from './components/reset-passwd.vue';
import StyleLayout from './components/style-layout.vue';
import { useRoute } from 'vue-router';
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
const appStore = useAppStore();
const route = useRoute();
const { t } = useI18n();

/**Tab标签激活 */
let activeKey = ref<string>('base-info');

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

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  fnLocale();
})

</script>

<template>
  <PageContainer>
    <a-card>
      <a-tabs tab-position="left" v-model:activeKey="activeKey">
        <a-tab-pane key="base-info" :tab="t('views.account.settings.baseInfo')">
          <BaseInfo></BaseInfo>
        </a-tab-pane>
        <a-tab-pane
          key="reset-passwd"
          :tab="t('views.account.settings.resetPasswd')"
        >
          <ResetPasswd></ResetPasswd>
        </a-tab-pane>
        <a-tab-pane
          key="style-layout"
          :tab="t('views.account.settings.styleLayout')"
        >
          <StyleLayout></StyleLayout>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </PageContainer>
</template>

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