<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, item.isTab)"
    >
      <view class="relative w-[88rpx] h-[88rpx]">
        <image
          class="skeleton w-[88rpx] h-[88rpx] rounded-full absolute"
          :class="{ hidden: item.loaded }"
        ></image>
        <image
          :src="item.icon"
          class="w-[88rpx] h-[88rpx] absolute"
          :class="{ 'opacity-0': !item.loaded }"
          mode="widthFix"
          @load="handleLoad(item)"
        ></image>
      </view>
      <view class="text-[24rpx] text-[#303030] mt-[8rpx]">{{ item.name }}</view>
    </view>
  </view>
</template>

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

const goPath = (path: string, isTab: boolean) => {
  if (isTab) {
    uni.switchTab({
      url: path,
    })
  } else {
    uni.navigateTo({
      url: path,
    })
  }
}

const handleLoad = (item: any) => {
  item.loaded = true
}
</script>

<style>
.skeleton {
  background-color: #e0e0e0; /* 骨架屏的背景色 */
  animation: pulse 1.5s infinite; /* 添加动画效果 */
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
</style>
