<script setup>
import MenuIcons from './menuIcons.vue'

const menuGroups = [
  {
    label: '项目合作',
    items: [
      {
        name: '人工智能应用<br/>实践通识课',
        iconName: 'ai',
        path: '/ai',
      },
      {
        name: '新商科综合实践<br/>教学平台',
        iconName: 'business',
        path: '/platform',
      },
      {
        name: '新工科综合实践<br/>教学平台',
        iconName: 'engineering',
        path: '/platform',
      },
      {
        name: '数智经济<br/>产教融合基地',
        iconName: 'economy',
        path: '/solution/base',
      },
      {
        name: '数字教材',
        iconName: 'textbook',
        path: '/book',
      },
      {
        name: '技能大赛',
        iconName: 'competition',
        path: '/competition',
      },
    ],
  },
  {
    label: '报考我们',
    items: [
      {
        name: '国际留学项目',
        iconName: 'study_abroad',
        path: '/studyAbroad',
      },
      {
        name: '国际学位项目',
        iconName: 'degree',
        path: '/internationalDegree',
      },
      {
        name: '职业证书',
        iconName: 'certificate',
        path: '/certificate',
      },
      {
        name: '就业服务',
        iconName: 'career',
        path: '/job',
      },
      {
        name: '更多',
        iconName: 'more',
        path: '/',
      },
    ],
  },
]
</script>

<template>
  <div class="app-menu">
    <div class="menu-inner">
      <div v-for="group in menuGroups" :key="group.label" class="menu-row">
        <div class="menu-label">
          <span>{{ group.label }}</span>
          <span class="arrow">▶</span>
        </div>
        <div class="menu-items">
          <div class="menu-item" v-for="item in group.items" :key="item.name">
            <NuxtLink :to="item.path" target="_blank" class="menu-item-link">
              <div class="menu-icon">
                <MenuIcons :name="item.iconName" />
              </div>
              <span class="menu-name" v-html="item.name"></span>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.app-menu {
  position: relative;
  max-width: 1200px;
  margin: -100px auto 0;
  background: #fff;
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  z-index: 100;
}

.menu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.menu-row {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.menu-row + .menu-row {
  border-top: 1px solid var(--main-color);
}

.menu-label {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: bold;
}

.menu-label .arrow {
  font-size: 10px;
  color: var(--main-color);
}

.menu-items {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex: 1;
}

.menu-item {
  position: relative;
}

.menu-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  color: var(--main-color);
  transition: transform 0.3s;
  position: relative;
  width: 160px;
  height: 120px;
}

.menu-item:hover {
  .menu-item-link {
    background: var(--main-color);
    color: #fff;
    box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
  }
  .menu-icon {
    color: #fff;
  }
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 7px;
    background: #aa1941;
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
  }
}

.menu-row:first-child {
  .menu-item:hover {
    .menu-item-link {
      transform: translateY(-20px);
    }
    &::after {
      bottom: -4px;
    }
  }
}

.menu-row:last-child {
  .menu-item:hover {
    .menu-item-link {
      transform: translateY(20px);
    }

    &::after {
      top: -4px;
    }
  }
}

.menu-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #6c6c6c;
}

.menu-name {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
}
</style>
