<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import AppSidebar from '@/components/layout/AppSidebar.vue'
import AppTopbar from '@/components/layout/AppTopbar.vue'

const appStore = useAppStore()
const userStore = useUserStore()

// 侧边栏菜单
const monitorMenus = computed(() => {
  const base = [
    { key: 'targets', icon: '📊', label: '监测目标', path: '/service-monitor' },
    { key: 'reports', icon: '📋', label: '巡检报告', path: '/service-monitor/reports' },
    { key: 'statistics', icon: '📈', label: '监测统计', path: '/service-monitor/statistics' },
    { key: 'schedule', icon: '⏰', label: '定时任务', path: '/service-monitor/schedule' },
    { key: 'logs', icon: '📝', label: '操作日志', path: '/service-monitor/logs' },
  ]
  if (userStore.isAdmin) {
    base.push(
      { key: 'notification', icon: '🔔', label: '通知配置', path: '/service-monitor/notification' },
      { key: 'manage', icon: '⚙️', label: '目标管理', path: '/service-monitor/targets' }
    )
  }
  return base
})
</script>

<template>
  <div class="layout-monitor">
    <AppSidebar
      :menus="monitorMenus"
      brand-icon="🛠️"
      brand-title="运维"
      v-model:mobile-open="appStore.sidebarMobileOpen"
    />
    <AppTopbar :show-home="true" :show-hamburger="true" />
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<style scoped lang="scss">
.layout-monitor {
  min-height: 100vh;
}
</style>
