<template>
  <div class="header flex aic jcb">
    <div class="left flex aic">
      <img
        class="pointer mr10"
        width="32"
        src="../../../assets/img/logo.png"
        alt="LOGO"
        @click="handleGoHome"
      />
      <h1 class="title pointer" @click="handleGoHome">样表管理系统</h1>
      <HeaderSite class="mr50 ml20"></HeaderSite>
      <!-- 导航 -->
      <el-menu
        :default-active="activeMenu"
        mode="horizontal"
        router
        text-color="rgba(254, 254, 254, 0.65)"
      >
        <el-menu-item v-for="v in meuns" :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">
          <i class="el-icon-s-home"></i> 返回门户
        </a>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import HeaderSite from "./HeaderSite.vue";
export default {
  components: {
    HeaderSite,
  },
  data() {
    return {
      portal: process.env.VUE_APP_API_portal_URL + "/#/home/siteArrange",
    };
  },
  computed: {
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    meuns() {
      return this.$store.state.menus;
    },
  },
  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;
  .title {
    font-size: 20px;
  }
  .back-btn {
    a {
      color: #fff;
      font-size: 14px;
    }
  }
}
/deep/.el-menu {
  height: 64px !important;
  border: none !important;
  background-color: transparent;
}
/deep/.el-menu-item {
  height: 100% !important;
  border: none !important;
  display: flex;
  align-items: center;
  i {
    color: rgba(254, 254, 254, 0.65);
  }
  &:hover {
    // background-color: transparent !important;
    background-color: #1890ff !important;
    color: #fff !important;
    // border-bottom: 2px solid #fff !important;
  }
}

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