<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#1e1f22"
      text-color="#bcbec4"
      active-text-color="#2ab19f"
      @select="handleSelect">
    <el-menu-item index="1" @click="JumpRouter('/back/base')">基本功能</el-menu-item>
    <el-menu-item index="2" @click="JumpRouter('/back/home')">概述</el-menu-item>
    <el-sub-menu index="3">
      <template #title>商城</template>
      <el-menu-item index="2-1" @click="JumpRouter('/back/vip')">VIP</el-menu-item>
      <el-menu-item index="2-2">礼包</el-menu-item>
      <el-menu-item index="2-3">商品</el-menu-item>
      <el-menu-item index="2-4">回收</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="4" @click="JumpRouter('/back/message')">消息</el-menu-item>
    <el-menu-item index="5">设置</el-menu-item>
  </el-menu>
  <router-view/>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import router from "../../router";

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

function JumpRouter(path: string) {
  router.push({path: path})
}


</script>
