﻿<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <div class="logo">
        <span class="logo-icon">🚀</span>
        <span class="logo-text">正在编辑的模块</span>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        theme="dark"
        mode="horizontal"
        class="menu"
        :items="menuItems"
      />
    </a-layout-header>
    <a-layout-content class="content">
      <div class="site-layout-content">
        <router-view />
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import localeData from 'dayjs/plugin/localeData';

dayjs.extend(localeData);
dayjs.locale('zh-cn');

import type { MenuProps } from 'ant-design-vue';
import { computed, h, onMounted, ref, watch } from 'vue';
import type { RouteRecordRaw } from 'vue-router';
import { RouterLink, useRoute } from 'vue-router';
import { getLogin } from '@/utils/gw_login';
import { routes } from './router/routes';

const route = useRoute();

const selectedKeys = ref<string[]>([]);
const openKeys = ref<string[]>([]);

function joinPath(parent: string, child: string): string {
  return (parent + '/' + child).replace(/\/+/g, '/');
}

function buildMenuItems(
  routeList: RouteRecordRaw[],
  parentPath?: string,
): NonNullable<MenuProps['items']> {
  return routeList.map((r) => {
    const fullPath = parentPath ? joinPath(parentPath, r.path) : r.path;
    const title =
      (r.meta as Record<string, any>)?.title || (r.name as string) || '';

    if (r.children && r.children.length > 0) {
      return {
        key: fullPath,
        label: title,
        children: buildMenuItems(r.children, fullPath),
      };
    }

    return {
      key: fullPath,
      label: h(RouterLink, { to: fullPath }, () => title),
    };
  });
}

const menuItems = computed(() => buildMenuItems(routes));

watch(
  () => route.path,
  (newPath: string) => {
    selectedKeys.value = [newPath];
    const segments = newPath.split('/').filter(Boolean);
    if (segments.length > 1) {
      openKeys.value = [`/${segments[0]}`];
    }
  },
  { immediate: true },
);

onMounted(async () => {
  console.log('[App] 开始登录...');
  try {
    await getLogin(null, null, null);
    console.log(
      '[App] 登录完成, accessToken:',
      localStorage.getItem('accessToken'),
    );
  } catch (e) {
    console.error('[App] 登录失败:', e);
  }
});
</script>

<style scoped>
.layout { min-height: 100vh; }
.header {
  display: flex; align-items: center; padding: 0 24px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 12px; margin-right: 48px; }
.logo-icon { font-size: 28px; }
.logo-text { font-size: 20px; font-weight: bold; color: white; }
.menu { flex: 1; background: transparent; border: none; line-height: 64px; }
.menu :deep(.ant-menu-item) { border-radius: 8px; margin: 0 4px; }
.menu :deep(.ant-menu-item:hover) { background: rgba(255,255,255,0.1) !important; }
.menu :deep(.ant-menu-item-selected) { background: rgba(255,255,255,0.2) !important; }
.content { padding: 10px; background: #f0f2f5; min-height: calc(100vh - 64px); }
.site-layout-content {
  min-height: calc(100vh - 100px); background: #fff;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
</style>
