<template>
  <el-scrollbar class="side-bar-container" :class="{ 'is-collapse': collapse }">
    <logo />
    <el-menu
      :background-color="variables['menu-background']"
      :text-color="variables['menu-color']"
      :active-text-color="variables['menu-color-active']"
      :default-active="activeMenu"
      :collapse="collapse"
      :collapse-transition="false"
      :default-openeds="defaultOpens"
      :unique-opened="uniqueOpened"
      mode="vertical"
      class="undefineMenu"
    >
      <side-bar-item
        v-for="route in routes"
        :key="route.path"
        :base-path="route.path"
        :item="route"
      />
      <div class="qrcode">
        <div class="img"></div>
        <div class="text">问题反馈群</div>
      </div>
    </el-menu>
  </el-scrollbar>
</template>
<script>
import Logo from "@/layouts/components/Logo"
import SideBarItem from "./components/SideBarItem"
import variables from "@/styles/variables.scss"
import { mapGetters } from "vuex"
import { defaultOopeneds, uniqueOpened } from "@/config/settings"

export default {
  name: "SideBar",
  components: { SideBarItem, Logo },
  data() {
    return {
      uniqueOpened,
    }
  },
  computed: {
    ...mapGetters({
      collapse: "settings/collapse",
      routes: "routes/routes",
    }),
    defaultOpens() {
      if (this.collapse) {
      }
      return defaultOopeneds
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      console.log("path", path)
      return path
    },
    variables() {
      return variables
    },
  },
  // mounted() {
  //   console.log(this.routes)
  // },
}
</script>
<style lang="scss" scoped>
.qrcode {
  width: 108px;
  height: 136px;
  background: #546184;
  border-radius: 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    width: 92px;
    height: 92px;
    background: url("~@/assets/img/DataCenter/qrcode.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 2px;
  }
  .text {
    font-size: 14px;
    font-family: AlibabaPuHuiTiR;
    color: #ffffff;
    text-align: center;
    margin-top: 8px;
  }
}
@mixin active {
  &:hover {
    color: $base-color-white !important;
    background-color: $base-menu-background-active !important;
  }

  &.is-active {
    color: $base-color-white !important;
    background-color: $base-menu-background-active !important;
  }
}
.undefineMenu {
  min-height: calc(100vh - 120px);
  padding-bottom: 166px;
}
.side-bar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: $base-z-index;
  width: $base-left-menu-width;
  height: 100vh;
  overflow: hidden;
  background: $base-menu-background;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: all 0.1s;
  padding: 8px 0 14px;

  &.is-collapse {
    width: $base-left-menu-width-min;
    border-right: 0 !important;

    ::v-deep {
      .el-menu {
        transition: all 0.1s;
      }

      .el-menu--collapse {
        border-right: 0 !important;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }

        .el-submenu__title {
          span {
            display: none;
          }
        }
      }
    }
  }

  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .el-menu {
      border: 0;
    }

    .svg-inline {
      &--fa {
        width: 1rem;
      }
    }

    .el-menu-item {
      height: 46px !important;
      overflow: hidden;
      line-height: 46px !important;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include active;
    }

    .nest-menu {
      .el-menu-item {
        background-color: $base-menu-children-background !important;

        @include active;
      }

      .el-submenu .el-menu-item {
        background-color: $base-menu-children-background !important;

        @include active;
      }
    }
  }
}
</style>