<template>
  <aside>
    <div class="sidebar-header">
      <div class="logo">
        <img src="@/assets/images/logo.webp" alt="logo" :router="true" />
        <span>Admin System</span>
      </div>
    </div>

    <!-- 菜单区域 -->
    <el-menu class="menu" :unique-opened="true" :default-active="activeMenu" router>
      <template v-for="menu in staticMenuList" :key="menu.id">
        <!-- 无子菜单 -->
        <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
          <el-icon>
            <component :is="iconMap[menu.icon]" />
          </el-icon>
          <template #title>{{ menu.label }}</template>
        </el-menu-item>

        <el-sub-menu v-else :index="menu.path">
          <template #title>
            <el-icon>
              <component :is="iconMap[menu.icon]" />
            </el-icon>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" :index="subMenu.path">
            <el-icon v-if="subMenu.icon">
              <component :is="iconMap[subMenu.icon]" />
            </el-icon>
            <template #title>{{ subMenu.label }}</template>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </aside>
</template>

<script setup lang="ts">
import {
  HomeFilled,
  List,
  UserFilled,
  Platform,
  BellFilled,
  GoodsFilled,
  WarningFilled,
  Tools,
} from '@element-plus/icons-vue'

//获取格式化后的菜单列表
import { useUserStore } from '@/stores/modules/user'

const route = useRoute()
const userStore = useUserStore()
const menuList = ref<any[]>([])

// 计算当前激活的菜单 index（取路由 fullPath 作为激活标识）
const activeMenu = computed(() => {
  return route.fullPath // 直接使用完整路径，和你的菜单 path 保持一致
})
// 组件挂载时异步加载菜单
onMounted(async () => {
  menuList.value = userStore.sideMenu || []
})

//图标映射表
const iconMap: Record<string, any> = {
  HomeFilled,
  List,
  UserFilled,
  Platform,
  BellFilled,
  GoodsFilled,
  WarningFilled,
  Tools,
}

// 菜单假数据，具体要根据实际菜单数据进行调整
import type { ElMenuItem } from '@/utils/menuFormat'

// 抽离后的菜单数据（完全匹配模板中的结构和配置）
const staticMenuList = ref<ElMenuItem[]>([
  // 首页
  {
    id: 1,
    label: '首页',
    path: 'dashboard', // 对应 el-menu-item 的 index="dashboard"
    icon: 'HomeFilled', // 对应 <HomeFilled /> 图标
  },
  // 模板配置（子菜单）
  // {
  //     id: 2,
  //     label: '模板配置',
  //     path: '2', // 对应 el-sub-menu 的 index="2"
  //     icon: 'List', // 对应 <List /> 图标
  //     children: [
  //         {
  //             id: 21,
  //             label: '头寸模板',
  //             path: '2-1', // 对应 el-menu-item 的 index="2-1"
  //             icon: ''
  //             // 二级菜单无图标（模板中未设置）
  //         }
  //     ]
  // },
  // 账户管理（子菜单）
  {
    id: 3,
    label: '账户管理',
    path: 'account', // 对应 el-sub-menu 的 index="account"
    icon: 'UserFilled', // 对应 <UserFilled /> 图标
    children: [
      {
        id: 31,
        label: '客户管理',
        path: '/account/client', // index="client"
        icon: '',
      },
      {
        id: 32,
        label: '代理管理',
        path: '/account/agentList', // index="3-2"
        icon: '',
      },
      {
        id: 33,
        label: '做市商管理',
        path: '/account/market-maker', // index="3-3"
        icon: '',
      },
      {
        id: 34,
        label: '档案管理',
        path: '/account/archives', // index="3-4"
        icon: '',
      },
      {
        id: 35,
        label: '账号管理',
        path: '/account/accountDetail', // index="3-5"
        icon: '',
      },
    ],
  },
  // 交易管理（子菜单）
  {
    id: 4,
    label: '交易管理',
    path: '4', // index="4"
    icon: 'Platform', // 对应 <Platform /> 图标
    children: [
      {
        id: 41,
        label: '品种',
        path: '/trade/variety', // index="4-1"
        icon: '',
      },
      {
        id: 42,
        label: '交易时间',
        path: '/trade/group', // index="4-2"
        icon: '',
      },
      {
        id: 43,
        label: '持仓统计',
        path: '/trade/positionStat', // index="4-3"
        icon: '',
      },
      {
        id: 44,
        label: '历史交易',
        path: '/trade/historyTrade', // index="4-4"
        icon: '',
      },
      {
        id: 45,
        label: '交易软件',
        path: '/trade/tradeSoftware', // index="4-5"
        icon: '',
      },
      {
        id: 46,
        label: '节假日时间',
        path: '/trade/time', // index="4-3"
        icon: '',
      },
    ],
  },
  // 公告管理
  {
    id: 5,
    label: '公告管理',
    path: '/notice', // index="5"
    icon: 'BellFilled', // 对应 <BellFilled /> 图标
  },
  // 资金管理（子菜单）
  {
    id: 6,
    label: '资金管理',
    path: '6', // index="6"
    icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
    children: [
      // {
      //     id: 61,
      //     label: '存款审核',
      //     path: '/funding/deposit', // index="6-1"
      //     icon: ''
      // },
      // {
      //     id: 62,
      //     label: '取款审核',
      //     path: '/funding/withdrawal', // index="6-2"
      //     icon: ''
      // },
      // {
      //     id: 63,
      //     label: '取款明细',
      //     path: '/funding/withdrawalDetail', // index="6-3"
      //     icon: ''
      // },
      // {
      //     id: 64,
      //     label: '存款明细',
      //     path: '/funding/depositDetail', // index="6-4"
      //     icon: ''
      // },
      {
        id: 64,
        label: '转账',
        path: '/funding/transfer', // index="6-4"
        icon: '',
      },
      {
        id: 65,
        label: '转账明细',
        path: '/funding/transferDetail', // index="6-5"
        icon: '',
      },
      {
        id: 66,
        label: '资金明细',
        path: '/funding/fundDetail', // index="6-6"
        icon: '',
      },
      // {
      //     id: 66,
      //     label: '资金流水',
      //     path: '/funding/flowDetail', // index="6-6"
      //     icon: ''
      // },
      // {
      //     id: 67,
      //     label: '收款账户列表',
      //     path: '/funding/receiverAccount', // index="6-7"
      //     icon: ''
      // },
      // {
      //     id: 68,
      //     label: '存款渠道',
      //     path: '/funding/depositChannel', // index="6-8"
      //     icon: ''
      // }
    ],
  },
  // 系统管理（子菜单）
  {
    id: 7,
    label: '系统管理',
    path: 'system', // index="7"
    icon: 'Tools', // 对应 <Tools /> 图标
    children: [
      {
        id: 71,
        label: '菜单管理',
        path: '/system/menu', // index="6-1"（模板中此处 index 写的是 6-1，保留原配置）
        icon: '',
      },
      {
        id: 72,
        label: '角色管理',
        path: '/system/role', // index="6-2"（模板中此处 index 写的是 6-2，保留原配置）
        icon: '',
      },
      {
        id: 73,
        label: '系统设置',
        path: '/system/setting', // index="6-2"（模板中此处 index 写的是 6-2，保留原配置）
        icon: '',
      },
    ],
  },
  // 风控管理
  {
    id: 8,
    label: '风控管理',
    path: '/risk', // index="8"
    icon: 'WarningFilled', // 对应 <WarningFilled /> 图标
  },

  // 资金管理（子菜单）
  // {
  //     id: 9,
  //     label: '资金管理',
  //     path: 'funding', // index="funding"
  //     icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
  //     children: [
  //         //存款/取款/审核记录/ 提现记录/ 充值记录暂时没有
  //         //资金明细

  //     ]
  // },
  // 交易统计（子菜单）
  // {
  //     id: 10,
  //     label: '交易统计归交易管理',
  //     path: 'trade', // index="trade"
  //     icon: 'ChartBarFilled', // 对应 <ChartBarFilled /> 图标
  //     children: [
  //         // 持仓统计是辉哥
  //         //历史交易
  //         //交易软件
  //     ]
  // },
  // 账户管理（子菜单）
  // {
  //     id: 11,
  //     label: '账户管理',
  //     path: 'account', // index="account"
  //     icon: 'UserFilled', // 对应 <UserFilled /> 图标
  //     children: [
  //         // 档案管理
  //         // 账户管理
  //     ]
  // },
  // 个性化交易（子菜单）
  {
    id: 12,
    label: '个性化交易',
    path: 'personalized', // index="personalized"
    icon: 'SettingFilled', // 对应 <SettingFilled /> 图标
    children: [
      // 排行榜放在了app中
      // 跟单记录
      {
        id: 121,
        label: '跟单记录',
        path: '/personalized/followRecord', // index="12-1"
        icon: '',
      },
      // 带单记录
      {
        id: 122,
        label: '带单记录',
        path: '/personalized/leadRecord', // index="12-2"
        icon: '',
      },
    ],
  },
  // 代理管理（子菜单）
  {
    id: 13,
    label: '代理管理',
    path: 'agent', // index="agent"
    icon: 'UserFilled', // 对应 <UserFilled /> 图标
    children: [
      //客户列表
      {
        id: 132,
        label: '客户列表',
        path: '/agent/customerList', // index="13-2"
        icon: '',
      },
      //客户交易订单
      {
        id: 133,
        label: '客户交易订单',
        path: '/agent/customerTradeOrder', // index="13-3"
        icon: '',
      },
      //客户资金流水
      {
        id: 135,
        label: '客户资金流水',
        path: '/agent/customerCapitalFlow', // index="13-5"
        icon: '',
      },
    ],
  },
  // 通知管理（子菜单）
  {
    id: 14,
    label: '通知管理',
    path: 'notification', // index="notification"
    icon: 'NotificationFilled', // 对应 <NotificationFilled /> 图标
  },
])
</script>

<style scoped lang="scss">
aside {
  .sidebar-header {
    height: 60px;
    border-bottom: solid 1px var(--el-menu-border-color);
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      display: flex;
      align-items: center;

      img {
        width: 100px;
      }
    }
  }

  .menu {
    height: 100%;
    border: none;

    :deep(.el-menu-item.is-active) {
      background-color: var(--el-menu-hover-bg-color);
    }
  }
}
</style>
