<template>
  <v-app>
    <v-img
      src="/src/assets/images/login.jpg"
      cover
      height="100vh"
      style="object-position: center top;"
    >
      <v-layout height="100vh" style="background: rgba(255, 255, 255, 0.85);">
        <AppHeader :drawer-active="drawerActive" @toggle-drawer="toggleDrawer" @logout="showLogoutDialog = true" />
        <AppDrawer v-model="drawerActive" />
        <v-main>
          <slot></slot>
        </v-main>
        <AppFooter />
      </v-layout>
    </v-img>
    <!-- 登出确认对话框 -->
    <v-dialog v-model="showLogoutDialog" max-width="400">
      <v-card>
        <v-card-title>确认登出</v-card-title>
        <v-card-text>你确定要退出登录吗？</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" text @click="showLogoutDialog = false">取消</v-btn>
          <v-btn color="primary" text @click="confirmLogout">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppHeader from './AppHeader.vue'
import AppDrawer from './AppDrawer.vue'
import AppFooter from './AppFooter.vue'

import { useAuthStore } from '../stores/auth'
import { useRouter } from 'vue-router'

const auth = useAuthStore()
const router = useRouter()

const drawerActive = ref(false)
const toggleDrawer = () => { drawerActive.value = !drawerActive.value }

const showLogoutDialog = ref(false)
const confirmLogout = () => {
  showLogoutDialog.value = false
  handleLogout()
}
const handleLogout = () => {
  // 1. 调用 Pinia 的登出方法
  auth.logout && auth.logout()

  // 2. 清除 localStorage/sessionStorage（如有）
  localStorage.removeItem('token')
  sessionStorage.removeItem('token')

  // 3. 跳转到登录页
  router.push('/login')
}

// 登录后自动展开 Drawer
onMounted(() => {
  drawerActive.value = true
})
</script>

<style scoped>
</style>
