<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      text-color="#fff"
      active-color="#000"
      :default-active="activeIndex"
      :collapse="menuClose"
      @select="handleSelect"
    >
      <!-- <div class="logo">logo</div> -->
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/logo.png" style="width: 30px; height: 24px"
        /></el-icon>
      </div>

      <el-menu-item :index="1">
        <img src="@/assets/home.png" alt="" />
        <span>系统首页</span>
      </el-menu-item>
      <el-menu-item :index="2">
        <img src="@/assets/classes.png" alt="" />
        <span>工单管理</span>
      </el-menu-item>

      <el-menu-item :index="3">
        <img
          src="@/assets/area.png"
          alt=""
          style="width: 22px; height: 22px; margin: 0 19px"
        />
        <span>报修区域</span>
      </el-menu-item>
      <el-menu-item :index="7">
        <img src="@/assets/repairs.png" alt="" />
        <span>报修物品</span>
      </el-menu-item>
      <el-menu-item :index="4">
        <img src="@/assets/consumable.png" alt="" />
        <span>耗材管理</span>
      </el-menu-item>
      <el-menu-item :index="5">
        <img
          src="@/assets/staff.png"
          alt=""
          style="width: 23px; height: 23px; margin: 0 18px 0 16px"
        />
        <span>员工管理</span>
      </el-menu-item>
      <el-menu-item :index="8">
        <img
          src="@/assets/scheduling.png"
          alt=""
          style="width: 20px; height: 20px"
        />
        <span>排班管理</span>
      </el-menu-item>
      <el-menu-item :index="10">
        <img
          src="@/assets/evaluate.png"
          alt=""
          style="width: 21px; height: 21px; margin: 0 20px"
        />
        <span>评价管理</span>
      </el-menu-item>

      <el-menu-item :index="9">
        <img
          src="@/assets/paySuccess.png "
          alt=""
          style="width: 20px; height: 20px; margin: 0 19px"
        />
        <span>支付成功订单</span>
      </el-menu-item>

      <el-menu-item :index="11">
        <img
          src="@/assets/affiche.png"
          alt=""
          style="width: 21px; height: 21px; margin: 0 20px"
        />
        <span>公告管理</span>
      </el-menu-item>
      <el-menu-item :index="6">
        <img src="@/assets/account.png" alt="" />
        <span>账号管理</span>
      </el-menu-item>
      <el-menu-item :index="12">
        <img
          style="width: 22px; height: 22px; margin: 0 20px 0 18px"
          src="@/assets/system.png"
          alt=""
        />
        <span>系统设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
import { useStore } from "vuex";

import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

const menuClose = ref(false);
const activeIndex = ref(1);
const acitveItems = reactive({ list: [] });

watch(
  () => store.state.user.collapse,
  (newValue, oldValue) => {
    menuClose.value = newValue;
  }
);
watch(
  () => store.state.user.activeIndex,
  (newValue, oldValue) => {
    console.log(newValue);

    activeIndex.value = newValue;
  }
);

const handleSelect = (key) => {
  store.commit("indexUp", key);
  activeIndex.value = key;
  sessionStorage.setItem("sidevarItem", key);

  if (activeIndex.value == 1) {
    router.push({
      path: `/repairs/home`,
    });
  }
  if (activeIndex.value == 2) {
    router.push({
      path: `/repairs/workOrder`,
    });
  }
  if (activeIndex.value == 3) {
    router.push({
      path: `/repairs/area`,
    });
  }
  if (activeIndex.value == 4) {
    router.push({
      path: `/repairs/consumable`,
    });
  }
  if (activeIndex.value == 5) {
    router.push({
      path: `/repairs/staff`,
    });
  }
  if (activeIndex.value == 6) {
    router.push({
      path: `/repairs/account`,
    });
  }
  if (activeIndex.value == 7) {
    router.push({
      path: `/repairs/goods`,
    });
  }
  if (activeIndex.value == 8) {
    router.push({
      path: `/repairs/scheduling`,
    });
  }

  if (activeIndex.value == 9) {
    router.push({
      path: `/repairs/paySuccess`,
    });
  }
  if (activeIndex.value == 10) {
    router.push({
      path: `/repairs/evaluate`,
    });
  }
  if (activeIndex.value == 11) {
    router.push({
      path: `/repairs/affiche`,
    });
  }
  if (activeIndex.value == 12) {
    router.push({
      path: `/repairs/waiting`,
    });
  }
  if (activeIndex.value == 0) {
    router.push({
      path: `/repairs/news`,
    });
  }
};
onBeforeMount(() => {
  activeIndex.value = Number(sessionStorage.getItem("sidevarItem"));
  store.commit("indexUp", Number(sessionStorage.getItem("sidevarItem")));
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}
.el-menu {
  width: 100%;
  height: 100%;
  // background: linear-gradient(
  //   0deg,
  //   rgba(134, 132, 255, 1) 0%,
  //   rgba(60, 80, 232, 1) 100%
  // );
  background: 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-menu-item {
    // border-left: 3px solid rgba(248, 220, 38);
    padding: 0 10px;
  }
  .el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.4);
    // background-color: rgba(111, 182, 184, 1);
  }
  .el-menu-item.is-active:hover {
    // background-color: #fff;
    background-color: rgba(111, 182, 184, 1);
  }
  .el-menu-item img {
    width: 18px;
    height: 18px;
    margin: 0 20px;
  }
}

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