<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';
import { usePrefersColorScheme, viewTransitionTheme } from 'antdv-pro-layout';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import useLayoutStore from '@/store/modules/layout';
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
import { CACHE_LOCAL_PROCONFIG } from './constants/cache-keys-constants';
import { localRemove } from './utils/cache-local-utils';
const { t, currentLocale } = useI18n();
const { themeConfig, initPrimaryColor, changeConf } = useLayoutStore();
dayjs.extend(advancedFormat);
// dayjs.locale('zh-cn'); // 默认中文
let locale = ref(enUS); // 国际化初始中文

// 偏好设置
const colorScheme = usePrefersColorScheme();
watch(
  () => colorScheme.value,
  themeMode => {
    viewTransitionTheme(() => {
      changeConf('theme', themeMode);
    });
  }
);

onBeforeMount(() => {
  // 全局message提示
  message.config({
    top: '100px', // 距离顶部位置100px
    duration: 3,
    maxCount: 15,
  });
  initPrimaryColor();
  localRemove(CACHE_LOCAL_PROCONFIG);

  // 输出应用版本号
  const appStore = useAppStore();
  console.info(
    `%c ${t('common.desc')} %c ${appStore.appCode} - ${appStore.appVersion} `,
    'color: #fadfa3; background: #030307; padding: 4px 0;',
    'color: #030307; background: #fadfa3; padding: 4px 0;'
  );
});

// 国际化切换语言
function fnChangeLocale(v: string) {
  switch (v) {
    case 'zh_CN':
      locale.value = zhCN;
      dayjs.locale(zhCN.locale);
      break;
    case 'en_US':
      locale.value = enUS;
      dayjs.locale(enUS.locale);
      break;
  }
}

// 加载多语言并进行监听
fnChangeLocale(currentLocale.value);
watch(currentLocale, val => {
  fnChangeLocale(val);
});
</script>

<template>
  <a-config-provider :theme="themeConfig" :locale="locale">
    <RouterView />
  </a-config-provider>
</template>

<style lang="css">
#app {
  height: 100%;
}
body .ant-pro-basicLayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: 0.5s;
  transition-property: height, opacity, transform;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  overflow: hidden;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(2em, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-2em, 0);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

[data-theme='dark']::view-transition-old(root) {
  z-index: 1;
}
[data-theme='dark']::view-transition-new(root) {
  z-index: 999;
}

::view-transition-old(root) {
  z-index: 999;
}
::view-transition-new(root) {
  z-index: 1;
}
</style>
