<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
      @select="selectMenu"
    >
      <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, mapActions } from "vuex";
export default {
  components: {
    HeaderSite,
  },
  data() {
    return {
      systemName: process.env.VUE_APP_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("user", ["menus", "sysName", "sysLogo", "path", "menus"]),
  },

  created() {
    document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
  },
  methods: {
    ...mapActions("user", ["setSecondaryRoutes"]),
    selectMenu(index) {
      this.setSecondaryRoutes(index);
    },
    handleGoHome() {
      let path = this.menus[0].path;
      this.$router.push(path);
    },
  },
};
</script>
<style lang="less">
.el-menu--popup {
  .el-menu-item {
    display: flex;
    align-items: center;
    &:hover {
      color: var(--primary) !important;
      i {
        color: var(--primary);
      }
    }
  }
  .is-active {
    color: var(--primary) !important;
  }
}
</style>
<style lang="less" scoped>
@text-color: #fefefea5;

.mixins(@l,@t) {
  content: "";
  display: inline-block;
  height: 4px;
  width: 30%;
  background: #ffffff;
  border-radius: 2px;
  position: absolute;
  bottom: 0px;
  left: @l;
  transform: translateX(@t);
}

.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;
  background: #0000;

  .el-menu-item:not(.el-submenu) {
    height: 100%;
    font-size: 16px;
    display: flex;
    align-items: center;
    border: none !important;
    letter-spacing: 1px;
    color: @text-color;
    i {
      // color: #fff;
      color: @text-color;
    }
    &:hover {
      background: #0000 !important;
      color: @text-color !important;
      &::after {
        .mixins(50%,-50%);
      }
    }
  }
  .el-submenu {
    height: 100%;
    font-size: 16px;

    .el-submenu__title {
      height: 100%;
      display: flex;
      font-size: 16px;
      align-items: center;
      border: none !important;
      color: @text-color;
      &:hover {
        background: #0000 !important;
        color: #fff !important;
        &::after {
          .mixins(calc(50% - 20px),-(50% - 20px));
        }
      }
    }
    .el-submenu__icon-arrow {
      color: @text-color;
    }
  }
  .is-active:not(.el-submenu),
  .is-active .el-submenu__title {
    color: #fff !important;
    background: #0000 !important;
    font-weight: 600;
    i {
      color: #fff;
    }
    &::after {
      .mixins(50%,-50%);
    }
  }
  .is-active .el-submenu__title {
    &::after {
      left: calc(50% - 20px);
      transform: translateX(-(50% - 20px));
    }
  }
}
</style>
