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

const OSS_URL = import.meta.env.VITE_OSS_URL
const { subject } = subjectStore()

const nav = computed(() => [
  {
    name: '章节组卷',
    icon: 'groupPaper_item_chapter',
    url: '/subject/groupPaper/combination/0',
  },
  // 英语/语文 隐藏知识点组卷
  [2, 4, '2', '4'].includes(subject.id)
    ? undefined
    : {
        name: '知识点组卷',
        icon: 'groupPaper_item_knowledge',
        url: '/subject/groupPaper/combination/1',
      },
  {
    name: '历史组卷',
    icon: 'groupPaper_item_history',
    url: '/subject/groupPaper/history',
  },
])
</script>
<template>
  <div class="page">
    <BackBar :leftText="`【${subject.name}】自由组卷`"></BackBar>
    <div class="main">
      <template v-for="i in nav" :key="i?.name">
        <router-link
          v-if="i"
          class="nav-item"
          :style="{
            background: `#fff url(${OSS_URL}/urm/groupPaper_home_item.svg)  100%/cover no-repeat`,
          }"
          :to="i.url"
        >
          <Icon :name="i.icon" size="467"></Icon>
          <span class="nav-name">{{ i.name }}</span>
        </router-link>
      </template>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  position: relative;
  @include main_bg;
  .main {
    padding-top: 4.67vh;
    display: flex;
    justify-content: center;

    .nav-item {
      background-color: #fff;
      width: 576px;
      height: 73.33vh;
      flex-shrink: 0;
      margin-right: 32px;
      border-radius: 5.33vh;
      box-shadow: 0 1.67vh 0.17vh 0 #d4d4d4;
      padding: 5.67vh 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      &:last-child {
        margin-right: 0;
      }
      .nav-name {
        color: $font-color;
        font-family: $font-special;
        font-size: 4vh;
      }
    }
  }
}
</style>
