<template>
  <div class="header flex items-center justify-between">
    <div class="left flex items-center">
      <img
        class="logo mr-[10px] cursor-pointer"
        src="@/assets/img/logo.png"
        alt="LOGO"
        @click="handleGoHome"
      />
      <h1 class="title cursor-pointer" @click="handleGoHome">
        {{ sysName ? sysName : systemName }}
      </h1>
      <HeaderSite class="ml-10"></HeaderSite>
    </div>
    <!-- 导航 -->
    <el-menu
      :default-active="activeMenu"
      mode="horizontal"
      router
      text-color="rgba(254, 254, 254, 0.65)"
      background-color="#0000"
    >
      <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>
    <div class="flex gap-5">
      <div class="page-home" @click="handleGoHome">首页</div>
      <!-- 返回门户 -->
      <a class="back-btn" :href="portal + (path ? path : '')"> 返回门户 </a>
    </div>
  </div>
</template>

<script>
import HeaderSite from "./HeaderSite.vue";
import { mapState } from "vuex";
export default {
  components: {
    HeaderSite,
  },
  data() {
    return {
      systemName: process.env.VUE_APP_sysName,
      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("user", ["menus", "sysName", "sysLogo", "path"]),
  },
  created() {
    document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
  },
  methods: {
    handleGoHome() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 72px;
  width: 100%;
  padding: 0px 24px;
  background-color: var(--primary);
  color: #fff;
  flex-shrink: 0;
  font-family: Source Han Sans CN;
  .left {
    height: 100%;
  }

  .logo {
    height: 32px;
    object-fit: contain;
  }
  .title {
    // font-weight: bold;
    font-size: 22px;
    letter-spacing: 2px;
  }
  .page-home {
    font-size: 16px;
    width: 86px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .back-btn {
    color: #fff;
    font-size: 16px;
    width: 106px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
:deep(.el-menu) {
  height: 100% !important;
  border: none !important;

  .el-menu-item {
    height: 100%;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    border: none !important;
    letter-spacing: 1px;
    i {
      color: #fff;
    }
    &:hover {
      background: #0000 !important;
      &::after {
        content: "";
        display: inline-block;
        height: 4px;
        width: 30%;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .is-active {
    color: #fff !important;
    background: #0000 !important;
    font-weight: 600;
    &::after {
      content: "";
      display: inline-block;
      height: 4px;
      width: 30%;
      background: #ffffff;
      border-radius: 2px;
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>