<template>
  <div id="IndexTop">
    <el-container>
      <el-header height="40px">
        <img
          src="../../static/img/indexTop1.png"
          id="IndexTop1"
          @click="MenuSHOW()"
          style="cursor: pointer;"
        />
        <img src="../../static/img/logo.png" alt id="IndexLogo" />
        <span id="projectName">工程作业及监控系统</span>
        <img
          src="../../static/img/indexTop5.png"
          title="注销"
          id="IndexLetout"
          style="cursor: pointer;"
        />
        <img
          src="../../static/img/indexTop4.png"
          title="全屏"
          id="IndexQuanpin"
          style="cursor: pointer;"
        />
        <img
          src="../../static/img/indexTop3.png"
          title="消息"
          id="IndexMessage"
          style="cursor: pointer;"
        />
        <el-dropdown id="UserName">
          <span class="el-dropdown-link">
            {{LoginName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出登陆</el-dropdown-item>
            <el-dropdown-item>返回首页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside :style="'width:' + MenuWidth + 'px'">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @select="MenuClick"
            background-color="rgb(58, 58, 60)"
            text-color="#fff"
            active-text-color="rgb(255,213,0)"
            router="true"
          >
            <el-menu-item index="1" route="/overview">
              <i class="el-icon-menu"></i>
              <span slot="title">概&nbsp;&nbsp;&nbsp;&nbsp;览</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>站点状况预览图</span>
              </template>
              <el-menu-item index="2-1" route="/site/previewOfSiteStatus">站点状况预览图</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" route="/newFiber/NewFiberSearch">
              <i class="el-icon-menu"></i>
              <span slot="title">新烽查询</span>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>配置中心</span>
              </template>
              <el-menu-item index="4-1" route="/configure/AlarmConfiguration">报警配置</el-menu-item>
              <el-menu-item index="4-2" route="/configure/PushRules">推送规则</el-menu-item>
              <el-menu-item index="4-3" route="/configure/AlarmLog">报警日志</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>消息管理</span>
              </template>
              <el-menu-item index="5-1" route="/MessageManagement/MessageQuery">消息查询</el-menu-item>
              <el-menu-item index="5-2" route="/MessageManagement/MessageStatistics">消息统计</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="height:100%">
          <router-view id="ContentView" :userId="userId"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { message } from "./../util/item";
export default {
  name: "IndexTop",
  data: function() {
    return {
      MenuWidth: 200,
      LoginName: "系统管理员", //登录用户名称
      userId: ""
    };
  },
  methods: {
    MenuSHOW: function() {
      if (this.MenuWidth == 200) {
        this.MenuWidth = 0;
      } else {
        this.MenuWidth = 200;
      }
    },
    MenuClick(key, keyPath) {
      console.log(key, keyPath);
    }

    // TwoMenuClick: function(index, event) {
    //   // 给index为1的加字体颜色,其他的不加
    //   //点击添加字体颜色，其他的删除class名称
    //   this.dynamic = index;
    //   // 获取点击的dom结构
    //   var thisDom = event.currentTarget;
    //   console.log(thisDom);
    //   // 获取dom结构里储存的路径
    //   // console.log(thisDom.children[0].value);
    //   var router = this.$router; //赋值使用
    //   router.push({ path: thisDom.children[0].value });
    //   this.userId = this.LoginId;
    // },
    // OneMenuClick: function(ID, Blone) {
    //   for (var i = 0; i < this.OneMenus.length; i++) {
    //     if (this.OneMenus[i].menuId == ID) {
    //       this.Manus = this.OneMenus[i].list;
    //       console.log(this.Manus);
    //       this.loadOneMenu();
    //       if (!Blone) {
    //         this.Oshow = !this.Oshow;
    //       }
    //       this.OneSel = index;
    //     }
    //   }
    // },
    // loadOneMenu: function() {
    //   var router = this.$router; //赋值使用
    //   router.push({ path: this.Manus[0].url });
    //   this.dynamic = 0;
    // },
    // MenuListData: function() {},
    // mouseLeave: function() {
    //   this.Oshow = false;
    // },
    // GoOneMenu() {
    //   this.$router.push("/OneMenu");
    // },
    // TuiChu() {
    //   this.$http
    //     .get(this.nozzle.logout, {})
    //     .then(response => {
    //       if (response.data.code === 200) {
    //       }
    //     })
    //     .catch(response => {
    //       message(response);
    //     });
    //   this.$router.push("/Login");
    // },
    // 获取权限菜单
    // LoadMenu() {
    //   this.$http
    //     .get(this.nozzle.sysMenuNav, {})
    //     .then(response => {
    //       if (response.data.code === 200) {
    //         this.OneMenus = response.data.data;
    //         // 获取从一级菜单页传过来的菜单ID
    //         this.OneMenuClick(this.$route.query.menuId, true);
    //       }
    //     })
    //     .catch(response => {
    //       message(response);
    //     });
    // },
    // 获取登录信息
    // loadLoginName() {
    //   this.$http
    //     .get(this.nozzle.sysUserInfo)
    //     .then(response => {
    //       if (response.data.code === 200) {
    //         this.LoginName = response.data.data.username;
    //         this.LoginId = response.data.data.userId;
    //       } else {
    //         message(response);
    //       }
    //     })
    //     .catch(response => {
    //       message(response);
    //     });
    // }
  },
  mounted: function() {
    //添加菜单
    // this.LoadMenu();
    // this.loadLoginName();
  }
};
</script>
<style >
#IndexTop {
  width: 100%;
  height: 100%;
  position: relative;
  -o-user-select: none;
  -moz-user-select: none; /*火狐 firefox*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10+*/
  -khtml-user-select: none; /*早期的浏览器*/
  user-select: none;
}
#ContentView {
  width: 100%;
  height: 100%;
}
/* 顶部 A */
.el-header {
  background-color: rgb(5, 4, 9);
  color: #fff;
  text-align: center;
  line-height: 40px;
  padding: 0;
}

#IndexTop1 {
  margin: 14px;
  float: left;
}

#IndexLogo {
  float: left;
}

#projectName {
  float: left;
  padding: 0 20px;
  border-left: 1px solid #ccc;
  height: 24px;
  line-height: 24px;
  margin-top: 8px;
  margin-left: 10px;
  letter-spacing: 4px;
  font-weight: 600;
}

#UserName {
  float: right;
  margin-right: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
#IndexMessage,
#IndexQuanpin,
#IndexLetout {
  float: right;
  margin: 12px;
}
/* 顶部 B */
/* 左侧菜单 A */
.el-aside {
  background-color: rgb(5, 4, 9);
  color: #fff;
  text-align: center;
}
.el-menu {
  border-right: 0px solid #e6e6e6;
}
.el-menu-item {
  border-bottom: 2px solid #000;
  text-align: left;
}
.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #000;
}
.el-submenu__title {
  border-bottom: 2px solid #000;
  text-align: left;
}
.el-menu-item:focus,
.el-menu-item:hover,
.el-submenu__title:hover {
  outline: 0;
  background-color: #6d6d6d !important;
}

/* 左侧菜单 B */

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
.el-container {
  width: 100%;
  height: 100%;
}
</style>