<script setup>

import dayjs from "dayjs";
import {nextTick, ref, watch} from "vue";
import courseApi from "app/src/api/course/course";
import {useQuasar} from "quasar";
import TeacherCourseTableView from "pages/teacher/course/TeacherCourseTableView.vue";
import TeacherCourseCard from "pages/teacher/course/TeacherCourseCard.vue";
import termUtils from "app/src/utils/term";
import courseSelectionApi from "app/src/api/course/course_selection";

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 loading = ref(false)

const quasar = useQuasar()

const scheduleList = ref([])

const courseTableView = ref()

async function loadCourse() {
  loading.value = true

  try {

    scheduleList.value = await courseApi.teacher.getTeacherCourseSchedule(term.value)

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

  loading.value = false
}

loadCourse()

function exportStudentListAction(scheduleInfo) {
  quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    title: '导出学生名单',
    message: `点击确认生成导出『${scheduleInfo.courseName}』的学生名单`,
    cancel: true,
  })
    .onOk(() => exportStudentList(scheduleInfo))
}

async function exportStudentList(scheduleInfo) {
  try {
    await courseSelectionApi.exportStudentExcel(scheduleInfo.courseId, term.value)
  } catch (e) {
    console.warn(e)
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  }
}

const viewType = ref('calendar')
watch(courseTableView, value => {
  if (value === 'calendar') {
    nextTick(() => {
      courseTableView.value?.clear()
      scheduleList.value.forEach(course => courseTableView.value?.addCourse(course, false));
      courseTableView.value?.refreshView();
    })
  }
})

watch(scheduleList, value => {
  if (value) {
    nextTick(() => {
      courseTableView.value?.clear()
      scheduleList.value.forEach(course => courseTableView.value?.addCourse(course, false));
      courseTableView.value?.refreshView();
    })
  }
})

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-2 px-6 pt-1">
    <div>
      <h1 class="text-3xl mb-1">课程课堂列表</h1>
      <p>这里列出的是所教的课程课堂</p>
    </div>
    <q-select class="text-base flex-grow" outlined v-model="term" :options="terms" @change="loadCourse" label="学期"/>
    <div v-if="scheduleList !== undefined && scheduleList.length >= 1"
         class="flex flex-col justify-start content-start">
      <div class="flex flex-row gap-4 mb-2">
        <q-radio class="text-base" v-model="viewType" val="calendar" color="green" label="日历视图"/>
        <q-radio class="text-base" v-model="viewType" val="card" color="amber-700" label="卡片视图"/>
        <q-pagination v-if="viewType === 'calendar'" class="flex-grow" v-model="filteredWeek" min="0"
                      max="27" max-pages="10" dark direction-links outline/>
      </div>

      <transition name="fade" mode="out-in">
        <TeacherCourseTableView v-if="viewType === 'calendar'" ref="courseTableView" class="max-w-full">
          <template v-slot:actions="slot">
            <q-btn flat class="cursor-default" @click="exportStudentListAction(slot.scheduleInfo)">导出学生名单</q-btn>
          </template>
        </TeacherCourseTableView>

        <div v-else class="flex flex-row gap-6 justify-start content-start">
          <TeacherCourseCard v-for="schedule in scheduleList"
                             :key="schedule" :schedule-info="schedule" v-slot="slot">
            <q-btn flat class="cursor-default" @click="exportStudentListAction(slot.scheduleInfo)">导出学生名单</q-btn>
          </TeacherCourseCard>
        </div>
      </transition>
    </div>

    <div v-else class="flex flex-row gap-6 justify-start content-start">
      <span class="text-base">啥都没有哦</span>
    </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">
.fade-enter-active,
.fade-leave-active
  transition: opacity 0.2s ease

.fade-enter-from,
.fade-leave-to
  opacity: 0
</style>
