<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  House,
  Setting,
  ChatLineRound,
  Histogram,
} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

const route = useRoute();
const activeIndex = ref('/Index')

onMounted(() => {
  setActiveIndex();
})
const setActiveIndex = () =>{
  activeIndex.value = route.path
}
</script>

<template>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        router
        active-text-color="#0f40f5"
        background-color="white"
        text-color="#000"
    >
      <el-menu-item index="/">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="/merchant">
        <template #title>
          <el-icon>
            <IconMenu />
          </el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/merchant">商家管理 </el-menu-item>
        <el-menu-item index="/rider">跑腿管理</el-menu-item>
        <el-menu-item index="/user">普通用户管理</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/order">
        <el-icon><document /></el-icon>
        <span>订单管理</span>
      </el-menu-item>

      <el-sub-menu index="/talk">
        <template #title>
          <el-icon><ChatLineRound /></el-icon>
          <span>论坛管理</span>
        </template>
        <el-menu-item index="/postManage">帖子管理</el-menu-item>
        <el-menu-item index="/notification">通知与公告</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/statistics">
        <template #title>
          <el-icon><Histogram /></el-icon>
          <span>数据统计</span>
        </template>
        <el-menu-item index="/behaviorAnalysis">用户行为分析 </el-menu-item>
        <el-menu-item index="/orderAnalysis">订单分析</el-menu-item>
        <el-menu-item index="/evaluateAnalysis">评价分析</el-menu-item>
        <el-menu-item index="/pointsAnalysis">积分活动分析</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/setting">
        <el-icon><setting /></el-icon>
        <span>系统管理</span>
      </el-menu-item>
    </el-menu>
</template>

<style scoped>

</style>