<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>
          <v-container fluid class="pt-4 pb-0">
            <v-breadcrumbs :items="breadcrumbs">
              <template #prepend>
                <v-icon :icon="currentBreadcrumbIcon" size="small" class="me-2" />
              </template>
              <template #item="{ item }">
                <v-breadcrumbs-item
                  :disabled="item.disabled"
                  :to="item.to"
                  :exact="true"
                >
                  {{ item.title }}
                </v-breadcrumbs-item>
              </template>
            </v-breadcrumbs>
          </v-container>
          <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, computed } from 'vue'
import AppHeader from './AppHeader.vue'
import AppDrawer from './AppDrawer.vue'
import AppFooter from './AppFooter.vue'

import { useAuthStore } from '../stores/auth'
import { useRouter, useRoute } from 'vue-router'
import { GLOBAL_MENU_ITEMS } from './constants/menuItems'

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

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
})

const breadcrumbs = computed(() => {
  const matched = route.matched.filter(r => r.meta && r.meta.title)
  const items = matched.map((r, index) => ({
    title: r.meta.title,
    to: r.path,
    disabled: index === matched.length - 1,
  }))
  // 如果没有任何匹配标题，至少返回 Home
  if (items.length === 0) {
    return [{ title: 'Home', to: '/', disabled: route.path === '/' }]
  }
  return items
})

const currentBreadcrumbIcon = computed(() => {
  const targetPath = route.path
  const findIconByPath = (items, path) => {
    for (const item of items) {
      if (item.path === path && item.mdiIcon) return item.mdiIcon
      if (item.children) {
        const childIcon = findIconByPath(item.children, path)
        if (childIcon) return childIcon
      }
    }
    return null
  }
  return findIconByPath(GLOBAL_MENU_ITEMS, targetPath) || 'mdi-home'
})
</script>

<style scoped>
</style>
