<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      text-color="#fff"
      active-color="rgba(9, 101, 98, 1)"
      :default-active="activeIndex"
      :collapse="menuClose"
      @select="handleSelect"
      :router="true"
    >
      <!-- :default-openeds="[34]" -->
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/logo.png" style="width: 30px; height: 24px"
        /></el-icon>
      </div>
      <!-- 订单管理 -->
      <el-sub-menu :index="12">
        <template #title>
          <img
            v-if="
              activeIndex == '/seniorCelebrity/order' ||
              activeIndex == '/seniorCelebrity/orderEvaluate'
            "
            src="@/assets/orderS.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/order.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>订单管理</span>
        </template>
        <el-menu-item index="/seniorCelebrity/order">
          <template #title>
            <span>订单管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/orderEvaluate">
          <template #title>
            <span>订单评价</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <!-- <el-menu-item index="/seniorCelebrity/order">
        <img
          v-if="activeIndex == '/seniorCelebrity/order'"
          src="@/assets/orderS.png"
          alt=""
          style="width: 22px; height: 22px; margin: 0 18px"
        />
        <img
          v-else
          src="@/assets/order.png"
          alt=""
          style="width: 22px; height: 22px; margin: 0 18px"
        />
        <span>订单管理</span>
      </el-menu-item> -->
      <!-- 房态管理 -->
      <el-sub-menu :index="34">
        <template #title>
          <img
            v-if="
              activeIndex == '/seniorCelebrity/houseState' ||
              activeIndex == '/seniorCelebrity/housePrice'
            "
            src="@/assets/roomStateC.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/roomState.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>房态管理</span>
        </template>
        <el-menu-item index="/seniorCelebrity/houseState">
          <template #title>
            <span>房态管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/housePrice">
          <template #title>
            <span>房价管理</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <!-- 台账管理 -->
      <el-menu-item index="/seniorCelebrity/ledger">
        <img
          v-if="activeIndex == '/seniorCelebrity/ledger'"
          src="@/assets/ledgerS.png"
          alt=""
          style="width: 22px; height: 22px; margin: 0 18px"
        />
        <img
          v-else
          src="@/assets/ledger.png"
          alt=""
          style="width: 22px; height: 22px; margin: 0 18px"
        />
        <span>台账管理</span>
      </el-menu-item>
      <!-- 民宿管理 -->
      <el-sub-menu :index="56">
        <template #title>
          <img
            v-if="
              activeIndex == '/seniorCelebrity/houseInfo' ||
              activeIndex == '/seniorCelebrity/houseType' ||
              activeIndex == '/seniorCelebrity/houseList'
            "
            src="@/assets/houseS.png"
            style="width: 22px; height: 22px; margin: 0 20px 0 18px"
            alt=""
          />
          <img
            v-else
            src="@/assets/house.png"
            style="width: 22px; height: 22px; margin: 0 20px 0 18px"
            alt=""
          />
          <span>民宿管理</span>
        </template>
        <el-menu-item index="/seniorCelebrity/houseInfo">
          <template #title>
            <!-- <img src="@/assets/home.png" alt="" /> -->
            <span>民宿信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/houseType">
          <template #title>
            <!-- <img src="@/assets/home.png" alt="" /> -->
            <span>房型管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/houseList">
          <template #title>
            <!-- <img src="@/assets/home.png" alt="" /> -->
            <span>房源信息</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <!-- 流程管理 -->
      <el-sub-menu :index="78">
        <template #title>
          <img
            v-if="activeIndex == '/seniorCelebrity/roomFlow'"
            src="@/assets/roomFlowC.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/roomFlow.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>流程管理</span>
        </template>
        <el-menu-item index="/seniorCelebrity/roomFlow">
          <template #title>
            <span>我发起的</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <!-- 账号管理 -->
      <el-menu-item
        index="/seniorCelebrity/account"
        v-if="store.state.user.level == 2"
      >
        <img
          v-if="activeIndex == '/seniorCelebrity/account'"
          src="@/assets/systemS.png"
          alt=""
          style="width: 20px; height: 20px; margin: 0 20px"
        />
        <img
          v-else
          src="@/assets/system.png"
          alt=""
          style="width: 20px; height: 20px; margin: 0 20px"
        />
        <span>账号管理</span>
      </el-menu-item>
      <!-- 服务商城 -->
      <el-menu-item index="/seniorCelebrity/serviceMall">
        <img
          v-if="activeIndex == '/seniorCelebrity/serviceMall'"
          src="@/assets/shop_s.png"
          alt=""
          style="width: 20px; height: 20px; margin: 0 20px"
        />
        <img
          v-else
          src="@/assets/shop.png"
          alt=""
          style="width: 20px; height: 20px; margin: 0 20px"
        />
        <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, keyPath) => {
  // store.commit("indexUp", key);
  // activeIndex.value = key;
  // sessionStorage.setItem("sidevarItem", key);
  console.log(key, keyPath);

  router.push({
    path: `${key}`,
  });

  activeIndex.value = key;
  store.commit("indexUp", key);
  sessionStorage.setItem("sidevarItem", key);
  // if (activeIndex.value == 1) {
  //   router.push({
  //     path: `/seniorCelebrity/order`,
  //   });
  // }
  // if (activeIndex.value == 2) {
  //   router.push({
  //     path: `/seniorCelebrity/ledger`,
  //   });
  // }

  // if (activeIndex.value == 3) {
  //   router.push({
  //     path: `/seniorCelebrity/houseInfo`,
  //   });
  // }
  // if (activeIndex.value == 4) {
  //   router.push({
  //     path: `/seniorCelebrity/houseType`,
  //   });
  // }
  // if (activeIndex.value == 5) {
  //   router.push({
  //     path: `/seniorCelebrity/houseList`,
  //   });
  // }
  // if (activeIndex.value == 6) {
  //   router.push({
  //     path: `/seniorCelebrity/account`,
  //   });
  // }
};
onBeforeMount(() => {
  activeIndex.value = sessionStorage.getItem("sidevarItem");
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}
.box-item {
  width: 200px;
  height: calc(100vh);
}
.el-menu {
  width: 200px;
  height: 100%;
  overflow: auto;
  // background: linear-gradient(
  //   0deg,
  //   rgba(134, 132, 255, 1) 0%,
  //   rgba(60, 80, 232, 1) 100%
  // );
  background: rgba(9, 101, 98, 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 {
    .el-menu-item {
      // background-color: rgba(255, 255, 255, 1);
      // color: rgba(9, 101, 98, 1);
      padding: 0 20px 0 78px;
    }

    :deep(.el-tooltip__trigger) {
      padding: 0 20px;
    }

    :deep(.el-sub-menu__title):hover {
      color: rgba(9, 101, 98, 1);
      background-color: rgb(214, 214, 214);

      span {
        color: rgba(9, 101, 98, 1);
      }
    }

    .el-menu--inline {
      background-color: rgba(9, 101, 98, 1);
    }
  }

  .el-menu {
    .el-menu-item {
      background-color: rgba(9, 101, 98, 1);
      // padding-left: 30px;
    }

    .el-menu-item:hover {
      color: rgba(9, 101, 98, 1);
      background-color: rgb(214, 214, 214);
    }
  }

  .el-sub-menu:hover {
    color: rgba(9, 101, 98, 1);
  }

  .el-menu-item:hover {
    background-color: rgb(214, 214, 214);
    color: rgba(9, 101, 98, 1);
  }

  .el-menu-item.is-active {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(9, 101, 98, 1);
  }
}

// .el-menu-item.is-active {
//   box-sizing: border-box;
//   // background-color: #fff;
//   background-color: rgba(111, 182, 184, 1);
//   color: #fff;
// }
.el-sub-menu.is-active {
  :deep(.el-sub-menu__title) {
    // border: 1px solid red;
    color: rgba(9, 101, 98, 1) !important;
    background-color: rgb(255, 255, 255);
  }
}
</style>
