<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#293749"
      text-color="#fff"
      active-text-color="#fff"
      unique-opened
      :default-active="menuActive"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
    >
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/img/nanchang.png" style="width: 40px; height:40px"
        /></el-icon>
      </div>
      <el-menu-item index="/alumni-info">
        <SvgIcon name="xyxxgl" color="#fff" size="20"></SvgIcon>
        <template #title>校友信息管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-organization">
        <SvgIcon name="xyzzgl" color="#fff" size="22"></SvgIcon>
        <template #title>校友组织管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-activity">
        <SvgIcon name="xyhdgl" color="#fff" size="20"></SvgIcon>
        <template #title>校友活动管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-square">
        <SvgIcon name="gcxxgl" color="#fff" size="22"></SvgIcon>
        <template #title>广场信息管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-cooperation">
        <SvgIcon name="xyhzgl" color="#fff" size="22"></SvgIcon>
        <template #title>校友合作管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-enterprise">
        <SvgIcon name="xyqygl" color="#fff" size="22"></SvgIcon>
        <template #title>校友企业管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-style">
        <SvgIcon name="xyfcgl" color="#fff" size="20"></SvgIcon>
        <template #title>校友风采管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-new">
        <SvgIcon name="xwjjgl" color="#fff" size="22"></SvgIcon>
        <template #title>新闻聚焦管理</template>
      </el-menu-item>
      <el-menu-item index="/homecoming-service">
        <SvgIcon name="fxfwgl" color="#fff" size="24"></SvgIcon>
        <template #title>返校服务管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-card">
        <SvgIcon name="dzxykgl" color="#fff" size="20"></SvgIcon>
        <template #title>电子校友卡管理</template>
      </el-menu-item>
      <el-menu-item index="/alumni-album">
        <SvgIcon name="xyxcgl" color="#fff" size="20"></SvgIcon>
        <template #title>校友相册管理</template>
      </el-menu-item>
      <el-menu-item index="/permission">
        <SvgIcon name="qxgl" color="#fff" size="20"></SvgIcon>
        <template #title>权限管理</template>
      </el-menu-item>
      <el-menu-item index="/operation-log">
        <SvgIcon name="czrz" color="#fff" size="22"></SvgIcon>
        <template #title>操作日志</template>
      </el-menu-item>
      <el-menu-item index="/system-setting">
        <SvgIcon name="xtsz" color="#fff" size="20"></SvgIcon>
        <template #title>系统设置</template>
      </el-menu-item>
      <!-- <el-sub-menu :index="1">
        <template #title>
          <SvgIcon name="/user" color="#fff" size="22"></SvgIcon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/user">
          <SvgIcon name="user" color="#fff" size="22"></SvgIcon>
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item index="/role">
          <SvgIcon name="role" color="#fff" size="22"></SvgIcon>
          <template #title>角色管理</template>
        </el-menu-item>
        <el-menu-item index="/permission">
          <SvgIcon name="permission" color="#fff" size="22"></SvgIcon>
          <template #title>权限管理</template>
        </el-menu-item>
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";

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

const router = useRouter();

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

const handleSelect = (key) => {
  console.log(key);

  // store.SETMENU(key);
  router.push({
    path: `${key}`,
  });
};
const handleOpen = () => {};
const handleClose = () => {};
onBeforeMount(() => {});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
  user-select: none;
}
.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(48, 65, 86, 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(33, 44, 58, 1);
    }
  }

  .el-icon {
    margin-right: 10px;
  }
}

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