<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute()
const router = useRouter()
const newPath = computed(() => {
  return route.path
})
const toLink = (path) => {
  router.push(path)
}

const is_super = computed(() => {
  return localStorage.is_super
})
</script>


<template>

  <el-scrollbar class="menu-scrollbar">
    <el-menu :default-active="route.path" router>
            <el-menu-item index="/miniProgram">
                <el-icon><User /></el-icon>
                小程序管理
            </el-menu-item>
            <el-menu-item v-if="is_super == 1" index="/customerService">
                <el-icon><Document /></el-icon>
                客服管理
            </el-menu-item>
            
        </el-menu>
    <!-- <ul>
      <li @click="toLink('/miniProgram')" :class="{active: newPath == '/miniProgram'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhinengti-F"></use>
          </svg>
          
        </el-icon>
        <span>小程序管理</span>
      </li> -->
      <!-- <li @click="toLink('/dashboard')" :class="{active: newPath == '/dashboard'}">
        <el-icon>
          <svg class="icon" aria-hidden="true" style="font-size: 24px">
            <use xlink:href="#icon-shili"></use>
          </svg>
          
        </el-icon>
        <span>实例</span>
      </li> -->
      
      <!-- <li @click="toLink('/user')" :class="{active: newPath == '/user'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu6"></use>
          </svg>
        </el-icon>
        
        <span>客户</span>
      </li>
      <li @click="toLink('/tags')" :class="{active: newPath == '/tags'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-biaoqian12"></use>
          </svg>
        </el-icon>
        
        <span>标签组</span>
      </li>
      <li @click="toLink('/groups')" :class="{active: newPath == '/groups'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-kehu2"></use>
          </svg>
          
        </el-icon>
        <span>群组</span>
      </li>
      <li @click="toLink('/materialLibrary')" :class="{active: newPath == '/materialLibrary'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sucaiku2"></use>
          </svg></el-icon>
        <span>素材库</span>
      </li>
      <li @click="toLink('/agents')" :class="{active: newPath == '/agents'}">
        <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-AIzhinengti"></use>
          </svg></el-icon>
        <span>智能体</span>
      </li>
      <li @click="toLink('/task')" :class="{active: newPath == '/task'}">
        
          <el-icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-process-operate"></use>
          </svg></el-icon>
        <span>SOP</span>
      </li>
      
    </ul> -->
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.menu-scrollbar {
   background-color: #2b3a4a;
  .el-menu {
    border-right: none;
    background-color: #2b3a4a;
    color: #fff;
}
.el-menu-item {
    color: #fff;
    &:hover {
        background-color: #34495e;
    }
    &.is-active {
        background-color: var(--el-color-primary);
        color: #fff;
    }
}

  // box-shadow: var(--el-box-shadow);
  //   overflow: inherit;
  // li {
  //   height: 65px;
  //   text-align: center;
  //   cursor: pointer;
  //   font-size: 13px;
  //   .el-icon{
  //     font-size: 20px;
  //     margin: 6px;
  //     margin-top: 12px;

  //   }
  //   color: var(--el-text-color-regular);
  //   span{
  //     display: block;
  //     text-align: center;
  //   }
  //   &:hover {
  //     background-color: var(--el-color-primary-light-9);
  //     color: var(--el-color-primary);
  //   }
  // }
  // .active{
  //   color: var(--el-color-primary);
  //   background-color: var(--el-color-primary-light-8);
  // }
}
</style>
