<template>
  <el-aside :style="{ width: sidebar.width, height: '100%' }">
    <!-- <el-menu :default-openeds="['1']"  > -->
    <div :class="isCollapse ? 'logo min-logo' : 'logo'">
      <!-- <img src="@/assets/logo.png" alt="logo" /> -->
      <span v-if="!isCollapse">{{title}}</span>
      <span @click="handleLefeMenu" class="bars">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </span>
    </div>

    <el-menu
      id="menuClass"
      :default-active="this.$route.path.substr(1)"
      router
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      background-color="#061f3e"
      text-color="#fff"
      active-text-color="#409EFF"
    >
      <template v-for="(item, index) in Routers">
        <el-menu-item v-if="item.noDropdown" :key="index" :index="item.name" :route="item">
          <i :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
      <template v-for="(item, index) in Routers">
        <el-submenu v-if="!item.noDropdown" :key="index" :index="item.path">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="(citem, cindex) in item.children"
            :key="cindex"
            :index="citem.name"
            :route="citem"
          >{{ citem.meta.title }}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </el-aside>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
import config from "@/config"
import slide from "@/router/slidePath.js";
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      Routers: slide,
      title: config.title
      // isCollapse:false
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters([
      //'permission_routers',
      "isCollapse",
      "sidebar"
      //'menuIndex'
    ])
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleLefeMenu() {
      this.$store.dispatch("setLeftCollapse"); // 折叠菜单
      this.$store.dispatch("handleLeftMenu"); // 改变菜单宽度 180->35/35-180
      // this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style lang="less">
.el-submenu__title,
.el-menu-item {
  padding: 0;
  color: #fff;
}
.el-menu {
  height: 100%;
  color: #fff;
  border-right: none !important;
}
.el-submenu .el-menu-item {
  padding: 0;
}
.el-submenu__title:hover,
.el-menu-item:hover {
  background: #4169e1;
}
.iconfont {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 16px;
  color: #ffffff !important;
}

.logo {
  width: 180px;
  min-height: 60px;
  transition: width 0.5s linear;
  position: relative;
  img {
    height: 40px;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
    font-size: 22px;
    color: #ffffff;
    display: inline-block;
    padding: 15px 0;
    text-align: center;
    box-sizing: border-box;
    width: 90%;
  }
  .bars {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    cursor: pointer;
    text-align: center;
  }
}
.min-logo {
  width: 60px;
  transition: width 0.3s;
  .bars {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
</style>
