<template>
  <div class="elmenuNav">
    <el-menu class="el-menu-vertical-demo" :unique-opened="true">
      <div v-for="(item, i) in menuItems" :key="i">
        <div v-if="item.meun == true">
          <el-menu-item
            v-if="!item.childNav"
            :index="item.path"
          >
            <div class="navName">
              <i class="el-icon-location"></i>
              <span>{{ item.title }}</span>
            </div>
          </el-menu-item>
        </div>
        <div v-if="item.meun == true">
          <el-submenu v-if="item.childNav && item.childNav.length > 0" :index="i.toString()">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span class="menuName">{{ item.title }}</span>
            </template>
            <span v-for="(child, cidx) in item.childNav" :key="cidx">
              <el-menu-item
                :unique-opened="true"
                :index="child.route"
                v-if="child.meun == true"
              >
                <span>{{ child.title }}</span>
              </el-menu-item>
            </span>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'home_page',
  data () {
    return {
      menuItems: [
        {
          route: '/',
          path: '/',
          title: '首页',
          role: ['admin', 'teacheer'],
          meun: false
        },
        {
          route: '/ss',
          path: '/ss',
          title: '导航一',
          role: ['admin', 'teacheer'],
          meun: false,
          childNav: [
            {
              route: '/11ss',
              path: '/11ss',
              title: '子导航一',
              role: ['admin', 'teacheer'],
              meun: false
            },
            {
              route: '/22ss',
              path: '/22ss',
              title: '子导航二',
              role: ['admin', 'teacheer'],
              meun: false
            },
            {
              route: '/33ss',
              path: '/33ss',
              title: '子导航三',
              role: ['admin', 'teacheer'],
              meun: false
            }
          ]
        },
        {
          route: '/22',
          path: '/22',
          title: '导航二',
          role: ['admin', 'teacheer'],
          meun: false,
          childNav: [
            {
              route: '/33ss',
              path: '/33ss',
              title: '子导航一',
              role: ['admin', 'teacheer'],
              meun: false
            },
            {
              route: '/44ss',
              path: '/44ss',
              title: '子导航二',
              role: ['admin', 'teacheer'],
              meun: false
            }
          ]
        },
        {
          route: '/33',
          path: '/33',
          title: '导航三',
          role: ['admin', 'teacheer'],
          meun: false,
          childNav: [
            {
              route: '/55ss',
              path: '/55ss',
              title: '子导航一',
              role: ['admin'],
              meun: false
            },
            {
              route: '/66ss',
              path: '/66ss',
              title: '子导航二',
              role: ['admin', 'teacheer'],
              meun: false
            },
            {
              route: '/77ss',
              path: '/77ss',
              title: '子导航三',
              role: ['admin', 'teacheer'],
              meun: false
            }
          ]
        },
        {
          route: '/44',
          path: '/44',
          title: '导航四',
          role: ['admin', 'teacheer'],
          meun: false,
          childNav: [
            {
              route: '/777ss',
              path: '/77ss',
              title: '子导航一',
              role: ['admin', 'teacheer'],
              meun: false
            },
            {
              route: '/88ss',
              path: '/88ss',
              title: '子导航二',
              role: ['admin'],
              meun: false
            }
          ]
        },
        {
          route: '/55',
          path: '/55',
          title: '导航五',
          role: ['admin', 'teacheer'],
          meun: false,
          childNav: [
            {
              route: '/99ss',
              path: '/99ss',
              title: '子导航一',
              role: ['admin'],
              meun: false
            },
            {
              route: '/1010ss',
              path: '/1010ss',
              title: '子导航二',
              role: ['admin', 'teacheer'],
              meun: false
            }
          ]
        },
        {
          narouteme: '/66',
          path: '/66',
          title: '导航六',
          role: ['admin'],
          meun: false,
          childNav: [
            {
              route: '/1111ss',
              path: '/11111ss',
              title: '子导航一',
              role: ['admin'],
              meun: false
            },
            {
              route: '/2222ss',
              path: '/2222ss',
              title: '子导航二',
              role: ['admin'],
              meun: false
            }
          ]
        }
      ],
      quanxian: 'teacheer'
    }
  },
  created () {
    let that = this
    let menulist = that.menuItems
    let qxVal = that.quanxian
    for (var i = 0; i < menulist.length; i++) {
      var qx = menulist[i].role
      var child = menulist[i].childNav
      for (var j = 0; j < qx.length; j++) {
        if (qxVal == qx[j]) {
          menulist[i].meun = true
        }
      }
      if (child != undefined) {
        for (var k = 0; k < child.length; k++) {
          var qxChild = child[k].role
          for (var l = 0; l < qxChild.length; l++) {
            if (qxVal == qxChild[l]) {
              child[k].meun = true
            }
          }
        }
      }
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.elmenuNav{width:200px;}
.elmenuNav .el-menu{min-height:40px;overflow:hidden;}
.elmenuNav >>> .el-menu--inline{min-height:40px;overflow:hidden;}
</style>
