<template>
  <div class="admin-layout">
    <!-- 左侧菜单 -->
    <a-menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        class="admin-sidebar"
        :mode="state.mode"
        :items="items"
        :theme="state.theme"
        @select="handleMenuSelect"
     />
    <!-- 右侧内容区 -->
    <div class="admin-contain">
      <router-view />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { h, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import {
  HomeOutlined,
  FolderOpenOutlined,
  ConsoleSqlOutlined,
  GlobalOutlined,
  LaptopOutlined,
  MoneyCollectOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue';
import type { MenuMode, MenuTheme } from 'ant-design-vue';
import { ItemType } from 'ant-design-vue';

const router = useRouter();

// 定义菜单原始数据
interface MenuItem {
  path: string;
  name: string;
  icon?: any;
  children?: Omit<MenuItem, 'icon'>[]; // 子项不需要 icon
}

const menuItems: MenuItem[] = [
  { path: '/layout/overview', name: '总览', icon: HomeOutlined },
  { path: '/layout/admin/instance', name: '容器实例', icon: ConsoleSqlOutlined },
  { path: '/layout/admin/fileStore', name: '文件存储', icon: FolderOpenOutlined },
  { path: '/layout/admin/image', name: '镜像', icon: GlobalOutlined },
  { path: '/layout/publicData', name: '公开数据', icon: LaptopOutlined },
  {
    path: '', 
    name: '费用',
    icon: MoneyCollectOutlined,
    children: [
      { path: '/layout/admin/costDetail', name: '收支明细' },
      { path: '/layout/admin/myOrder', name: '我的订单' },
      { path: '/layout/admin/flow', name: '账单明细' },
      { path: '/layout/admin/coupon', name: '优惠券' },
      { path: '/layout/admin/invoice', name: '发票' },
      { path: '/layout/admin/voucher', name: '代金券' },
      { path: '/layout/admin/contract', name: '合同' },
    ],
  },
  {
    path: '',
    name: '账号',
    icon: TeamOutlined,
    children: [
      { path: '/layout/admin/security', name: '账号安全' },
      { path: '/layout/admin/account/history', name: '访问记录' },
      { path: '/controlPanel/account/security', name: '安全设置' },
    ],
  },
];

// 状态
const state = reactive({
  mode: 'inline' as MenuMode,
  theme: 'light' as MenuTheme,
  selectedKeys: ['/controlPanel/overview'], // 初始选中第一个
  openKeys: ['/controlPanel/fee', '/controlPanel/account'], // 默认展开有子菜单的项
});

// 工具函数：生成菜单项
function getItem(
  label: string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group'
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}

// 将 menuItems 转为 a-menu 所需的 items
const items = computed(() => {
  return menuItems.map((item) => {
    if (item.children && item.children.length > 0) {
      const childItems = item.children.map((child) =>
        getItem(child.name, child.path)
      );
      return getItem(item.name, item.path, h(item.icon), childItems);
    } else {
      return getItem(item.name, item.path, h(item.icon));
    }
  });
});

const handleMenuSelect = ({ key }: { key: string }) => {
    console.log("11!",key);
  router.push(key);
};

const changeMode = (checked: boolean) => {
  state.mode = checked ? 'vertical' : 'inline';
};

const changeTheme = (checked: boolean) => {
  state.theme = checked ? 'dark' : 'light';
};
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh; /* 全屏高度 */
  width: 100vw;
  overflow: hidden;
}

.admin-sidebar {
  width: 256px; /* 和你原来设定一致 */
  flex-shrink: 0; /* 防止被压缩 */
  height: 100%;
}

.admin-contain {
  flex: 1; /* 占据剩余空间 */
  padding: 20px;
  overflow-y: auto; /* 内容超出可滚动 */
  background-color: #f0f2f5; /* 可选：和 Ant Design 风格一致 */
}
</style>