<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const studentMenus = [
  {
    title: '我的大赛',
    href: '/student/contest',
    icon: '/images/game_student_home_icon_1.png'
  },
  {
    title: '理论知识学习',
    href: import.meta.env.VITE_SAAS_LEARN_URL,
    icon: '/images/game_student_home_icon_2.png'
  },
  {
    title: '1+X考试训练',
    href: `${import.meta.env.VITE_X_LEARNING_URL}/exam/exam`,
    icon: '/images/game_student_home_icon_3.png'
  },
  {
    title: '大赛成绩查询',
    href: '/student/contest/score',
    icon: '/images/game_student_home_icon_4.png'
  }
]
const adminMenus = [
  {
    title: '大赛答疑',
    href: '/admin/contest/discuss',
    icon: '/images/game_admin_home_icon_1.png'
  },
  {
    title: '大赛评分',
    href: '/admin/contest/check',
    icon: '/images/game_admin_home_icon_2.png'
  },
  {
    title: '大赛成绩发布',
    href: '/admin/contest/score',
    icon: '/images/game_admin_home_icon_3.png'
  },
  {
    title: '大赛成绩分析',
    href: '/admin/contest/analyze/score',
    icon: '/images/game_admin_home_icon_4.png'
  }
]

const userStore = useUserStore()
const menus = computed(() => {
  return userStore.role?.id === 1 ? studentMenus : adminMenus
})
</script>

<template>
  <div class="card-list">
    <div class="card" v-for="(item, index) in menus" :key="index">
      <div class="icon"><img :src="item.icon" /></div>
      <div class="title">{{ item.title }}</div>
      <div class="button"><a :href="item.href">点击进入</a></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-list {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.card {
  width: 310px;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  .icon {
    width: 246px;
    height: 238px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .title {
    margin: 70px 0 30px;
    font-size: 24px;
    color: #578ef9;
  }
  .button {
    width: 130px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #ffffff;
    background: linear-gradient(297deg, #83f0eb 0%, #5584f9 100%);
    text-align: center;
    border-radius: 25px;
    a {
      display: block;
    }
  }
}
</style>
