<template>
  <div>
    <keep-alive v-if="isKeepAlive">
      <NuxtPage />
    </keep-alive>
    <NuxtPage v-else />
    <back-top v-if="currentPath !== '/404'" />
  </div>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useRoute } from "#imports";
import BackTop from "@/components/back-top/back-top.vue";
import { useAppInit } from "@/composables/useAppInit.js";

// 获取当前路由对象
const route = useRoute();
// 计算当前路由的完整路径
const currentPath = computed(() => route.fullPath);
// 根据 meta 信息判断是否需要缓存页面
const isKeepAlive = computed(() => {
  return route.meta.keepAlive;
});

// 应用初始化
const { initApp } = useAppInit();

onMounted(() => {
  // 在应用挂载时初始化
  initApp();
});

useHead({
  title: "明阳良光",
  meta: [
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      hid: "description",
      name: "description",
      content: "明阳良光",
    },
    {
      name: "theme-color",
      content: "#4f8cef",
    },
  ],
  link: [
    {
      hid: "favicon",
      rel: "icon",
      href: "/favicon.ico",
    },
    {
      hid: "iconfont",
      rel: "stylesheet",
      href: "/static/font/iconfont.css",
    },
  ],
  script: [
    {
      innerHTML: `
				(function() {
					// 简化的客户端语言状态设置
					if (typeof window !== 'undefined') {
						try {
							// 根据当前路径确定语言
							const currentPath = window.location.pathname;
							const currentLang = currentPath.startsWith('/cn') ? 'cn' : 'en';
							
							// 设置语言属性
							document.documentElement.setAttribute('lang', currentLang === 'cn' ? 'zh-CN' : 'en');
							document.documentElement.setAttribute('data-locale', currentLang);
							
							// 设置页面标题的语言属性
							if (document.title) {
								document.title = document.title + (currentLang === 'cn' ? ' - 明阳良光' : ' - Mingyang Liangguang');
							}
						} catch (e) {
							console.warn('Language setup failed:', e);
							// 出错时默认英文
							document.documentElement.setAttribute('lang', 'en');
							document.documentElement.setAttribute('data-locale', 'en');
						}
					}
				})();
			`,
      type: "text/javascript",
    },
  ],
});
</script>

<style lang="scss">
@import "./common/css/common.scss";

// 防止语言切换时的闪烁 - 优化版本
html:not([data-locale]) {
  // 在语言未确定前隐藏内容
  body {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
}

// 语言确定后显示内容
html[data-locale] {
  body {
    opacity: 1;
  }
}

// 确保语言切换平滑
html {
  transition: all 0.1s ease;
}

// 语言特定的样式优化
html[data-locale="en"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-locale="cn"] {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

// 防止水合不匹配时的闪烁
.navbar {
  opacity: 1;
  transition: opacity 0.2s ease;
}

// 确保内容在语言切换时不会跳动
* {
  transition: none;
}

// 只有特定元素需要过渡效果
.navbar,
.menu-item,
.language-selector,
.mobile-menu {
  transition: all 0.3s ease;
}

// 防止语言切换时的布局抖动
.language-selector {
  min-width: 80px; // 确保语言选择器有固定宽度
}

.lang-text {
  min-width: 40px; // 确保语言文本有固定宽度
  text-align: center;
}

@font-face {
  font-family: MiSans-Light;
  src: url("/static/font/MiSans-Light.ttf");
}

@font-face {
  font-family: MiSans-Bold;
  src: url("/static/font/MiSans-Bold.ttf");
}

@font-face {
  font-family: MiSans-Medium;
  src: url("/static/font/MiSans-Medium.ttf");
}

@font-face {
  font-family: MiSans-Regular;
  src: url("/static/font/MiSans-Regular.ttf");
}

@font-face {
  font-family: MiSans-Normal;
  src: url("/static/font/MiSans-Normal.ttf");
}

@font-face {
  font-family: MiSans-SemiBold;
  src: url("/static/font/MiSans-Semibold.ttf");
}
</style>
