<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 {
      position relative
      box-sizing border-box
      padding-bottom 60px
      overflow-x hidden
      .menu {
        height: 100%;
        box-sizing border-box
      }
      .el-menu-trigger {
        position absolute
        bottom 0
        left 0
        margin-bottom -80px
        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>
