<template>
  <el-container class="page-index">
    <!-- 顶部栏ToolBar -->
    <el-header>
      <sis-toolbar @listenLeftMenuShow="handleLeftMenuShow"></sis-toolbar>
    </el-header>

    <!-- 头部以下内容部分 -->
    <el-container class="concontainer">
      <el-aside class="aside" v-bind:width="ui.width">
        <el-menu
            class="menu"
            :collapse='ui.leftMenuShow'
            :router="true"
            @select="handleMenuSelect"
            @open="handleMenuOpen"
            @close="handleMenuClose">
          <template v-for="item in items">
            <!-- 没有子菜单 -->
            <el-menu-item v-if="item.list===undefined" :index="item.index.toString()" :key="item.index"
                          :route="item.route">
              <v-icon v-if='item.icon' v-bind:name="item.icon"/>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>

            <!-- 有子菜单 -->
            <el-submenu v-else :key="item.index" :index="item.index.toString()">
              <template slot="title">
                <v-icon v-if='item.icon' v-bind:name="item.icon"/>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item v-for="it in item.list" :index="it.index.toString()" :key="it.index" :route="it.route">
                <template slot="title">{{ it.title }}</template>
              </el-menu-item>
            </el-submenu>

          </template>
        </el-menu>

        <div @click="triggermenu" class="el-menu-trigger">
          <v-icon v-if="ui.leftMenuShow" name="weibiaoti25"></v-icon>
          <v-icon v-else name="hanbaocaidanzhedie"></v-icon>
        </div>

      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script type="text/ecmascript-6">
import SisToolbar from './Toolbar'
import Menu from './menu.js'

export default {
  name: 'SisIndex',
  components: {
    SisToolbar
  },
  data() {
    return {
      dom: {
        width: 0,
        height: 0,
        toolbarHeight: 80
      },
      ui: {
        width: '220px',
        leftMenuShow: false,
      },
      except: ['Default', 'SystemRegistration'],
      items: '',
      activeItem: '110'
    }
  },
  watch: {
    $route(to, from) {
      this.setItemIndex()
    }
  },
  beforeMount() {
    // this.getHeight();
  },
  mounted() {
    var arrr = localStorage.getItem("authaaaa");
    this.items = JSON.parse(arrr)
    this.$nextTick(() => {
      this.setItemIndex()
    })
  },
  methods: {
    setItemIndex() {
      let name = this.$route.name
      this.items.forEach(val => {
        if (val.list !== undefined) {
          val.list.forEach(itVal => {
            if (itVal.route && itVal.route.name === name) {
              this.activeItem = itVal.index
            }
          })
        }
        if (val.route && val.route.name === name) {

          this.activeItem = val.index
        }
      })
    },
    triggermenu() {
      if (this.ui.leftMenuShow) {
        this.ui.width = '220px'
      } else {
        this.ui.width = 'auto'
      }
      this.ui.leftMenuShow = !this.ui.leftMenuShow
    },
    handleMenuOpen(key, keyPath) {
    },
    handleMenuClose(key, keyPath) {
    },
    handleMenuSelect(key, keyPath) {
    },
    handleLeftMenuShow(show) {
      this.ui.leftMenuShow = show
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.page-index {
  width: 100%;
  height: 100%;
  display: --webkit-flex;

  .aside {
    height 100%
    position relative
    box-sizing border-box
    overflow-x hidden

    .menu {
      height: 100%;
      box-sizing border-box
    }

    .el-menu-trigger {
      position absolute
      bottom 0
      left 0
      width calc(100% - 1px)
      height 60px
      display -webkit-flex
      align-items center
      justify-content center
      cursor pointer
      border-right 1px solid #e6e6e6
      background #F7F7F7
      font-size 20px

      &:hover {
        background #ecf5ff
      }
    }
  }

  .main {
    box-sizing: border-box;
    overflow: auto;
  }

  .concontainer {
    overflow: auto;
  }
}
</style>
