<template>
  <div class="app-wrapper">
    <div class="nav-bar">
      <div class="nav-bar-content">
        <div class="logo flex-align-center" @click="$router.push('/index')">
          <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
          <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
          <span class="logo-text">先进公共服务平台</span>
        </div>

        <div class="menu">
          <el-menu
              :default-active="activeMenu"
              mode="horizontal"
              style="--el-menu-horizontal-height:48px"
              @select="menuSelect">
            <el-sub-menu index="1">
              <template #title>计算资源</template>
              <el-menu-item
                  v-for="item in computilityMenuData"
                  :index="'/computingResource/resourceList?type='+item.value">
                {{ item.name }}
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/industryApplications/detail">行业应用</el-menu-item>
            <el-menu-item index="/componentServices/componentServicesList">组件服务</el-menu-item>
            <el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item>
          </el-menu>
        </div>

        <div class="right-menu">
          <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
        </div>
      </div>
    </div>
    <app-main/>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppMain from '@/layout/components/AppMain.vue'
import { computilityMenu } from '@/api/computingResource.js'

const route = useRoute()
const router = useRouter()

const activeMenu = computed(() => {
  const {meta, path, fullPath} = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  const titleList = ['计算资源']
  return titleList.includes(meta.title) ? fullPath : path
})

function menuSelect (val) {
  router.push(val)
}

const computilityMenuData = ref([])

function getComputilityMenu () {
  computilityMenu().then(res => {
    computilityMenuData.value = res.data
  })
}

getComputilityMenu()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.nav-bar {
  border-bottom: 2px solid #ECECEB;
  background-color: #ffffff;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;

  .nav-bar-content {
    width: 1280px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
  }

  .logo {
    cursor: pointer;

    .nscc {
      height: 46px;
    }

    img {
      margin-right: 20px;
      height: 50px;
    }

    .logo-text {
      font-family: YouSheBiaoTiHei, system-ui;
      font-weight: 400;
      font-size: 24px;
      color: #2E77E3;
    }
  }


  .menu {
    width: 600px;
    flex: 1;
    margin-left: 72px;
  }

  :deep(.el-menu) {
    border-bottom: none;

    .el-sub-menu, .el-menu-item {
      &.is-active {
        font-weight: bold;
      }
    }

    .el-sub-menu__title, .el-menu-item {
      font-weight: 400;
      font-size: 16px;
      color: #626566;
    }
  }

  .el-button {
    height: 38px;
    border-radius: 2px;
    font-size: 14px;
  }
}

.app-main {
  padding-top: 64px;
  height: 100%;
  //height: calc(100vh - 64px);
  overflow-y: auto;
}
</style>
