<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;
  disabled?: boolean; // 新增字段
  children?: Omit<MenuItem, 'icon'>[]; // 子项不需要 icon
}

const menuItems: MenuItem[] = [
  { path: '/layout/admin/home', 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: '优惠券(待开发)', disabled: true },
      { path: '/layout/admin/invoice', name: '发票(待开发)', disabled: true },
      { path: '/layout/admin/voucher', name: '代金券(待开发)', disabled: true },
      { path: '/layout/admin/contract', name: '合同(待开发)', disabled: true },
    ],
  },
  {
    path: '',
    name: '账号',
    icon: TeamOutlined,
    children: [
      { path: '/layout/admin/security', name: '账号安全' },
      { path: '/layout/admin/history', name: '访问记录' },
      // { path: '/controlPanel/security', name: '安全设置' },
    ],
  },
];

// 状态
const state = reactive({
  mode: 'inline' as MenuMode,
  theme: 'light' as MenuTheme,
  selectedKeys: ['/layout/admin/home'],
  openKeys: ['/controlPanel/fee', '/controlPanel/account'],
});

// 工具函数：生成菜单项
function getItem(
  label: string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group',
  disabled?: boolean // 新增 disabled 参数
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
    disabled, // 应用 disabled
  } 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, undefined, undefined, undefined, child.disabled)
      );
      return getItem(item.name, item.path, h(item.icon), childItems, undefined, item.disabled);
    } else {
      return getItem(item.name, item.path, h(item.icon), undefined, undefined, item.disabled);
    }
  });
});

const handleMenuSelect = ({ key }: { key: string }) => {
  // 防止跳转到被禁用的菜单（虽然 a-menu 不会触发 select，但加个判断更安全）
  const targetItem = findMenuItemByKey(menuItems, key);
  if (targetItem?.disabled) {
    return;
  }
  router.push(key);
};

// 辅助函数：递归查找菜单项
function findMenuItemByKey(items: MenuItem[], key: string): MenuItem | undefined {
  for (const item of items) {
    if (item.path === key) return item;
    if (item.children) {
      const found = findMenuItemByKey(item.children, key);
      if (found) return found;
    }
  }
  return undefined;
}

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: calc(100vh - 60px);
  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;
}
</style>