<template>
  <layout v-if="alreadyLogin" style="z-index: 999999; position: relative;"></layout>
  <div v-if="alreadyLogin" style="height:44px; " />
  <router-view style="min-height: 85vh;"></router-view>
  <t-footer text="Copyright © 2025 AUTS All Rights Reserved --Version0.0.3" />
</template>
<script>




</script>


<script setup>
  import layout from '../src/pages/layout/index.vue'
  import { ref, onMounted, onBeforeUnmount, watch, provide, watchEffect } from 'vue'
  import { Toast } from 'tdesign-mobile-vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  setTimeout(() => {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      webToDark(true);
    } else {
      webToDark(false);
    }
  }, 0);
  // 切换主题
  const isDarkMode = ref(false)
  const webToDark = (dark) => {
    if (dark) {
      document.documentElement.setAttribute('theme-mode', 'dark')
      isDarkMode.value = true
    } else {
      document.documentElement.removeAttribute('theme-mode')
      isDarkMode.value = true
    }
  }
  const toggleTheme = () => {
    isDarkMode.value = !isDarkMode.value
    let root = document.documentElement;

    if (!isDarkMode.value) {
      // 如果当前是暗色主题，切换到亮色主题
      root.style.setProperty('--color-background', '#ffffff');
      root.style.setProperty('--color-background-soft', '#f8f8f8');
      root.style.setProperty('--color-background-mute', '#f2f2f2');
      root.style.setProperty('--color-border', 'rgba(60, 60, 60, 0.12)');
      root.style.setProperty('--color-border-hover', 'rgba(60, 60, 60, 0.29)');
      root.style.setProperty('--color-heading', '#2c3e50');
      root.style.setProperty('--color-text', '#2c3e50');
      root.setAttribute('data-theme', 'light');
      setTimeout(() => {
        root.removeAttribute('theme-mode');
      }, 20);
    } else {
      // 如果当前是亮色主题，切换到暗色主题
      root.style.setProperty('--color-background', '#242424');
      root.style.setProperty('--color-background-soft', '#222222');
      root.style.setProperty('--color-background-mute', '#282828');
      root.style.setProperty('--color-border', 'rgba(84, 84, 84, 0.48)');
      root.style.setProperty('--color-border-hover', 'rgba(84, 84, 84, 0.65)');
      root.style.setProperty('--color-heading', '#ffffff');
      root.style.setProperty('--color-text', 'rgba(235, 235, 235, 0.64)');
      root.setAttribute('data-theme', 'dark');
      setTimeout(() => {
        root.setAttribute('theme-mode', 'dark');
      }, 20);
    }
  }
  onMounted(() => {
    // 初始检查登录状态
    checkLoginStatus()

    // 主题初始化
    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleColorSchemeChange = (e) => {
      webToDark(e.matches)
    }

    // 初始设置
    webToDark(darkModeQuery.matches)

    // 监听系统主题变化
    darkModeQuery.addEventListener('change', handleColorSchemeChange)

    // 清理监听器
    return () => {
      darkModeQuery.removeEventListener('change', handleColorSchemeChange)
    }
  })
  const alreadyLogin = ref(false)
  // 初始化检查登录状态
  const checkLoginStatus = () => {
    alreadyLogin.value = localStorage.getItem('login') == 'true'
    setTimeout(() => {
      if (alreadyLogin.value) {
        //router.push('/home')
      } else {
        router.push('/login')
      }
    }, 6);
  }
  provide('checkLoginStatus', checkLoginStatus)
</script>


<style scoped>
  /* 按钮样式优化 */
  .t-button {
    margin-top: 5px;
    height: 40px;
    font-weight: 400;
  }

  .t-checkbox--block {
    padding: 0;
  }
  /* 主题切换按钮 */
  .theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 8px 16px;
    background: var(--toggle-bg);
    color: var(--toggle-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }


  /*  :deep .t-footer__text {
    bottom: 2px;
    position: relative;
  }*/
</style>
