<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#2d3a4b"
      class="el-menu-vertical-demo"
      default-active="home"
      text-color="#fff"
      router
  >
    <el-menu-item index="welcome">
      <el-icon><home-filled /></el-icon>
      <span>Welcome</span>
    </el-menu-item>
    <el-menu-item index="home">
      <el-icon><home-filled /></el-icon>
      <span>首页</span>
    </el-menu-item>
<!--    <el-menu-item index="display">-->
<!--      <el-icon><tickets /></el-icon>-->
<!--      <span>数据展示</span>-->
<!--    </el-menu-item>-->
    <el-menu-item index="user">
      <el-icon><user /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title >
        <el-icon><management /></el-icon>
        <span>商家管理</span>
      </template>
      <el-menu-item index="business">
        <el-icon><management /></el-icon>
        <span>商家</span>
      </el-menu-item>
      <el-menu-item index="product">
        <el-icon><management /></el-icon>
        <span>商品管理</span>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item index="employee">
      <el-icon><tickets /></el-icon>
      <span>美甲师管理</span>
    </el-menu-item>
    <el-menu-item index="order">
      <el-icon><tickets /></el-icon>
      <span>订单管理</span>
    </el-menu-item>
    <el-sub-menu index="11">
      <template #title >
        <el-icon><management /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="personal">
        <el-icon><House /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
      <el-menu-item index="modifyPassword">
        <el-icon><edit /></el-icon>
        <span>修改密码</span>
      </el-menu-item>
      <el-menu-item >
        <el-icon @click="logout"><switch-button /></el-icon>
        <span @click="logout">安全退出</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
import
{HomeFilled,User,Tickets,Goods,DocumentAdd,Management,Setting,Edit,SwitchButton,House}
  from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import axios from "@/util/axios";
import {ElMessage} from "element-plus";
const store=useStore();
const logout=async ()=>{
  store.dispatch('logout')
  let res= await axios.post("/user/logout")
  ElMessage.warning("退出成功");
  //console.log(res)
}
</script>
<style lang="scss" scoped>

</style>
