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

const open = defineModel("open")

const courseId = defineModel("courseId")

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

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

  try {

    await courseScheduleApi.clone(courseId.value, selectedSourceTerm.value, selectedTargetTerm.value)

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

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

const quasar = useQuasar()

const sourceTerm = ref([])
const targetTerm = ref([])

const selectedSourceTerm = ref('')
const selectedTargetTerm = ref('')

function generateTerm() {
  const now = dayjs()
  const thisYear = now.year()

  const sourceTmp = []
  for (let i = -4; i < 1; i++) {
    const year = thisYear + i
    sourceTmp.push(`${year}-${year + 1}-1`)
    sourceTmp.push(`${year}-${year + 1}-2`)
  }
  sourceTerm.value = sourceTmp

  const targetTmp = []
  for (let i = -1; i < 2; i++) {
    const year = thisYear + i
    targetTmp.push(`${year}-${year + 1}-1`)
    targetTmp.push(`${year}-${year + 1}-2`)
  }
  targetTerm.value = targetTmp

  selectedSourceTerm.value = termUtils.getTermString(now)
  selectedTargetTerm.value = termUtils.getTermString(now.add(1, 'year'))
}

generateTerm()

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

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="class-dialog">

      <div class="sticky top-0 bg-white z-10">
        <q-card-section>
          <div class="text-h6">复制课程安排信息</div>
        </q-card-section>
      </div>

      <q-separator/>

      <q-card-section class="flex-grow">
        <div class="flex flex-col gap-4 text-base">
          <span class="text-base">
            每个学期的课程安排都是不一样的，但是可以通过复制该课程的某个已有学期的课堂，来快速添加课程的安排。<br>
            选择一个学期和目标学期，以进行复制。<br>
            这个过程是在后台进行的，可以通过刷新来获取最新的进展。</span>
          <div class="flex flex-row gap-4 flex-grow items-center">
            <div class="flex flex-col flex-grow">
              <span>源学期</span>
              <q-select class="text-base flex-grow" outlined v-model="selectedSourceTerm" :options="sourceTerm"
                        emit-value/>
            </div>
            <q-icon name="keyboard_double_arrow_right" size="1.5rem" class="mt-4"
                    :class="screenWidth > 410 ? '' : 'hidden'"/>
            <div class="flex flex-col flex-grow">
              <span>新学期</span>
              <q-select class="text-base flex-grow" outlined v-model="selectedTargetTerm" :options="targetTerm"
                        emit-value/>
            </div>
          </div>
        </div>
      </q-card-section>

      <q-separator/>

      <div class="sticky bottom-0 bg-white z-10">
        <q-card-actions align="right">
          <slot name="actions"></slot>
          <q-btn flat v-close-popup>算了</q-btn>
          <q-btn flat @click="clone">好的</q-btn>
        </q-card-actions>
      </div>

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

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