<script setup>
import {useQuasar} from "quasar";
import courseApi from "app/src/api/course/course";
import {ref} from "vue";
import {useRoute} from "vue-router";
import courseScheduleApi from "app/src/api/course/course_schedule";
import StudentCourseSelectingView from "pages/student/course/view/StudentCourseSelectingView.vue";
import {useCurrentActivityStore} from "stores/activity";

const quasar = useQuasar()

const loading = ref(false)

const route = useRoute()

const courseId = route.params.id

const activityStore = useCurrentActivityStore()

const courseTableView = ref()

async function init() {
  if (courseId === undefined || courseId === '') {
    return
  }

  loading.value = true

  try {
    const currentActivity = await activityStore.loadCurrentActivity()
    const classes = await courseScheduleApi.getScheduleForCourse(courseId, currentActivity.value.term)
    courseTableView.value.loadCourse(classes, false)
  } catch (e) {
    console.warn(e)
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  } finally {
    loading.value = false
  }
}

init()

</script>

<template>
  <div class="flex flex-col gap-4 w-full">
    <div class="flex flex-col px-6 pb-2 pt-1">
      <span class="text-3xl mb-1">选择一个合适的时间</span>
      <p>选择一个绿色的卡片以选择课程</p>
    </div>
    <div v-if="courseId !== undefined && courseId !== ''">
      <div class="flex flex-row gap-4 px-4 pb-4">
        <router-link to="/student/course-selecting">
          <q-btn class="text-base" color="primary" outline label="返回待选课程列表"></q-btn>
        </router-link>
        <!--    <q-btn outline class="flex-grow" label="导出到12345"></q-btn>-->
      </div>

      <StudentCourseSelectingView ref="courseTableView" class="max-w-full"></StudentCourseSelectingView>
    </div>

    <div v-else class="flex flex-col gap-6 text-base p-6">
      <div>■ 『哟吼，』<br></div>
      <div>■ 『你不应该看见这些字，不过我相信你应该是不小心误入的吧？』</div>
      <div>■ 『你看起来一脸茫然？』</div>
      <router-link to="/student/course-selecting">
        <q-btn class="text-base w-full" align="left" color="primary" flat icon="arrow_forward"
               label="没事，这就回去"></q-btn>
      </router-link>
    </div>

    <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">


</style>
