<template>
  <AdminTablePage
    eyebrow="SYSTEM MENUS"
    title="菜单管理"
    description="查看数据库驱动的后台多级菜单，确认路径、权限标识和双列菜单区域。"
    primary-action="新增菜单"
    :columns="columns"
    :rows="flatRows"
    :loading="loading"
    :status-options="statusOptions"
    @refresh="load"
  />
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import AdminTablePage from './AdminTablePage.vue'
import { getAdminMenus } from '@/api/request/admin'
const columns = [
  { key: 'id', label: 'ID' },
  { key: 'title', label: '菜单标题' },
  { key: 'path', label: '路由路径' },
  { key: 'component', label: '组件' },
  { key: 'permission', label: '权限标识', type: 'tag' },
  { key: 'menu_area', label: '菜单区域', type: 'tag', map: { 1: '主列', 2: '次列' } }
]
const statusOptions = [{ label: '主列', value: '1' }, { label: '次列', value: '2' }]
const menus = ref([])
const loading = ref(false)
const flatRows = computed(() => menus.value.flatMap(item => [{ ...item, menu_area: String(item.menu_area) }, ...(item.children || []).map(child => ({ ...child, menu_area: String(child.menu_area) }))]))
const load = async () => {
  loading.value = true
  menus.value = await getAdminMenus().catch(() => [])
  loading.value = false
}
onMounted(load)
</script>
