<template>
  <view class="menu-container">
    <view class="menu-item" v-for="menu in menus" :key="menu.label" @click="navigateTo(menu)">
      <ie-image :is-oss="true" :src="menu.icon" custom-class="w-98 h-110" />
      <view class="text-26 text-fore-title">{{ menu.label }}</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo } = useTransferPage();
type MenuItem = {
  label: string;
  icon: string;
  pageUrl: string;
}
const menus = [
  {
    label: '课程学习',
    icon: '/menu/menu-course.png',
    pageUrl: '/pagesOther/pages/video-center/index/index'
  },
  {
    label: '组卷作业',
    icon: '/menu/menu-exam.png',
    pageUrl: '/pagesStudy/pages/homework/homework'
  },
  {
    label: '收藏夹',
    icon: '/menu/menu-favorite.png',
    // pageUrl: '/pagesOther/pages/personal-center/my-concerned/my-concerned'
    pageUrl: '/pagesOther/pages/topic-center/topic-collection/topic-collection'
  },
  {
    label: '错题本',
    icon: '/menu/menu-mistake.png',
    pageUrl: '/pagesOther/pages/topic-center/wrong-book/wrong-book'
  },
  {
    label: '学习记录',
    icon: '/menu/menu-record.png',
    pageUrl: '/pagesStudy/pages/study-history/study-history'
  }
]
const navigateTo = (menu: MenuItem) => {
  if (menu.label === '错题本') {
    transferTo('/pagesOther/pages/topic-center/wrong-book/wrong-book', {
      data: {}
    });
  } else {
    transferTo(menu.pageUrl);
  }
}
</script>
<style lang="scss" scoped>
.menu-container {
  @apply mx-48 mt-32 flex items-center gap-x-20;
}

.menu-item {
  @apply flex-1 flex flex-col items-center justify-center;
}
</style>