<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useTheme } from './composables/useTheme'
import { useI18n } from './composables/useI18n'
import { useResponsive } from './composables/useResponsive'
import { useAppStore } from './stores/index.js'

// 响应式数据
const showMobileMenu = ref(false)
const currentYear = ref(new Date().getFullYear())

// 状态管理
const appStore = useAppStore()

// 主题系统
const { 
  currentTheme, 
  toggleTheme, 
  isDarkMode,
  themes 
} = useTheme()

// 国际化
const { 
  currentLocale, 
  locales, 
  t, 
  setLocale 
} = useI18n()

// 响应式检测
const { 
  isMobile, 
  isTablet, 
  isDesktop, 
  screenSize 
} = useResponsive()

// 路由
const router = useRouter()

// 计算属性
const isSmallScreen = computed(() => isMobile.value || isTablet.value)
const appTitle = computed(() => t('app.title'))

// 移动端菜单切换
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

// 语言切换处理
const handleLanguageChange = (locale) => {
  setLocale(locale)
  // 保存语言偏好到localStorage
  localStorage.setItem('preferred-language', locale)
}

// 监听stores语言切换事件
const handleStoreLocaleChange = (event) => {
  // 已移除自定义事件，改用响应式监听
}

// 主题切换处理
const handleThemeChange = () => {
  toggleTheme()
  // 保存主题偏好到localStorage
  localStorage.setItem('preferred-theme', currentTheme.value)
}

// 初始化应用设置
const initializeApp = () => {
  // 设置页面标题
  document.title = appTitle.value
  
  // 设置页面语言
  document.documentElement.lang = currentLocale.value
  
  // 设置Meta主题色 (移动端状态栏)
  const metaThemeColor = document.querySelector('meta[name=theme-color]')
  if (metaThemeColor) {
    const bgColor = getComputedStyle(document.documentElement)
      .getPropertyValue('--bg-primary')?.trim() || '#ffffff'
    metaThemeColor.setAttribute('content', bgColor)
  }
}

// 监听响应式变化
const handleResize = () => {
  if (!isSmallScreen.value && showMobileMenu.value) {
    showMobileMenu.value = false
  }
}

// 监听语言变化
const unwatchLocale = watch(() => currentLocale.value, () => {
  initializeApp()
})

// 监听主题变化
const unwatchTheme = watch(() => currentTheme.value, () => {
  initializeApp()
})

// 生命周期
onMounted(() => {
  initializeApp()
  window.addEventListener('resize', handleResize)
  window.addEventListener('locale-changed', handleStoreLocaleChange)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('locale-changed', handleStoreLocaleChange)
  unwatchLocale()
  unwatchTheme()
})
const loading = ref(false);
const qmLoading = ref(false);
const closeMethods = {
  close: ()=>{
   loading.value = false
   qmLoading.value = false;
  }
}
window.setElLoading = (qp=false)=>{
  if(qp){
    qmLoading.value = true
  }else{
    loading.value = true
  }
  return closeMethods
}
</script>

<template>
  <div 
    id="app" 
    class="app"
    :class="{
      'app--mobile': isMobile,
      'app--tablet': isTablet,
      'app--desktop': isDesktop,
      'app--dark': isDarkMode,
      'menu-open': showMobileMenu
    }"
  >
    <!-- 主要内容区域 -->
    <main class="app-main">
      <div class="main-container">
          <DtLoadingCom v-if="loading" />
        <router-view v-slot="{ Component, route }">
            <component :is="Component" :key="route.path" />
        </router-view>
      </div>
    </main>
  </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 应用主容器 */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 头部导航 */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.header-brand:hover {
  transform: scale(1.02);
}

.brand-logo {
  width: 2rem;
  height: 2rem;
}

.brand-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-link {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.router-link-active {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.nav-link.router-link-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: var(--spacing-md);
  right: var(--spacing-md);
  height: 2px;
  background: var(--primary-color);
  border-radius: 1px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--border-radius-md);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.control-btn:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.lang-text {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

/* 移动端菜单 */
.mobile-menu-btn {
  display: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger span:nth-child(1) {
  transform: translateY(-4px);
}

.hamburger span:nth-child(2) {
  transform: translateY(0);
}

.hamburger span:nth-child(3) {
  transform: translateY(4px);
}

.hamburger.active span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav--open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav-menu {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.mobile-nav-link {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  display: block;
}

.mobile-nav-link:hover,
.mobile-nav-link.router-link-active {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

/* 主要内容 */
.app-main {
  flex: 1;
  padding: var(--spacing-lg) 0;
}

.main-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

/* 底部 */
.app-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-lg) 0;
  margin-top: auto;
}

.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  text-align: center;
}

.footer-text {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.footer-tech {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.heart {
  color: var(--primary-color);
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 加载指示器 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  backdrop-filter: blur(2px);
}

.loading-spinner {
  background-color: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

.loading-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式断点 */
@media (max-width: 768px) {
  .header-nav--desktop {
    display: none;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .header-container {
    padding: 0 var(--spacing-sm);
  }
  
  .main-container {
    padding: 0 var(--spacing-sm);
  }
  
  .footer-container {
    padding: 0 var(--spacing-sm);
  }
  
  .brand-title {
    font-size: var(--font-size-md);
  }
  
  .app-main {
    padding: var(--spacing-md) 0;
  }
}

@media (min-width: 769px) {
  .mobile-nav {
    display: none;
  }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-container {
    padding: 0 var(--spacing-lg);
  }
  
  .main-container {
    padding: 0 var(--spacing-lg);
  }
  
  .footer-container {
    padding: 0 var(--spacing-lg);
  }
}
</style>
