<template>
  <div class="app-wrapper">
    <div class="nav-bar">
      <div class="nav-bar-content custom-main-w">
        <div class="logo flex-align-center" @click="$router.push('/index')">
          <!--          <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">-->
          <img class="nscc" src="@/assets/logo/nscc-logo-copy.png" alt="">
          <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
          <span class="logo-text">面向科创园区的<br/>普惠算力公共服务平台</span>
        </div>

        <div class="flex cell-1">
          <div class="menu">
            <el-menu
                :default-active="activeMenu"
                mode="horizontal"
                style="--el-menu-horizontal-height:48px"
                @select="menuSelect">

              <el-sub-menu index="computingResource">
                <template #title>计算资源</template>
                <el-menu-item
                    v-for="item in computilityMenuData"
                    :index="'/computingResource/resourceList?type='+item.id">
                  {{ item.name }}
                </el-menu-item>
                <el-menu-item :index="'/computingResource/resourceList?type='+999">AI token</el-menu-item>
              </el-sub-menu>

              <el-menu-item index="/industryApplications/index">解决方案</el-menu-item>
              <el-menu-item index="/componentServices/componentServicesList">行业应用</el-menu-item>
              <el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item>

              <!-- 👇 API服务市场放到最后 -->
              <el-menu-item index="/marketplace/ai">API服务市场</el-menu-item>
            </el-menu>

          </div>

          <div class="right-menu flex-align-center">
            <router-link v-if="userStore.token" to="/console/overview" class="console" style="font-size: 18px;">控制台
            </router-link>

            <el-dropdown v-if="userStore.token" @command="handleCommand" class="">
              <div v-if="userStore.token" class="avatar-wrapper flex-align-center">
                <img :src="userStore.avatar || avatar" class="user-avatar" alt=""/>
                <div class="user-name">{{ userStore.name }}</div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

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

<script setup>
import {computed, onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import AppMain from '@/layout/components/AppMain.vue'
import {categoryMenuNew} from '@/api/computingResource.js'
import useUserStore from '@/store/modules/user.js'
import {ElMessageBox} from 'element-plus'

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

const avatar = ref('')

onMounted(() => {
  const storedAvatar = localStorage.getItem("avatar")
  if (storedAvatar) {
    avatar.value = storedAvatar
  }
})

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, indexPath, item) {
  router.push(val)
}

const computilityMenuData = ref([])

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

getComputilityMenu()

function handleCommand(command) {
  switch (command) {
    case 'setLayout':
      // setLayout()
      break
    case 'logout':
      logout()
      break
    default:
      break
  }
}

function logout() {
  ElMessageBox.confirm('确定退出账号吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index'
    })
  }).catch(() => {
  })
}
</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 !important;
  top: 0;
  left: 0;
  width: 100%;

  .nav-bar-content {
    //width: 1280px;
    //width: calc(100% - 226px);
    height: 90px;
    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;
      line-height: 22px;
      color: #2e77e3;
      cursor: pointer;
    }
  }


  .menu {
    flex: 1;         // 占据剩余空间
    margin-left: 72px;
    min-width: 400px; // 保底宽度，避免被压缩到太小
    overflow: visible;
  }

  .right-menu {
    display: flex;
    align-items: center;
    margin-left: auto; // 把右侧挤到最右
  }



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

    .el-sub-menu, .el-menu-item {
      &.is-active {
        font-weight: bolder;
        font-size: 18px !important;
      }
    }

    .el-sub-menu__title, .el-menu-item {
      font-weight: bolder;
      font-size: 18px !important;
      color: #4e5051;
    }
  }

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

  .avatar-wrapper {
    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      margin: 0 10px 0 32px;
    }

    .user-name, .console {
      font-weight: bolder;
      font-size: 18px;
      color: #303233;
    }
  }
}

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