<template>
  <div id="IndexTop" :class="{ indexbgc: !flag }">
    <el-container style="height: 100%">
      <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"
          @click="ZhuXIao()"
        />
        <img
          src="../../static/img/indexTop4.png"
          title="全屏"
          id="IndexQuanpin"
          style="cursor: pointer"
        />
        <img
          src="../../static/img/indexTop3.png"
          title="消息"
          id="IndexMessage"
          style="cursor: pointer"
        />
        <div class="ChangeBGC" @click="ChangeBGC()">换色</div>
        <span id="UserName">
          {{ LoginName }}
        </span>
      </el-header>
      <el-container style="height: calc(100% - 40px)">
        <el-aside :style="'width:' + MenuWidth + 'px'">
          <el-menu
            :default-active="$route.path"
            unique-opened
            class="el-menu-vertical-demo"
            @select="MenuClick"
            :router="true"
            text-color="white"
            active-text-color="#e8d523"
          >
            <el-menu-item index="/overview" v-show="false">
              <i class="el-icon-menu"></i>
              <span slot="title">概&nbsp;&nbsp;&nbsp;&nbsp;览</span>
            </el-menu-item>
            <el-submenu index="2" v-has="'m1-1'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>站点状况预览图</span>
              </template>
              <el-menu-item index="/site/previewOfSiteStatus" v-has="'m1-1'"
                >站点状况预览图</el-menu-item
              >
            </el-submenu>
            <el-menu-item index="/newFiber/NewFiberSearch" v-has="'m2'">
              <i class="el-icon-menu"></i>
              <span slot="title">新烽查询</span>
            </el-menu-item>
            <el-submenu index="4" v-has="'m3'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>配置中心</span>
              </template>
              <el-menu-item index="/configure/AlarmConfiguration" v-has="'m3-1'"
                >报警配置</el-menu-item
              >
              <el-menu-item index="/configure/PushRules" v-has="'m3-2'"
                >推送规则</el-menu-item
              >
              <el-menu-item index="/configure/AlarmLog" v-has="'m3-3'"
                >报警日志</el-menu-item
              >
              <el-menu-item
                index="/configure/PatrolConfiguration"
                v-has="'m3-4'"
                >巡检配置</el-menu-item
              >
              <el-menu-item index="/configure/RtuConfig" v-has="'m3-4'"
                >RTU配置</el-menu-item
              >
            </el-submenu>
            <el-submenu index="13" v-has="'m11'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>配置管理</span>
              </template>
              <el-menu-item index="/ConfigManager/project" v-has="'m11-1'"
                >项目设置</el-menu-item
              >
              <el-menu-item
                index="/ConfigManager/SiteManagement"
                v-has="'m11-2'"
                >站点管理</el-menu-item
              >
              <el-menu-item index="/ConfigManager/device" v-has="'m11-3'"
                >设备管理</el-menu-item
              >
              <el-menu-item index="/ConfigManager/factor" v-has="'m11-4'"
                >因子管理</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5" v-has="'m4'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>消息管理</span>
              </template>
              <el-menu-item
                index="/MessageManagement/MessageQuery"
                v-has="'m4-1'"
                >消息查询</el-menu-item
              >
              <el-menu-item
                index="/MessageManagement/MessageStatistics"
                v-has="'m4-2'"
                >消息统计</el-menu-item
              >
            </el-submenu>
            <el-submenu index="6" v-has="'m5'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据分析</span>
              </template>
              <el-menu-item index="/DataAnalysis/dataScreening" v-has="'m5-1'"
                >数据总览</el-menu-item
              >
              <el-menu-item
                index="/DataAnalysis/StatisticalReport"
                v-has="'m5-2'"
                >统计报表</el-menu-item
              >
            </el-submenu>

            <el-submenu index="8" v-has="'m7'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>工程作业</span>
              </template>
              <el-menu-item index="/Engineering/Nowfault" v-has="'m7-1'"
                >站点实时故障数据</el-menu-item
              >
              <el-menu-item index="/Engineering/HistoricalFault" v-has="'m7-2'"
                >站点历史故障数据</el-menu-item
              >
              <el-menu-item index="/Engineering/MyHomework" v-has="'m7-3'"
                >我的作业</el-menu-item
              >
            </el-submenu>
            <el-submenu index="9" v-has="'m8'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>LED显示屏管理</span>
              </template>
              <el-menu-item index="/LED/LEDConfig" v-has="'m8'"
                >LED设备信息</el-menu-item
              >
            </el-submenu>
            <el-submenu index="10" v-has="'m9'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/sys/user" v-has="'m9-1'"
                >用户管理</el-menu-item
              >
              <el-menu-item index="/sys/org" v-has="'m9-2'"
                >组织管理</el-menu-item
              >
              <el-menu-item index="/sys/role" v-has="'m9-3'"
                >角色管理</el-menu-item
              >
              <el-menu-item index="/sys/menu" v-has="'m9-4'"
                >菜单管理</el-menu-item
              >
            </el-submenu>
            <el-menu-item
              index="/ConditionMonitoring/ConditionMonitoring"
              v-has="'m10'"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">状态监控</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="height: 100%">
          <router-view
            id="ContentView"
            :userId="userId"
            :flag="flag"
          ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { message } from "./../util/item";
import * as locasto from "./../util/item";
export default {
  name: "IndexTop",
  data: function() {
    return {
      MenuWidth: 200,
      LoginName: "系统管理员", //登录用户名称
      userId: "",
      flag: true
    };
  },
  methods: {
    MenuSHOW: function() {
      if (this.MenuWidth == 200) {
        this.MenuWidth = 0;
      } else {
        this.MenuWidth = 200;
      }
    },
    MenuClick(key, keyPath) {
      // console.log(key, keyPath);
    },
    ChangeBGC() {
      let root = document.querySelector(":root");
      if (this.flag) {
        root.style.setProperty("--color", "rgb(253, 44, 79)");
        root.style.setProperty("--tablehover", "rgb(255,255,255)");
        root.style.setProperty("--white", "rgb(0,0,0)");
        root.style.setProperty("--tablethead", "rgb(206, 223, 255)");
        root.style.setProperty("--tablebody", "rgb(193, 213, 248)");
        root.style.setProperty("--elhead", "rgb(6, 92, 255)");
        root.style.setProperty("--elaside", "rgb(187, 209, 246)");
        root.style.setProperty("--black", "rgb(255, 255, 255)");
        root.style.setProperty("--elmenuitem", "rgb(255, 255, 255)");
        root.style.setProperty(
          "--lineargradient",
          "-webkit-linear-gradient(0deg, #065cfd, #bbd1f6 80%)"
        );
        root.style.setProperty("--elicon", "rgb(255,255,255)");
        root.style.setProperty("--preSiteTitle", "rgb(207, 223, 255)");
        root.style.setProperty("--preSiteCentent", "rgb(193, 213, 248)");
        root.style.setProperty("--pretextbg", "rgb(6, 92, 255)");
        root.style.setProperty("--preTopDatatxt", "rgb(39, 71, 217)");
        root.style.setProperty("--eldatebefore", "rgb(0, 119, 255)");
        root.style.setProperty("--bluetowhite", "rgb(255, 255, 255)");
        root.style.setProperty("--yellow", "rgb(0, 120, 254)");
        root.style.setProperty("--lighgreen", "rgb(0, 0, 0");
        root.style.setProperty("--digtext", "rgb(0, 0, 0)");
        root.style.setProperty("--diatitle", "rgb(0, 119, 254)");
        root.style.setProperty("--selected", "#333333");
        root.style.setProperty("--selecthover", "#dbecff");
        root.style.setProperty("--selectlist", "#f4f8ff");
        root.style.setProperty("--shouselect", "#f4f8ff");
        root.style.setProperty("--elmentbgc", "rgb(193, 213, 248)");
        root.style.setProperty("--diagiobgc", "rgb(206, 223, 255)");

        206, 223, 255;

        this.flag = false;
        // ---------------------分界线----------------------------------//
      } else {
        root.style.setProperty("--color", "rgb(255, 255, 255)");
        root.style.setProperty("--tablehover", "rgb(4, 51, 52)");
        root.style.setProperty("--white", "rgb(255,255,255)");
        root.style.setProperty("--tablethead", "transparent");
        root.style.setProperty("--tablebody", "transparent");
        root.style.setProperty("--elhead", "rgb(5, 4, 9)");
        root.style.setProperty("--elaside", "rgb(5, 4, 9)");
        root.style.setProperty("--black", "rgb(0, 0, 0)");
        root.style.setProperty("--elmenuitem", "rgb(58, 58, 60)");
        root.style.setProperty(
          "--lineargradient",
          "-webkit-linear-gradient(transparent)"
        );
        root.style.setProperty("--elicon", "");
        root.style.setProperty("--preSiteTitle", "rgba(25, 26, 28)");
        root.style.setProperty("--preSiteCentent", "transparent");
        root.style.setProperty("--pretextbg", "transparent");
        root.style.setProperty("--preTopDatatxt", "rgb(255, 217, 0)");
        root.style.setProperty("--eldatebefore", "rgb(255, 255, 255)");
        root.style.setProperty("--bluetowhite", "rgb(0, 119, 254)");
        root.style.setProperty("--yellow", "rgb(255, 255, 0)");
        root.style.setProperty("--lighgreen", "rgb(127, 255, 0)");
        root.style.setProperty("--digtext", "rgb(96, 98, 102)");
        root.style.setProperty("--diatitle", "rgb(0, 255, 255)");
        root.style.setProperty("--selected", "rgb(239, 226, 1)");
        root.style.setProperty("--selecthover", "rgb(4, 51, 52)");
        root.style.setProperty("--shouselect", "rgb(60, 57, 57)");
        root.style.setProperty("--elmentbgc", "rgb(58, 58, 60)");
        root.style.setProperty("--diagiobgc", "rgb(0, 0, 0)");

        this.flag = true;
      }
    },
    ZhuXIao() {
      this.$router.push({ path: "/Login" });
      sessionStorage.clear();
    }
  },
  mounted: function() {
    //添加菜单
    // this.LoadMenu();
    // this.loadLoginName();
    this.LoginName = locasto.getItem("USERName");
  }
};
</script>
<style>
.el-icon-arrow-up:before {
  color: var(--white);
}
.vue-treeselect__placeholder {
  color: var(--white);
}
.el-icon-arrow-down:before {
  color: var(--white);
  font-weight: bold;
}
.form-cascader .el-cascader-node:not(.is-disabled):focus,
.form-cascader .el-cascader-node:not(.is-disabled):hover {
  background-color: var(--selecthover) !important;
}
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: var(--selected);
}
.el-select-dropdown__list {
  background-color: var(--shouselect);
}

.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
  background-color: var(--tablethead);
}

.el-form-item__label {
  color: var(--digtext);
}

.el-pagination__jump {
  color: var(--white);
}
.el-pagination__total {
  color: var(--white);
}

.el-icon-arrow-right:before {
  color: var(--lighgreen);
}
.el-icon-arrow-left:before {
  color: var(--lighgreen);
}
.el-pagination .el-pager li.active {
  background-color: hsl(210, 100%, 63%) !important;
  cursor: default;
}
.el-tabs__nav-scroll {
  background: var(--tablethead) !important;
}
#IndexTop {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../../static/img/BGIMG.jpg") 100% 100%;
}
.indexbgc {
  background: url("../../static/img/bg_img.png") 100% 100% !important;
}

.el-table thead {
  background: var(--tablethead);
}
.el-table__body {
  background: var(--tablebody);
}

.el-input__inner {
  background-color: transparent;
  color: var(--white) !important;
  border: 1px solid rgb(0, 111, 255);
}
.el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border: 1px solid rgb(0, 111, 255);
  color: var(--white) !important;
}

.el-checkbox {
  color: var(--white);
}

.el-input__inner::placeholder {
  color: var(--white);
}

.el-icon-date:before {
  color: var(--eldatebefore) !important;
}
.el-aside {
  background-color: var(--elaside) !important;
  color: var(--white) !important;
  text-align: center;
}
.el-icon-menu:before,
.el-icon-location:before {
  color: var(--elicon);
}
.ChangeBGC {
  position: absolute;
  right: 260px;
  z-index: 9999;
  background-color: var(--elhead);
  color: #fff;
  cursor: pointer;
}
#ContentView {
  width: 100%;
  height: 100%;
}
/* 顶部 A */
.el-header {
  background-color: var(--elhead);
  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-menu-item {
  background-color: var(--elmenuitem) !important;
  background-image: var(--lineargradient) !important;
  border-bottom: 2px solid var(--black);
  /* color: var(--white) !important; */
  text-align: left;
  background-color: var(--elmentbgc);
}
.el-menu-item .el-menu-item {
  color: var(--white) !important;
}
.el-submenu .el-menu-item {
  text-align: center;
}
.el-menu-vertical-demo {
  background-color: var(--elmenuitem) !important;
  background-image: var(--lineargradient) !important;
  color: var(--white) !important;
}

.el-submenu__title {
  border-bottom: 2px solid var(--black);
  color: var(--white);
  text-align: left;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  outline: 0;
  background-color: #6d6d6d !important;
}
.el-submenu.is-active .el-submenu__title {
  border-bottom-color: var(--black) !important;
}

/* 左侧菜单 B */

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  padding: 30px !important;
  /* line-height: 160px; */
}
.el-container {
  width: 100%;
}
.el-message-box__title {
  color: var(--diatitle);
}
.el-message-box__content {
  color: white !important;
}
.el-date-editor .el-range-separator {
  color: var(--white) !important;
}
.el-range-input {
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-picker-panel {
  background: #182031 !important;
}
.el-picker-panel [slot="sidebar"],
.el-picker-panel__sidebar {
  background: #182031 !important;
}
.el-picker-panel__footer {
  background: #182031 !important;
}
.el-picker-panel__shortcut {
  color: #c2ceea !important;
}
.el-date-editor .el-range-input {
  color: var(--white) !important;
}
.el-date-range-picker__header .el-picker-panel__icon-btn {
  color: #fff !important;
}
.el-time-panel {
  background-color: rgb(24, 32, 49) !important;
}

.el-select-dropdown,
.el-cascader-menu__list {
  background-color: var(--selectlist) !important;
  border: 1px solid var(--selecthover) !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-cascader-node:hover {
  background-color: var(--selecthover);
}
.el-select-dropdown__item,
.el-cascader-menu__list {
  color: var(--white);
}
.el-select-dropdown__item.selected {
  color: var(--selected);
}
/* tabs A*/
.el-tabs {
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 5px !important;
}
.el-tabs__content {
  height: calc(100% - 55px) !important;
}
.el-tabs__item {
  color: white !important;
}
.el-tabs__nav-wrap::after {
  content: "";
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #e4e7ed00 !important;
  z-index: 1 !important;
}
.el-tabs__active-bar {
  background-color: var(--yellow) !important;
}
.el-tabs__item.is-active {
  color: var(--yellow) !important;
}

.el-tab-pane {
  width: 100% !important;
  height: 100% !important;
}

.el-tabs__content {
  height: calc(100% - 55px) !important;
}

.el-tabs {
  width: 100% !important;
  height: 100% !important;
}

.el-tabs__item {
  color: var(--white) !important;
}

.el-table {
  background: rgba(5, 12, 30, 0) !important;
}

.el-table tr {
  background: rgba(255, 255, 255, 0.05) !important;
}

.el-table th {
  background: rgba(255, 255, 255, 0) !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: black !important;
}

.el-table th .cell {
  color: var(--white) !important;
  text-align: center !important;
}

.el-table td .cell {
  color: var(--white) !important;
  text-align: center !important;
}

.el-table__body-wrapper {
  height: calc(100% - 49px) !important;
  overflow-y: auto !important;
  background: rgba(27, 27, 28, 0) !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(255, 255, 255, 0.05) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: var(--selecthover) !important;
}
/* 分页 A*/
.el-pagination button:disabled {
  background-color: #fdfdfd12 !important;
  color: #999 !important;
}

.el-pagination .btn-next,
.el-pagination .btn-prev {
  background-color: #fdfdfd12 !important;
  color: white !important;
}

.el-pager li {
  background-color: #fdfdfd12 !important;
  color: var(--white) !important;
}

.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
  line-height: 28px !important;
  color: #c1c5cc !important;
}

.el-dialog {
  background: var(--diagiobgc) !important;
  border: 1px solid rgb(102, 177, 255);
}
.el-dialog__title {
  color: var(--diatitle) !important;
}
.el-message-box {
  background: #000000 !important;
  border: 1px solid rgb(102, 177, 255);
}
.el-message-box__title {
  color: aqua !important;
}
.el-message-box__content {
  color: white !important;
}
/* 多选 A*/

.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #878788 !important;
  cursor: not-allowed !important;
}

.el-textarea__inner {
  background-color: var(--tablethead);
  color: white !important;
  border: 1px solid rgb(4, 51, 52) !important;
}
/* textarea 样式B */
/* 新烽查询系统单独样式 A */
#NFSNo2 .el-table__header tr,
#NFSNo2 .el-table__header th {
  padding: 0 !important;
  height: 40px !important;
}
#NFSNo2 .el-table__body tr,
#NFSNo2 .el-table__body td {
  padding: 0 !important;
  height: 40px !important;
}
#NFSNo2 .el-table__body-wrapper {
  height: calc(100% - 69px) !important;
  overflow-y: auto !important;
  background: rgba(27, 27, 28, 0) !important;
}
/* 新烽查询系统单独样式 B */

/* 删除弹窗 */
.el-message-box {
  background: #000000 !important;
  border: 1px solid rgb(102, 177, 255);
}

/* 菜单 */
.el-menu {
  border-right: 0px solid #e6e6e6 !important;
}

.el-tree {
  background: rgba(225, 225, 225, 0);
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #042d3c;
}
</style>