<script setup>
import ScheduleSvg from '/icons/schedule.svg'
import ScoreSvg from '/icons/score.svg'

import CourseCard from "pages/student/course/StudentCourseCard.vue";
import courseApi from "app/src/api/course/course";
import {ref} from "vue";
import {useQuasar} from "quasar";
import {useRouter} from "vue-router";
import {useCurrentActivityStore} from "stores/activity";

const quasar = useQuasar()

/**
 *
 * @type {Ref<Array<{
 *             "id": number,
 *             "name": string,
 *             "courseHours": number,
 *             "springTerm": boolean
 *         }>>}
 */
const candidateCourse = ref()

const loading = ref(false)

const activityStore = useCurrentActivityStore()

async function initData() {
  loading.value = true

  try {
    const currentAct = await activityStore.loadCurrentActivity()
    if (currentAct.value) {
      candidateCourse.value = await courseApi.student.getCandidate(currentAct.value.id)
    }
  } catch (e) {
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  }

  loading.value = false
}

initData()

const router = useRouter()

function chooseCourseTimeAction(id) {
  router.replace(`/student/course-selecting/select/${id}`)
}

</script>

<template>
  <div class="flex flex-col gap-8 px-6 pt-1 pb-6">
    <div>
      <h1 class="text-3xl mb-1">规则说明</h1>
      <div>
        <p class="my-2">
          这里列出的是你所在的专业和年级目前待选的课程，与平常的选课不同的是，这里的所有课程都需要选择合适的时间</p>
        <p>换句话说，咱不是来“抢”课的，因为这些<strong>全部都是</strong>要选要上的课，所谓的选课，不过选的是实验的时间罢了 :
          )
        </p>
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div v-if="candidateCourse && candidateCourse.length > 0"
           class="flex flex-row gap-6 justify-start content-start">
        <CourseCard v-for="course in candidateCourse" :key="course" :course-info="course" v-slot="slot">
          <q-btn flat class="cursor-default" @click="chooseCourseTimeAction(slot.courseInfo.id)">
            选个时间吧
          </q-btn>
        </CourseCard>
      </div>
      <div v-else class="flex flex-col">

        <p class="text-xl py-3 px-2 text-white font-bold bg-blue-400 rounded-t-xl">你的回合尚未开始</p>

        <div class="flex flex-col text-base p-2 gap-2  bg-gray-200 rounded-b-xl">
          <div>
            <p>现在还没有适合你的选课活动</p>
            <p>到处逛逛吧</p>
          </div>
          <div class="flex flex-row gap-4">
            <router-link to="/student/course-table">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="去看课表"
                     :icon="'img:' + ScheduleSvg"></q-btn>
            </router-link>
            <router-link to="/student/score">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="去查成绩"
                     :icon="'img:' + ScoreSvg"></q-btn>
            </router-link>
          </div>
        </div>
      </div>
    </transition>

    <q-inner-loading
      :showing="loading"
      label="与服务器通信中..."
      label-class="text-teal"
      label-style="font-size: 1.1em"
      color="gray"
      class="z-10"
    />
  </div>
</template>

<style scoped lang="sass">

.fade-enter-active,
.fade-leave-active
  transition: opacity 0.2s ease

.fade-enter-from,
.fade-leave-to
  opacity: 0

</style>
