<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="9">
        <img
          v-if="activeIndex == 9"
          src="@/assets/busqueryA.png"
          alt=""
          style="width: 22px; height: 22px"
        />
        <img
          v-else
          src="@/assets/busquery.png "
          alt=""
          style="width: 22px; height: 22px"
        />
        <span>车辆调度</span>
      </el-menu-item>
      <el-menu-item :index="1">
        <img v-if="activeIndex == 1" src="@/assets/statementA.png" alt="" />
        <img v-else src="@/assets/statement.png " alt="" />
        <span>报表统计</span>
      </el-menu-item>
      <el-menu-item :index="50">
        <img  v-if="activeIndex == 50" src="@/assets/busDetailA.png" alt="" />
        <img  v-else src="@/assets/busDetail.png " alt="" />
        <span>交通卡明细</span>
      </el-menu-item>
      <el-menu-item :index="51">
        <img
          v-if="activeIndex == 51"
          src="@/assets/busManagementA.png"
          alt=""
          style="width: 20px; height: 18px"
        />
        <img style="width: 20px; height: 18px" v-else src="@/assets/busManagement.png " alt="" />
        <span>交通卡管理</span>
      </el-menu-item>
      <el-menu-item :index="52">
        <img
          v-if="activeIndex == 52"
          src="@/assets/authenticationA.png"
          alt=""
        />
        <img v-else src="@/assets/authentication.png " alt="" />
        <span>认证配置</span>
      </el-menu-item>
      <el-menu-item :index="53">
        <img v-if="activeIndex == 53" src="@/assets/refundA.png" />
        <img v-else src="@/assets/refund.png " />
        <span>退款管理</span>
      </el-menu-item>
      <el-menu-item :index="54">
        <img v-if="activeIndex == 54" src="@/assets/busSetA.png" alt="" />
        <img v-else src="@/assets/busSet.png " alt="" />
        <span>交通卡配置</span>
      </el-menu-item>

      <el-menu-item :index="2">
        <img v-if="activeIndex == 2" src="@/assets/staffA.png" alt="" />
        <img v-else src="@/assets/staff.png" alt="" />
        <span>驾驶员管理</span>
      </el-menu-item>
      <!-- <el-menu-item :index="11">
        <img
          v-if="activeIndex == 11"
          style="width: 22px; height: 22px"
          src="@/assets/reportA.png"
          alt=""
        />
        <img
          v-else
          style="width: 22px; height: 22px"
          src="@/assets/report.png"
          alt=""
        />
        <span>报备管理</span>
      </el-menu-item> -->
      <el-menu-item :index="3">
        <img v-if="activeIndex == 3" src="@/assets/accountA.png" alt="" />
        <img v-else src="@/assets/account.png" alt="" />
        <span>账号管理</span>
      </el-menu-item>
      <el-menu-item :index="4">
        <img v-if="activeIndex == 4" src="@/assets/carA.png" alt="" />
        <img v-else src="@/assets/car.png" alt="" />
        <span>车辆管理</span>
      </el-menu-item>
      <el-menu-item :index="5">
        <img v-if="activeIndex == 5" src="@/assets/pathA.png" alt="" />
        <img v-else src="@/assets/path.png" alt="" />
        <span>路线管理</span>
      </el-menu-item>
      <el-menu-item :index="6">
        <img v-if="activeIndex == 6" src="@/assets/classesA.png" alt="" />
        <img v-else src="@/assets/classes.png" alt="" />
        <span>班次管理</span>
      </el-menu-item>
      <!-- <el-menu-item :index="7">
        <img v-if="activeIndex == 7" src="@/assets/blacklistA.png" alt="" />
        <img v-else src="@/assets/blacklist.png" alt="" />
        <span>黑名单管理</span>
      </el-menu-item> -->
      <el-menu-item :index="10">
        <img
          v-if="activeIndex == 10"
          src="@/assets/logA.png"
          alt=""
          style="width: 21px; height: 21px"
        />
        <img
          v-else
          src="@/assets/log.png"
          alt=""
          style="width: 21px; height: 21px"
        />
        <span>操作日志</span>
      </el-menu-item>
      <!-- <el-sub-menu index="15" popper-class="ceshi">
        <template #title>
          <img
            v-if="
              activeIndex == 17 ||
              activeIndex == 18 ||
              activeIndex == 19 ||
              activeIndex == 20 ||
              activeIndex == 21 ||
              activeIndex == 22 ||
              activeIndex == 23 ||
              activeIndex == 24
            "
            src="@/assets/driverPathA.png"
            alt=""
            style="width: 21px; height: 21px; margin-right: 13px"
          />
          <img
            v-else
            src="@/assets/driverPath.png"
            alt=""
            style="width: 21px; height: 21px; margin-right: 13px"
          />
          <span>顺风车模块</span>
        </template>
        <el-sub-menu index="16">
          <template #title>顺风车司机</template>
          <el-menu-item :index="17">司机审核</el-menu-item>
          <el-menu-item :index="18">司机管理</el-menu-item>
          <el-menu-item :index="19">司机提现管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item :index="23">优惠券管理</el-menu-item>
        <el-menu-item :index="24">优惠券记录</el-menu-item>
        <el-menu-item :index="20">路线管理</el-menu-item>
        <el-menu-item :index="21">订单管理</el-menu-item>
        <el-menu-item :index="22">规则设置</el-menu-item>
      </el-sub-menu> -->
      <el-menu-item :index="8">
        <img
          v-if="activeIndex == 8"
          src="@/assets/systemA.png"
          alt=""
          style="width: 20px; height: 20px"
        />
        <img
          v-else
          src="@/assets/system.png"
          alt=""
          style="width: 20px; height: 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(9);
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: `/schoolBus/statement`,
    });
  }
  if (activeIndex.value == 2) {
    router.push({
      path: `/schoolBus/staff`,
    });
  }
  if (activeIndex.value == 3) {
    router.push({
      path: `/schoolBus/account`,
    });
  }
  if (activeIndex.value == 4) {
    router.push({
      path: `/schoolBus/bus`,
    });
  }
  if (activeIndex.value == 6) {
    router.push({
      path: `/schoolBus/classes`,
    });
  }
  if (activeIndex.value == 5) {
    router.push({
      path: `/schoolBus/buspath`,
    });
  }
  if (activeIndex.value == 8) {
    router.push({
      path: `/schoolBus/system`,
    });
  }
  if (activeIndex.value == 7) {
    router.push({
      path: `/schoolBus/blacklist`,
    });
  }
  if (activeIndex.value == 9) {
    router.push({
      path: `/schoolBus/busquery`,
    });
  }
  if (activeIndex.value == 10) {
    router.push({
      path: `/schoolBus/log`,
    });
  }
  if (activeIndex.value == 11) {
    router.push({
      path: `/schoolBus/report`,
    });
  }
  // 交通卡交易明细
  if (activeIndex.value == 50) {
    router.push({
      path: `/schoolBus/busDetail`,
    });
  } // 交通卡管理
  if (activeIndex.value == 51) {
    router.push({
      path: `/schoolBus/busManagement`,
    });
  }
  // 认证管理
  if (activeIndex.value == 52) {
    router.push({
      path: `/schoolBus/authentication`,
    });
  }
  // 退款管理
  if (activeIndex.value == 53) {
    router.push({
      path: `/schoolBus/refund`,
    });
  }
  // 交通卡设置
  if (activeIndex.value == 54) {
    router.push({
      path: `/schoolBus/busSet`,
    });
  }

  if (activeIndex.value == 17) {
    router.push({
      path: `/schoolBus/driverAudit`,
    });
  }
  if (activeIndex.value == 18) {
    router.push({
      path: `/schoolBus/driverManagement`,
    });
  }
  if (activeIndex.value == 19) {
    router.push({
      path: `/schoolBus/driverDeposit`,
    });
  }
  if (activeIndex.value == 20) {
    router.push({
      path: `/schoolBus/driverPath`,
    });
  }
  if (activeIndex.value == 21) {
    router.push({
      path: `/schoolBus/driverOrder`,
    });
  }
  if (activeIndex.value == 22) {
    router.push({
      path: `/schoolBus/driverRule`,
    });
  }
  if (activeIndex.value == 23) {
    router.push({
      path: `/schoolBus/coupon`,
    });
  }
  if (activeIndex.value == 24) {
    router.push({
      path: `/schoolBus/couponRecord`,
    });
  }

  if (activeIndex.value == 0) {
    router.push({
      path: `/schoolBus/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;
}
.box-item {
  // width: 220px !important;
  height: calc(100vh);
}
.el-menu {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: linear-gradient(
    0deg,
    rgba(134, 132, 255, 1) 0%,
    rgba(60, 80, 232, 1) 100%
  );
  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);
  }
  .el-menu-item.is-active:hover {
    background-color: #fff;
  }
  .el-menu-item img {
    width: 18px;
    height: 18px;
    margin: 0 15px 0 0;
  }

  :deep(.el-sub-menu) {
    .el-sub-menu__title:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    &.is-active.is-opened > .el-sub-menu__title {
      background-color: #fff;
      color: #000 !important;
    }
    &.is-active > .el-sub-menu__title {
      background-color: #fff;
      color: #000 !important;
    }

    .el-menu {
      background-color: transparent;
    }
    // .el-menu--inline{

    // }
  }
}
.el-menu--collapse {
  width: 72px;
  img {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 15px;
  }
  :deep(.el-sub-menu) {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-sub-menu__title {
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.el-menu-item.is-active {
  box-sizing: border-box;
  background-color: #fff;
  color: #000;
}
</style>

<style lang="scss">
.ceshi {
  &.is-light {
    border: none !important;
    background: linear-gradient(
      90deg,
      rgba(38, 151, 255, 1) 0%,
      rgba(102, 182, 255, 1) 100%
    );
    .el-menu {
      background: rgb(38, 38, 38);
      // rgba(60, 80, 232, 1)
      .el-sub-menu__title:hover {
        background: rgba(255, 255, 255, 0.4);
      }
      .el-sub-menu.is-active {
        background: #fff;
        .el-sub-menu__title {
          color: #000 !important;
        }
      }
    }
  }
  .el-menu-item.is-active {
    background: #fff;
    color: #000 !important;
  }
}
</style>
