<template>
  <view class="grid grid-cols-4 grid-rows-2 items-center gap-2 mt-[48rpx] px-[36rpx]">
    <view
      v-for="item in subMenus"
      :key="item.id"
      class="flex items-center justify-center flex-col"
      @click="goPath(item.path)"
    >
      <image :src="item.icon" class="w-[88rpx] h-[88rpx]" mode="widthFix"></image>
      <view class="text-[22rpx] text-[#303030] mt-[8rpx]">{{ item.name }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const subMenus = [
  {
    id: 1,
    name: '找大学',
    path: '/pages-sub/home/college/index',
    icon: '/static/images/home/college.svg',
  },
  {
    id: 2,
    name: '查专业',
    path: '/pages-sub/home/major/index',
    icon: '/static/images/home/major.svg',
  },
  // 看职业
  {
    id: 3,
    name: '看职业',
    path: '/pages-sub/home/career/index',
    icon: '/static/images/home/career.svg',
  },
  // 批次线
  {
    id: 4,
    name: '批次线',
    path: '/pages-sub/home/line/index',
    icon: '/static/images/home/line.svg',
  },
  // 查位次
  {
    id: 5,
    name: '查位次',
    path: '/pages-sub/home/rank/index',
    icon: '/static/images/home/rank.svg',
  },
  // 查扩缩招
  {
    id: 6,
    name: '查扩缩招',
    path: '/pages-sub/home/expand/index',
    icon: '/static/images/home/expand.svg',
  },
  // 专业测评
  {
    id: 7,
    name: '专业测评',
    path: '/pages-sub/home/evaluation/index',
    icon: '/static/images/home/evaluation.svg',
  },
  // 大学甄别
  {
    id: 8,
    name: '大学甄别',
    path: '/pages-sub/home/distinguish/index',
    icon: '/static/images/home/distinguish.svg',
  },
]

const goPath = (path: string) => {
  uni.navigateTo({
    url: path,
  })
}
</script>
