<script setup>
import StudentCourseTableView from "pages/student/schedule/StudentCourseTableView.vue";
import {useQuasar} from "quasar";
import courseApi from "app/src/api/course/course";
import {ref, watch} from "vue";
import dayjs from "dayjs";
import termUtils from 'app/src/utils/term';

const quasar = useQuasar()

const loading = ref(false)

const term = ref('')
const terms = []

function generateTerm() {
  const now = dayjs()
  const thisYear = now.year()
  for (let i = -3; i < 4; i++) {
    const year = thisYear + i
    terms.push(`${year}-${year + 1}-1`)
    terms.push(`${year}-${year + 1}-2`)
  }

  term.value = termUtils.getCurrentTermString()
}

generateTerm()

watch(term, loadCourse)

const courseTableView = ref()

async function loadCourse() {
  loading.value = true;

  try {
    const courses = await courseApi.student.getSelected(term.value);
    courseTableView.value.clear()
    courses.forEach(course => {
      courseTableView.value.addCourse(course, false);
    });
    courseTableView.value.refreshView();

  } catch (e) {
    console.warn(e);
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message,
    });
  }

  loading.value = false;
}

loadCourse()

const filteredWeek = ref(0)
const weekOptions = ref([])
for (let i = 0; i <= 27; i++) {
  weekOptions.value.push(i)
}

function filterCourses() {
  courseTableView.value.filterCourses(filteredWeek.value)
}

watch(filteredWeek, filterCourses)

</script>

<template>
  <div class="flex flex-col gap-4 w-full">
    <div class="flex flex-col justify-center px-6 pb-2 pt-1">
      <span class="text-3xl">课表</span>
    </div>
    <div class="flex flex-row gap-4 px-4">
      <q-select class="text-base flex-grow" outlined v-model="term" :options="terms" @change="loadCourse" label="学期"/>
    </div>

    <q-pagination class="flex-grow flex-center" v-model="filteredWeek" min="0" max="27" max-pages="10" dark
                  direction-links outline/>

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

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