<script setup>
import {ref} from "vue";
import {useQuasar} from "quasar";
import courseApi from "app/src/api/course/course";

const open = defineModel("open")

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

const courseInfoForm = ref({
  name: '',
  courseHours: 0,
  examRatio: 0.7,
  springTerm: 'true'
})

const quasar = useQuasar()

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

  try {
    const courseInfo = {
      name: courseInfoForm.value.name,
      courseHours: Number(courseInfoForm.value.courseHours),
      examRatio: Number(courseInfoForm.value.examRatio),
      springTerm: courseInfoForm.value.springTerm
    }
    await courseApi.add(courseInfo);
    dialog.hide();
    open.value = false
    func('onOk');
  } catch (e) {
    dialog.update({
      title: '啊哈？',
      message: e.message,
      progress: false,
      ok: true
    });
  }
}

</script>

<template>
  <q-dialog no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="course-dialog 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">
          <div class="flex flex-col gap-4">
            <span class="text-base">在这里可以添加课程信息</span>
            <q-input class="text-base flex-grow" outlined v-model="courseInfoForm.name" label="课程名称"/>
            <div class="flex flex-row max-2xl:flex-col gap-4 flex-grow">
              <q-input class="text-base" outlined v-model="courseInfoForm.courseHours" label="课时"
                       type="number"/>
              <q-input class="text-base" outlined v-model="courseInfoForm.examRatio" label="考试成绩占比（如：0.6）"
                       type="number"/>
              <div class="flex flex-col gap-2">
                <span>课程学期</span>
                <div class="flex flex-row gap-4">
                  <q-radio class="text-base" v-model="courseInfoForm.springTerm" val="true" color="green"
                           label="春季期"/>
                  <q-radio class="text-base" v-model="courseInfoForm.springTerm" val="false" color="amber-700"
                           label="秋季期"/>
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </div>

      <div class="sticky bottom-0 bg-white z-10">
        <q-separator/>
        <q-card-actions class="flex gap-2" align="right">
          <slot name="actions"></slot>
          <q-btn flat class="w-14" v-close-popup>算了</q-btn>
          <q-btn flat class="w-14" color="blue" @click="addCourseAction">好的</q-btn>
        </q-card-actions>
      </div>
    </q-card>
  </q-dialog>
</template>

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