<template>
  <div>
    <el-menu
      :default-active="$route.fullPath"
      class="el-menu-demo"
      mode="horizontal"
      @select="0"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      menu-trigger="click"
    >
      <el-submenu index="1">
        <template slot="title">智慧水务系统</template>
        <el-submenu index="1_1">
          <template slot="title">监视页面</template>
          <el-submenu v-for="(v,kindex) in $store.state.pathSummary" :index="'1_1'+kindex" :key="v.name">
            <template slot="title">{{v.name}}</template>
            <label v-for="(vp,vpindex) in v.page" :key="v.name+'_'+vp.name">
              <el-menu-item
                :index="'1_1'+kindex+'_'+vpindex"
                @click="RouteJump(v.path+vp.path)"
              >{{vp.name}}</el-menu-item>
            </label>
          </el-submenu>
        </el-submenu>
        <template v-for="(item, index) in $router.options.routes">
          <template>
            <el-submenu v-if="item.children && !item.hidden" :key="index" :index="index + ''">
              <template slot="title">{{ item.meta.title }}</template>
              <div v-for="(child, index) in item.children" :index="child.path" :key="child.path">
                <template v-if="child.children">
                  <el-submenu :index="index + ''">
                    <template slot="title">{{ child.meta.title }}</template>
                    <el-menu-item
                      v-for="grandson in child.children"
                      :index="`${grandson.path}`"
                      :key="grandson.path"
                    >{{ grandson.meta.title }}</el-menu-item>
                  </el-submenu>
                </template>
                <el-menu-item
                  :index="`${child.path}`"
                  :key="child.path"
                  v-if="!child.children && !child.hidden"
                >{{ child.meta.title }}</el-menu-item>
              </div>
            </el-submenu>

            <el-menu-item
              v-if="!item.children && !item.hidden"
              :key="index"
              :index="item.path"
            >{{ item.meta.title }}</el-menu-item>
          </template>
        </template>
      </el-submenu>
    </el-menu>
    <div class="headRight">
      <div class="pad-10">
        <i
          :class="!isLock ? 'el-icon-unlock':'el-icon-lock'"
          @click="viewLock(isLock ? 1 : 2);isLock=!isLock"
        >锁定监视页面</i>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div>
        <i>{{userName}}</i>
        <span @click="logout" class="pad-10">
          <i class="el-icon-switch-button">退出</i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>

import { monitor } from '../network/network'
import { Store } from "le5le-store";
import p from "../static/json/pathsunmmary.json"


export default {
  name: 'adminHeader',
  data()
  {
    return {
      userName: localStorage.getItem("ms_username"),
      isLock: true, // 监视页面的控件是否锁定
    }
  },
  created()
  {
    monitor.getJsonFile();
    window.sum = p;
  },
  methods: {
    handleSelect() { },
    viewLock(tag)
    {
      Store.set('viewLock', tag)
    },
    RouteJump(path)
    {
      this.$emit("toViewer", path);
    },
    //退出登录
    logout()
    {
      //定义token退出值
      localStorage.removeItem("token") //清除token
      this.$router.push("/")
    }
  },
}
</script>
<style lang="less" scoped>
i:hover {
  color: rgb(255, 208, 75);
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0 20px;
}
.headRight {
  color: #ffffff;
  padding-right: 10px;
  //width: 63px;
  height: 63px;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="css">
.el-menu {
  position: initial !important;
  overflow: hidden !important;
}
</style>