<template>
  <section class="header">
    <div>
      <el-menu
        text-color="#ffffff"
        :default-active="activeIndex"
        mode="horizontal"
      >
        <el-submenu index="1">
          <template slot="title">
            <div class="logo">
              <img src="@/assets/images/logo.png" alt />
              <span>漳山智慧水务系统</span>
            </div>
          </template>

          <el-submenu>
            <template slot="title">监视页面</template>
            <el-submenu
              :index="'1_'+pathIndex"
              v-for="(pathObj, pathIndex) in pathsummury"
              :key="pathObj.name+pathIndex"
            >
              <template slot="title">{{pathObj.name}}</template>
              <label v-for="(pageitem, pageindex) in pathObj.page" :key="pageindex">
                <el-menu-item
                  :index="'1_'+pathIndex+'_'+pageindex"
                  @click="toViewer(pathObj.path+pageitem.path)"
                >{{pageitem.name}}</el-menu-item>
              </label>
            </el-submenu>
          </el-submenu>
        </el-submenu>
      </el-menu>


    </div>

    <div class="nav-button">
      <i>Admin</i>
      <span @click="logout" class="pad-10">
        <i class="el-icon-switch-button"></i> 退出
      </span>
    </div>
  </section>
</template>

<script>

import pathsummery from '../static/json/pathsunmmery.json'

export default {
  name: 'adminHeader',
  data()
  {
    return {
      levelList: null,//路由列表,
      pathsummury: pathsummery
    }
  },

  methods: {
    //退出登录
    logout()
    {
      //定义token退出值
      localStorage.removeItem("token") //清除token
      this.$router.push("/")
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #202c3a;
  color: #fff;

  .el-menu-panel {
    overflow: hidden;
  }

  .logo {
    display: inline-block;
    vertical-align: middle;
    img {
      width: 30px;
      vertical-align: inherit;
    }
  }
  .nav-button {
    float: right;
    span {
      cursor: pointer;
    }
  }
}
</style>