<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#222d32"
      text-color="#fff"
      active-text-color="#fff"
      :default-active="sidevarItem"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
    >
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/img/logo.png" style="width: 30px; height: 24px"
        /></el-icon>
      </div>
      <el-sub-menu index="1">
        <template #title>
          <img
            class="el-icon"
            src="@/assets/svgs/apple.svg"
            style="width: 22px; height: 22px"
          />
          <span>项目</span>
        </template>
        <el-menu-item index="/a">
          <SvgIcon name="apple" color="#000" size="22"></SvgIcon>
          <template #title>项目一</template>
        </el-menu-item>
        <el-menu-item index="/b">项目二</el-menu-item>
        <el-menu-item index="/c">项目三</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/home">
        <SvgIcon name="home" color="#000" size="22"></SvgIcon>
        <template #title>首页</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
import {
  Fold,
  Expand,
  Service,
  Position,
  View,
  Open,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";

const store = useCounterStore();
const { isCollapse, sidevarItem, roleList } = storeToRefs(store);

const router = useRouter();

const acitveItems = reactive({ list: [] });

const handleSelect = (key) => {
  store.setItem(key);
  router.push({
    path: `${key}`,
  });
};
const handleOpen = () => {};
const handleClose = () => {};
onBeforeMount(() => {
  // console.log("SidevarItem/onBeforeMount");
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}
.box-item {
  height: 100vh;
}
:deep(.el-menu) {
  // width: 100%;
  height: 100%;
  overflow: auto;
  // background: linear-gradient(
  //   0deg,
  //   rgba(134, 132, 255, 1) 0%,
  //   rgba(60, 80, 232, 1) 100%
  // );
  background-color: rgba(34, 45, 50, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);

  .logo {
    height: 65px;
    color: rgb(255, 255, 255);
    cursor: default;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .logo:hover {
    background-color: transparent !important;
  }

  .el-sub-menu.is-active {
    .el-sub-menu__title {
      background-color: rgba(111, 182, 184, 1);
    }
  }
  // .el-sub-menu {
  //   .el-menu-item {
  //     // padding:0 0 0 65px !important;
  //   }
  // }
  .el-icon {
    margin-right: 10px;
  }
}

.el-menu-item.is-active {
  box-sizing: border-box;
  background-color: rgba(111, 182, 184, 1);
  color: #fff;
}
</style>
