<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { computed } from 'vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const showLayout = computed(() => {
  // Check meta first, default to true unless explicitly false (if not login)
  if (route.name === 'login') return false
  return route.meta.showLayout !== false
})

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}

const handleMenuSelect = (index: string) => {
  if (index === '/big-screen') {
    const routeData = router.resolve({ path: '/big-screen' })
    window.open(routeData.href, '_blank')
  } else {
    router.push(index)
  }
}
</script>

<template>
  <div v-if="showLayout" class="app-container">
    <el-container class="main-container">
      <el-header class="header">
        <div class="logo">AI 值班平台</div>
        <div class="user-info">
          <span>{{ authStore.username }}</span>
          <el-button type="danger" size="small" @click="handleLogout" style="margin-left: 10px;">退出登录</el-button>
        </div>
      </el-header>
      <el-container class="content-container">
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="route.path"
            class="el-menu-vertical"
            @select="handleMenuSelect"
          >
            <el-menu-item index="/big-screen">
              <el-icon><Monitor /></el-icon>
              <span>监控大屏</span>
            </el-menu-item>
            <el-menu-item index="/cameras">
              <el-icon><VideoCamera /></el-icon>
              <span>摄像头管理</span>
            </el-menu-item>
            <el-menu-item index="/models">
              <el-icon><Connection /></el-icon>
              <span>模型管理</span>
            </el-menu-item>
            <el-menu-item index="/tasks">
              <el-icon><List /></el-icon>
              <span>任务调度</span>
            </el-menu-item>
            <el-menu-item index="/logs">
              <el-icon><Document /></el-icon>
              <span>报警日志</span>
            </el-menu-item>
            <el-menu-item index="/reports">
              <el-icon><Document /></el-icon>
              <span>值班报告</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div v-else class="login-container">
    <router-view />
  </div>
</template>

<style scoped>
.app-container {
  height: 100%;
  width: 100%;
}

.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #409EFF;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.content-container {
  flex: 1; /* Fill remaining height */
  overflow: hidden; /* Prevent double scrollbar */
}

.aside {
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
}

.el-menu-vertical {
  height: 100%;
  border-right: none;
}

.main-content {
  padding: 20px;
  overflow-y: auto; /* Scroll inside main content */
  background-color: #fff;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}
</style>
