<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="computingResource">
              <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-sub-menu index="industryApplications">
              <template #title>行业应用</template>
              <el-sub-menu v-for="item in industryMenuData" :index="'one'+item.value">
                <template #title>{{ item.name }}</template>
                <el-sub-menu v-for="twoLevel in item.child" :index="item.name+'twoLevel'+twoLevel.value">
                  <template #title>{{ twoLevel.name }}</template>
                  <el-menu-item
                      v-for="threeLevel in twoLevel.child"
                      :index="'/industryApplications/detail?id=' + threeLevel.id">
                    <div style="width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                      {{ threeLevel.titleIndustry }}
                    </div>
                  </el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </el-sub-menu>
            <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 flex-align-center">
          <router-link v-if="userStore.id" to="/console/overview" class="console">控制台</router-link>

          <el-dropdown v-if="userStore.id" @command="handleCommand" class="">
            <div v-if="userStore.id" class="avatar-wrapper flex-align-center">
              <img :src="userStore.avatar" class="user-avatar"/>
              <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>
    <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'
import { industryMenu } from '@/api/industry.js'
import useUserStore from '@/store/modules/user.js'
import { ElMessageBox } from 'element-plus'

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

const computilityMenuData = ref([])
const industryMenuData = ref([])

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

function getIndustryMenu () {
  industryMenu().then(res => {
    industryMenuData.value = res.data
  })
}

getComputilityMenu()
getIndustryMenu()

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;
  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: 500;
      font-size: 16px;
      color: #4e5051;
    }
  }

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

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

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

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