<template>
  <div class="sidebar-container">
    <div class="home-title">
      <div class="title title-icon" v-if="!isCollapse"></div>
    </div>
    <el-scrollbar>
      <el-menu
        mode="vertical"
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="false"
        :collapse-transition="false"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import SidebarItem from './SidebarItem'
import { mapState, mapMutations } from 'vuex'

export default {
  components: {
    SidebarItem
  },
  data() {
    return {
      menuBg: '#304156',
      menuText: '#bfcbd9',
      menuActiveText: '#409EFF'
    }
  },
  computed: {
    ...mapState('app', ['sidebar']),
    ...mapState('permission', ['routes']),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    isCollapse() {
      return this.sidebar.opened
    }
  },
  methods: {
    ...mapMutations('app', ['SET_IS_COLLAPSE'])
  }
}
</script>
<style lang="scss">
.sidebar-container {
  width: 100%;
  height: 100%;
  .home-title {
    background: #002140;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      width: 166px;
      height: 24px;
      background-size: contain;
    }
  }
  .el-scrollbar {
    height: calc(100% - 64px);
    background-color: #001529;
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
      // 导航栏间距
      .el-scrollbar__view {
        > .el-menu {
          > div {
            margin: 10px 0;
          }
        }
      }
      .el-menu {
        width: 100%;
        background: #001529;
        border-right: 0;
        .el-submenu.is-active {
          .el-submenu__title {
            span {
              color: #fff;
            }
          }
        }
        .el-submenu,
        .el-menu-item > span {
          .icon {
            margin-right: 14px;
          }
        }
        .el-menu-item,
        .el-submenu__title {
          color: #999;
          background: #001529;
          text-align: left;
        }
        .el-menu-item.is-active {
          color: #fff;
          background: #1890ff;
        }
        span {
          font-size: 14px;
          font-weight: 500;
        }
      }
      .el-menu--collapse {
        .el-submenu > .el-submenu__title > span {
          display: inline-flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          height: 20px;
          width: 20px;
          overflow: visible;
          visibility: visible;
          .icon {
            margin: 0;
          }
          span {
            display: none;
          }
        }
        .el-menu-item > span {
          span {
            display: none;
          }
        }
      }
    }
  }
}

.el-menu--collapse {
  .el-submenu {
    & > .el-submenu__title {
      & > span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
      .el-submenu__icon-arrow {
        display: none;
      }
    }
  }
}
</style>