<template>
  <div class="app-container">
    <!-- 未登录时显示遮罩层 -->
    <div v-if="!isLoggedIn" class="login-overlay">
      <div class="login-message">
        <h2>请先登录</h2>
        <p>您需要登录后才能使用此应用</p>
      </div>
    </div>
    
    <!-- 主界面 -->
    <div v-show="isLoggedIn" class="main-interface">
      <div class="sidebar">
        <div class="menu-items">
          <button 
            :class="['menu-item', { active: currentTab === 'video' }]"
            @click="currentTab = 'video'"
          >
            <span class="icon">🎬</span>
            <span>视频</span>
          </button>
          <div class="separator"></div>
          <button 
            :class="['menu-item', { active: currentTab === 'extract' }]"
            @click="currentTab = 'extract'"
          >
            <span class="icon">✂️</span>
            <span>抽帧</span>
          </button>
        </div>
        <div class="menu-bottom">
          <button class="menu-item" @click="handleLogout">
            <span class="icon">👤</span>
          </button>
        </div>
      </div>
      <div class="main-content">
        <VideoTab v-if="currentTab === 'video'" />
        <ExtractTab v-if="currentTab === 'extract'" />
      </div>
    </div>
    
    <!-- 登录对话框 -->
    <LoginDialog 
      v-if="showLogin" 
      :allow-close="isLoggedIn"
      @close="handleLoginClose" 
      @login-success="handleLoginSuccess"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VideoTab from './components/VideoTab.vue'
import ExtractTab from './components/ExtractTab.vue'
import LoginDialog from './components/LoginDialog.vue'

const currentTab = ref('video')
const showLogin = ref(false)
const isLoggedIn = ref(false)

// 检查登录状态
const checkLoginStatus = () => {
  const loginStatus = localStorage.getItem('isLoggedIn')
  const loginTime = localStorage.getItem('loginTime')
  
  if (loginStatus === 'true' && loginTime) {
    // 检查登录是否过期（24小时）
    const now = Date.now()
    const loginTimestamp = parseInt(loginTime)
    const hoursSinceLogin = (now - loginTimestamp) / (1000 * 60 * 60)
    
    if (hoursSinceLogin < 24) {
      isLoggedIn.value = true
    } else {
      // 登录已过期
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('loginTime')
      isLoggedIn.value = false
      showLogin.value = true
    }
  } else {
    isLoggedIn.value = false
    showLogin.value = true
  }
}

// 处理登录成功
const handleLoginSuccess = () => {
  isLoggedIn.value = true
  showLogin.value = false
  localStorage.setItem('isLoggedIn', 'true')
  localStorage.setItem('loginTime', Date.now().toString())
}

// 处理登录对话框关闭
const handleLoginClose = () => {
  // 如果未登录，不允许关闭登录对话框
  if (!isLoggedIn.value) {
    return
  }
  showLogin.value = false
}

// 处理登出
const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    isLoggedIn.value = false
    showLogin.value = true
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('loginTime')
  }
}

// 组件挂载时检查登录状态
onMounted(() => {
  checkLoginStatus()
})
</script>

<style scoped>
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #fefefe, #ededef);
}

.sidebar {
  width: 70px;
  background: #7163ba;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
  border-right: 2px solid #ebedf3;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-item {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background: transparent;
  border: 2px solid #000;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}

.menu-item:hover {
  background: #5a5080;
}

.menu-item.active {
  background: #8b4513;
}

.menu-item .icon {
  font-size: 18px;
}

.separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 5px 10px;
}

.menu-bottom {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.login-message {
  background: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-message h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
}

.login-message p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.main-interface {
  display: flex;
  width: 100%;
  height: 100%;
}
</style>

