<script setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Header from './components/Header.vue'
import RightBar from './components/RightBar.vue'
import LoginModal from './components/LoginModal.vue'
import { useUserStore } from './store/user'

const route = useRoute()
const userStore = useUserStore()

// 根据路由meta信息判断是否显示Header和RightBar
const showHeader = computed(() => !route.meta.hideHeader)
const showRightBar = computed(() => !route.meta.hideRightBar)

// 控制登录弹窗的显示
const showLoginModal = computed(() => userStore.getShowLoginModal)

const handleLoginSuccess = () => {
  userStore.setShowLoginModal(false)
  // 可以在这里添加额外的登录成功逻辑，例如重新加载数据
  // 重新加载页面数据
  window.location.reload()
}

const handleCloseLoginModal = () => {
  userStore.setShowLoginModal(false)
}

// 监听自定义认证错误事件（备用方案）
const handleAuthErrorEvent = (event) => {
  console.log('[APP] 收到认证错误事件:', event.detail)
  userStore.setShowLoginModal(true)
}

onMounted(() => {
  // 监听来自API拦截器的自定义事件
  window.addEventListener('show-login-modal', handleAuthErrorEvent)
  console.log('[APP] 已注册 show-login-modal 事件监听器')
})

onUnmounted(() => {
  // 清理事件监听器
  window.removeEventListener('show-login-modal', handleAuthErrorEvent)
  console.log('[APP] 已移除 show-login-modal 事件监听器')
})

// 路由变化时记录UV数据
const router = useRouter()
router.afterEach((to) => {
  // 延迟一小段时间确保页面完全加载
  setTimeout(() => {
    // UV数据记录已移除
  }, 100)
})

// 清理函数
const cleanup = () => {
  console.log('清理全局页面保护资源')
  // 这里可以添加其他清理逻辑
}

// 页面首次加载时记录UV数据
// UV数据记录已移除

</script>

<template>
  <div id="app">
    <Header v-if="showHeader" />
    <router-view />
    <RightBar v-if="showRightBar" />
    
    <!-- 全局登录弹窗 -->
    <LoginModal
      :visible="showLoginModal"
      mode="login"
      @login="handleLoginSuccess"
      @close="handleCloseLoginModal"
    />
  </div>
</template>

<style>
/* 全局页面保护样式 - 禁用文本选择和拖拽 */
.protected * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* 允许输入框和可编辑区域正常选择文本 */
.protected input,
.protected textarea,
.protected [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#app {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 移动端适配 - RightBar使用fixed定位，无需预留空间 */
</style>
