<template>
  <div style="position:relative;">
    <el-scrollbar>
      <el-aside class="app-aside" :width="asideCollapsed?'auto':'240px'">
        <el-menu :collapse-transition="false" :collapse="asideCollapsed" :default-active="$route.path" unique-opened>
          <template>
            <el-submenu v-for="(item,index1) in $store.state.base.sysMenus" :key="item.uuid " :index="index1+''">
              <template slot="title">
                <i :class="'el-icon-fa-'+item.iconUrl"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item v-for="(child,index2) in item.children" :index="index1+'-'+index2" :key="child.permCode" @click.native="selectMenu(child)">
                <i :class="'el-icon-fa-'+child.iconUrl"></i>
                <span>{{child.name}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
    </el-scrollbar>
    <p class='version_btn'>
      <el-button slot="reference" size="small" icon='el-icon-more' @click="asideCollapsed=!asideCollapsed"></el-button>
    </p>
    <div class="copyright" v-if="!asideCollapsed">{{companyInfo}}</div>
  </div>
</template>

<script>
import config from "@/config.js";

export default {
  data() {
    return {
      companyInfo: config.companyInfo,
      asideCollapsed: false
    };
  },
  mounted() {},
  methods: {
    selectMenu({ name, funcUrl }) {
      this.$tabView.addView(name, funcUrl);
    }
  }
};
</script>

<style>
</style>
