<template>
  <div class="nav-header">
    安防综合管理平台
    <div class="home-nav">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        mode="horizontal"

      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </div>

    <div class="time-menu">
      <time-menu></time-menu>
    </div>
  </div>
</template>

<script>
import SidebarItem from "./SidebarItem2";
import TimeMenu from "@/components/TimeMenu/indexHome.vue";

import { mapGetters } from "vuex";
import variables from "@/styles/variables.scss";

export default {
  name: "navHeader",
  components: {
    SidebarItem,
    TimeMenu
  },

  data() {
    return {};
  },
  computed: {
    ...mapGetters(["sidebar",'addRoutes']),
    routes() {
      // console.log(this.$store.getters.routes)
      return this.$store.getters.routes;
    },

    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },

    variables() {
      return variables;
    },

    isCollapse() {
      return !this.sidebar.opened;
    },
  },
};
</script>
<style  lang="scss">

.home-nav {
  left: 1rem;
  display: inline-block;
  position: absolute;

  .el-menu-item:focus,
  .el-menu-item:hover {
    background: rgba(0, 0, 0, 0);
  }

  .el-submenu__title:hover {
    background: rgba(0, 0, 0, 0);

    span {
      color: rgb(92, 136, 250);
      text-align: center;
    }
  }

  .el-menu.el-menu--horizontal {
    border-bottom: 0;
    background: rgba(0, 0, 0, 0);
    // border:1px solid pink;
    z-index: 1000;
    // line-height:3.5rem;
    line-height: 2.5rem;
    .el-menu-item,
    .el-submenu__title {
      height: 3.5rem;
      line-height: 3.5rem;
      font-size: 1.8rem;
      span {
        color: #fff;
      }
    }
    .el-submenu__title {
      padding: 0 2rem;

      .el-submenu__icon-arrow {
        display: none;
      }
    }
  }
  .el-menu > div {
    display: inline-block;
  }
  .el-menu > div:nth-child(7) {
    // width: calc(100vw / 33);
    margin-left: 33.1vw;
  }
}

.nav-header {
  color: #fff;
  text-align: center;
  font-size: 4rem;
  line-height: 8rem;
  background: url(../../../assets/nav-header-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;


  min-width: 1024px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

}

// 时间菜单插件
.nav-header {
  .time-menu .right-time.date {
    font-size: 1.6rem;
    line-height: 4.5rem;
  }
  .right-sec .right-menu {
    line-height: 4.5rem;
    margin-right: 2rem;
  }
  .right-sec
    .right-menu
    .avatar-container
    .avatar-wrapper
    .el-icon-caret-bottom {
    top: 1.6rem;
  }
  .svg-icon{
    display:none!important;
  }
}

// 时间菜单插件
.nav-header {
  .time-menu .right-time.date {
    font-size: 1.6rem;
    line-height: 4.5rem;
  }
  .right-sec .right-menu {
    line-height: 4.5rem;
  }
  .right-sec
    .right-menu
    .avatar-container
    .avatar-wrapper
    .el-icon-caret-bottom {
    top: 1.6rem;
  }
  .svg-icon{
    display:none!important;
  }
}
</style>


<style lang="scss">
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background: #021132;
  text-align: center;
}
.el-menu--horizontal .el-menu--popup {
  min-width: 12rem !important;
  padding: 0;
  .el-menu-item {
    font-size: 1.7rem;
    // color:#000!important;
  }
  .el-menu-item:hover {
    span {
      color: rgb(92, 136, 250);
    }
  }
}
</style>
