<script setup>
import {computed, ref} from "vue";
import {useQuasar} from "quasar";
import dayjs from "dayjs";
import termUtils from "app/src/utils/term";
import courseScheduleApi from "app/src/api/course/course_schedule";
import {useRoute} from "vue-router";
import AdminTimeSelectView from "pages/admin/schedule/AdminTimeSelectView.vue";

const route = useRoute()

const open = defineModel("open")

const courseId = defineModel("courseId")

/**
 *
 * @type {import('vue').Ref<{
 *    id: number,
 *    startWeek: number,
 *    weekday: number,
 *    course: number,
 *    term: string,
 *    section: number,
 *    endWeek: number,
 *    place: string
 * }>}
 */
const courseScheduleEditForm = defineModel("data")

const func = defineEmits([
  'onClose', 'onOk'
])

const weekRange = ref({
  min: 1,
  max: 17
})

const quasar = useQuasar()

const terms = []

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

generateTerm()

const sections = [
  {label: '第一大节(1~2)', value: 0},
  {label: '第二大节(3~4)', value: 1},
  {label: '第三大节(5~6)', value: 2},
  {label: '第四大节(7~7)', value: 3},
  {label: '第五大节(9~10)', value: 4},
  {label: '第六大节(11~12)', value: 5},
]

const weekdays = [
  {label: '星期一', value: 1},
  {label: '星期二', value: 2},
  {label: '星期三', value: 3},
  {label: '星期四', value: 4},
  {label: '星期五', value: 5},
  {label: '星期六', value: 6},
  {label: '星期日', value: 7},
]

const timeSelectPaneState = ref(false)

function openTimeSelectPane() {
  timeSelectPaneState.value = true
}

const screenWidth = ref(document.body.clientWidth)
window.onresize = () => screenWidth.value = document.body.clientWidth

async function updateClassAction() {
  const dialog = quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    message: '与服务器通信中...',
    progress: true,
    persistent: true,
    ok: false
  })

  try {
    const data = {
      startWeek: weekRange.value.min,
      endWeek: weekRange.value.max,
      term: courseScheduleEditForm.value.term,
      section: courseScheduleEditForm.value.section,
      weekday: courseScheduleEditForm.value.weekday,
      place: courseScheduleEditForm.value.place,
    }

    await courseScheduleApi.update(courseScheduleEditForm.value.id, data)

    dialog.hide()
    open.value = false
    func('onOk')

  } catch (e) {
    dialog.update({
      title: '啊哈？',
      message: e.message,
      progress: false,
      ok: true
    })
  }
}

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="class-dialog px-2 flex flex-col justify-between">

      <div>
        <div class="sticky top-0 bg-white z-10">
          <q-card-section>
            <div class="text-h6">查看/修改课程</div>
          </q-card-section>
          <q-separator/>
        </div>

        <q-card-section class="scroll flex-grow">
          <div class="flex flex-col gap-4 text-base">
            <span class="text-base">在这里可以查看/修改课程信息</span>
            <div class="flex flex-row gap-4">
              <q-input class="text-base flex-grow" outlined v-model="courseScheduleEditForm.place" label="上课地点"/>
            </div>

            <div class="flex flex-row gap-4">
              <q-select class="text-base flex-grow" outlined v-model="courseScheduleEditForm.term" :options="terms"
                        map-options emit-value label="学期"/>
              <q-select class="text-base flex-grow" outlined v-model="courseScheduleEditForm.section"
                        :options="sections"
                        map-options emit-value label="节次"/>
              <q-select class="text-base flex-grow" outlined v-model="courseScheduleEditForm.weekday"
                        :options="weekdays"
                        map-options emit-value label="星期"/>
              <q-btn class="text-base max-sm:w-full" outline color="primary" @click="openTimeSelectPane"
                     label="快速选择时间"/>
            </div>

            <div class="flex flex-row">
              <span>课堂周次：{{ weekRange.min }}-{{ weekRange.max }}</span>
              <q-range v-model="weekRange" :min="1" :max="25" label :marker-labels="screenWidth > 1100"/>
            </div>

          </div>
        </q-card-section>
      </div>

      <div class="sticky bottom-0 bg-white z-10">
        <q-separator/>
        <q-card-actions align="right">
          <slot name="actions"></slot>

          <q-btn flat v-close-popup>算了</q-btn>
          <q-btn flat @click="updateClassAction">好的</q-btn>
        </q-card-actions>
      </div>

    </q-card>
  </q-dialog>

  <AdminTimeSelectView v-model:open="timeSelectPaneState" v-model:time="courseScheduleEditForm"/>

</template>

<style scoped lang="sass">
.class-dialog
  min-width: 55vw
  min-height: 45vh
</style>
