<template>
  <div>
<!--    <el-menu-->
<!--      class="el-llgt-menu"-->
<!--      :default-active="defaultActive"-->
<!--      background-color="#495060"-->
<!--      text-color="#eee"-->
<!--      :active-text-color="activeTextColor"-->
<!--      :unique-opened="true">-->
<!--      <template v-for="(item,index) in menuList">-->
<!--        &lt;!&ndash;不存在二级，只有一级菜单&ndash;&gt;-->
<!--        <el-menu-item-->
<!--          v-if="item.subMenus.length === 0"-->
<!--          :key="index"-->
<!--          :index="item.name"-->
<!--          @click.native="_goto(item.uri);_changeMenu(item)">-->
<!--          &lt;!&ndash;<i :class="child.icon"></i>&ndash;&gt;-->
<!--          <i class="el-icon-share"></i>-->
<!--          <span slot="title">{{ item.name }}</span>-->
<!--        </el-menu-item>-->
<!--        &lt;!&ndash;有二级菜单&ndash;&gt;-->
<!--        <el-submenu v-else :key="index" :index="item.name">-->
<!--          <template slot="title">-->
<!--            &lt;!&ndash;<i :class="item.icon"></i>&ndash;&gt;-->
<!--            <i class="el-icon-edit"></i>-->
<!--            <span>{{ item.name }}</span>-->
<!--          </template>-->
<!--          <template v-for="(child,childIndex) in menuListed(item.subMenus)">-->
<!--            <el-menu-item-->
<!--              :key="childIndex"-->
<!--              :index="child.uri"-->
<!--              @click.native="_goto(child.uri);_changeMenu(child)">-->
<!--              &lt;!&ndash;<i :class="child.icon"></i>&ndash;&gt;-->
<!--              <i class="el-icon-share margin-left-20"></i>-->
<!--              <span slot="title">{{ child.name }}</span>-->
<!--            </el-menu-item>-->
<!--          </template>-->
<!--        </el-submenu>-->

    <el-menu
      :collapse="isShrink"
      :collapse-transition = "isShrink"
      :default-active="defaultActive"
      class="el-llgt-menu"
      :unique-opened="true"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="(item, index) in menuList">
        <el-submenu v-if="item.leftMenus" :key="index" :index=item.id>
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title"> {{item.name}}</span>
          </template>
          <!-- 第二层 -->
          <nav-tree :el-list="item"></nav-tree>
        </el-submenu>
        <el-menu-item v-else :key="index" :index="item.name" @click.native="_goto(item.uri);_changeMenu(item)">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
<!--      </template>-->
<!--    </el-menu>-->

  </div>
</template>

<script>
import Store from 'store2'
import navTree from './nav-tree'
/**
 * * 展开时的菜单
 */

export default {
  name: 'SideBarMenu',
  components: { navTree },
  // props: {
  //   menuList: Array,
  //   menuTheme: {
  //     type: String,
  //     default: 'dark'
  //   }
  // },
  props: ['menuList', 'menuTheme', 'activeTextColor', 'isShrink'],
  provide() {
    return {
      parent: this
    }
  },
  data() {
    return {
      openNames: [],
      activeName: '',
      defaultActive: ''
    }
  },
  computed: {
    menuListed() {
      return function(val) {
        const arr = []
        Object.assign(arr, val)
        return arr.reverse()
      }
    }
  },
  mounted() {
    // 首次进入系统 通过session 拿到最后一个数组的对象，取出Id值
    const ids = Store.session.get('currentTag')
    ;(ids && this.$route.meta.title === '工作台' && this._setDefaultMenu()) ||
      this._setDefaultMenu(ids)
  },
  methods: {
    _goto(next) {
      this.$router.push(next)
    },
    _setDefaultMenu(id) {
      // 首次进入系统 没有session 进行判断
      this.defaultActive = id || this.$route.meta.title
      return true
    },
    // 点击菜单
    _changeMenu(data) {
      Store.session('currentTag', data.id)
    }
  }
}
</script>
<style>
.el-llgt-menu .el-menu-item,
.el-llgt-menu .el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-submenu__icon-arrow {
  top: 53%;
  right: 15px;
}
</style>
