<template>
  <div class="header flex aic jcb">
    <div class="left flex aic">
      <img
        class="pointer mr10 logo"
        :src="sysLogo ? sysLogo : require('@/assets/img/logo.png')"
        alt="LOGO"
        @click="handleGoHome"
      />
      <h1 class="title pointer" @click="handleGoHome">
        {{ sysName ? sysName : systemName }}
      </h1>
      <HeaderSite class="mr50 ml20"></HeaderSite>
      <!-- 导航 -->
      <el-menu
        :default-active="activeMenu"
        mode="horizontal"
        router
        text-color="rgba(254, 254, 254, 0.65)"
      >
        <template v-for="v in menus">
          <!-- 有子路由 -->
          <el-submenu
            v-if="!v.hideChildrenInMenu && v.children && v.children.length"
            :key="'a' + v.path"
            :index="v.path"
          >
            <template slot="title">
              <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
              {{ v.meta.title }}
            </template>
            <el-menu-item
              v-for="item in v.children"
              :key="item.path"
              :index="item.path"
            >
              <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
              {{ item.meta && item.meta.title }}
            </el-menu-item>
          </el-submenu>
          <!-- 单个路由 -->
          <el-menu-item v-else :key="v.path" :index="v.path">
            <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
            {{ v.meta.title }}
          </el-menu-item>
        </template>

        <!-- <el-menu-item v-for="v in menus" :key="v.path" :index="v.path">
          <i :class="v.meta.icon"></i>
          {{ v.meta.title }}
        </el-menu-item> -->
      </el-menu>
    </div>
    <!-- 返回门户 -->
    <div class="back-btn">
      <el-tooltip effect="dark" content="返回门户" placement="bottom">
        <a class="pointer" :href="portal + (path ? path : '/')">
          <i class="el-icon-s-home"></i> 返回门户
        </a>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import HeaderSite from "./HeaderSite.vue";
import { systemName } from "@/config";
import { mapState } from "vuex";
export default {
  components: {
    HeaderSite,
  },
  data() {
    return {
      systemName,
      portal: process.env.VUE_APP_API_portal_URL + "/#",
    };
  },
  computed: {
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    ...mapState(["menus", "sysName", "sysLogo", "path"]),
  },
  created() {},
  methods: {
    handleGoHome() {
      this.$router.push("/basicsset");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 64px;
  width: 100%;
  padding: 0px 24px;
  // background-color: #2681e8;
  background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
  color: #fff;
  flex-shrink: 0;
  .logo {
    height: 32px;
    object-fit: contain;
  }
  .left {
    height: 100%;
  }
  .title {
    max-width: 200px;
    font-size: 18px;
  }
  .back-btn {
    a {
      color: #fff;
      font-size: 14px;
    }
  }
}
/deep/.el-menu {
  height: 100% !important;
  border: none !important;
  background-color: transparent;
  i {
    color: rgba(254, 254, 254, 0.65);
  }
  .el-menu-item {
    height: 100% !important;
    border: none !important;
    display: flex;
    align-items: center;
    color: rgba(254, 254, 254, 0.65);

    &:hover {
      // background-color: transparent !important;
      color: #fff !important;
      background-color: #1890ff !important;
      // border-bottom: 2px solid #fff !important;
    }
  }
}
/deep/.el-submenu {
  height: 100% !important;
  .el-submenu__title {
    height: 100% !important;
    display: flex;
    align-items: center;
    color: rgba(254, 254, 254, 0.65) !important;
    border: none !important;
    &:hover {
      // background-color: transparent !important;
      color: #fff !important;
      background-color: #1890ff !important;
      // border-bottom: 2px solid #fff !important;
    }
  }
}
.el-menu--horizontal .el-menu .el-menu-item {
  color: #909399;
  &:hover {
    i {
      color: #1890ff;
    }
    color: #1890ff;
  }
}

.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #1890ff !important;
}
/deep/.is-active {
  // border-bottom: 2px solid #fff !important;
  color: #fff !important;
  // background-color: transparent !important;
  background-color: #1890ff !important;
  .el-submenu__title {
    border: none !important;
    color: #fff !important;
    // background-color: transparent !important;
    background-color: #1890ff !important;
  }
}
</style>
