<template>
  <div class="left-menu">
    <el-menu
      v-show="$route.path != ''"
      unique-opened
      text-color="#666"
      active-text-color="#4c84ff"
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      :collapse="isCollapse"
      :collapse-transition="false"
      @select="handleSelect"
    >
      <left-menu-item :list="routers" :is-collapse="isCollapse" />
    </el-menu>
    <!-- <div v-show="!isCollapse" :class="['support-text', 'support-text-style-' + curTheme]">广西信产 · 技术支持</div> -->
  </div>
</template>
<script>
import leftMenuItem from '@views/layout/left-menu-item';
import { getRouter } from '@utils/util';
import { mapGetters } from 'vuex';

export default {
  name: 'LeftMenu',
  components: {
    leftMenuItem
  },
  props: {
    isCollapse: Boolean
  },
  computed: mapGetters(['curTheme', 'userInfo', 'routers', 'multipleTag']),
  methods: {
    handleSelect(path, keyPath) {
      let pathObj = getRouter(this.routers, path);
      let curPathObj = this.multipleTag.find((item) => item.path === path);
      if (this.$route.path !== path) {
        if (!curPathObj) {
          this.multipleTag.push(pathObj);
          this.$store.dispatch('setMultipleTag', this.multipleTag);
        }
        this.$store.dispatch('setCurTag', path);
        this.$router.push({ path: path });
      }
    }
  }
};
</script>

<style scoped lang="less">
.left-menu {
  height: 100%;
  display: flex;
  flex-direction: column;

  .top-logo {
    position: relative;
    padding: 30px 0;

    &.isCollapse {
      padding: 20px 0;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      padding-bottom: 20px;
    }

    .logo {
      width: 50px;
      margin: 0 auto;

      &.isCollapse {
        width: 40px;
      }
    }
  }

  .left-el-menu {
    width: auto;
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
    border: none;

    // 左侧菜单滚动条
    &::-webkit-scrollbar {
      width: @scrollbar-size;
      height: @scrollbar-size;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 999px;
    }

    &::-webkit-scrollbar-track {
      border-radius: 999px;
    }

    &.el-menu--collapse {
      .el-submenu,
      .el-menu-item {
        text-align: center;

        :deep(.el-submenu__title) {
          .el-submenu__icon-arrow {
            display: none;
          }
        }
      }
    }

    :deep(.left-menu-item) {
      width: auto;

      .el-submenu {
        &:hover {
          background: none;
        }

        .el-submenu__title {
          &:hover {
            background: none;
          }
        }
      }

      .iconfont {
        color: inherit;
      }

      .menu_span {
        color: inherit;
        padding-left: 10px;
      }
    }
  }

  .support-text {
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
  }
}
/deep/.el-menu-item:hover,
.el-menu-item:focus {
  background: #e4f2ff;
  display: flex;
}

// Prevent text caret and focus outline on menu items
:deep(.el-menu-item),
:deep(.el-submenu__title) {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  caret-color: transparent;
  cursor: pointer;
  outline: none;
}

:deep(.el-menu-item:focus),
:deep(.el-submenu__title:focus) {
  outline: none;
  caret-color: transparent;
}
/deep/ .el-menu--inline .is-active {
  position: relative;
  background: #e8f1fe;
  font-weight: normal;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: @theme-color;
  }
}
// /deep/ .is-active .el-submenu__title {
//   color: #212440 !important;
//   font-weight: bold;
//   i {
//     color: #0076ff;
//   }
// }
</style>
