<template>
  <div :style="{width: isCollapse ? 'auto' : '200px'}">
    <el-scrollbar class="theme-dark" wrap-class="scrollbar-wrapper">
      <Logo v-model="isCollapse"></Logo>

      <el-menu :collapse="isCollapse"
               :collapse-transition="false"
               :default-active="activeMenu"
               :unique-opened="true"
               active-text-color="#409EFF"
               background-color="#304156"
               class="el-menu-vertical-demo"
               text-color="#bfcbd9">

        <template v-for="(item, index) in MenuList">
          <!--  多子级 -->
          <el-submenu v-if="isSubmenu(item)" :key="'menu'+index" :index="item.path">
            <template slot="title">
              <i :class="item.icons"></i>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="(menu, i) in item.children">
              <router-link v-if="!menu.hidden" :key="i" :to="menu.path">
                <el-menu-item :index="menu.path">
                  <i :class="menu.icons"></i>
                  <span slot="title">{{ menu.title }}</span>
                </el-menu-item>
              </router-link>
            </template>
          </el-submenu>

          <!--  单子级 -->
          <template v-if="isOneMenu(item)">
            <router-link v-for="(menu, i) in item.children" :key="i" :to="menu.path">
              <el-menu-item :index="menu.path">
                <i :class="menu.icons"></i>
                <span>{{ menu.title }}</span>
              </el-menu-item>
            </router-link>
          </template>

          <!--  无子级 -->
          <router-link v-if="!item.children" :key="'item'+index" :to="item.path">
            <el-menu-item :index="item.path">
              <i :class="item.icons"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </router-link>

        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import Logo     from "./Logo"
import {routes} from "@/router/index.js";

export default {
  name: "SideBar",
  components: {Logo},
  props: {
    data: Array,
    base: {
      type: String,
      default: ''
    }
  },
  computed: {
    MenuList() {
      return routes.filter(i => !i.hidden)
    },
    activeMenu() {
      const {path} = this.$route;
      return path;
    },
    isSubmenu() {
      return (item) => {
        return item.children && item.children.length > 1
      }
    },
    isOneMenu() {
      return (item) => {
        return item.children && item.children.length === 1
      }
    }
  },
  data() {
    return {
      isCollapse: false
    };
  },
};
</script>
<style lang="scss">
.theme-dark {
  .el-menu-vertical-demo {
    color: rgb(191, 203, 217);

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }
  }
}
</style>
