<script setup>

import {computed, ref, watch} from "vue";
import dayjs from "dayjs";
import majorManager from "app/src/api/major/major";
import {useQuasar} from "quasar";
import studentManager from "app/src/api/student/student";
import {useMajorsStore} from "stores/majors";

const open = defineModel('open')

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

const studentInfoRef = ref({
  studentNumber: undefined,
  name: undefined,
  major: undefined,
  grade: undefined
})

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

  try {
    await studentManager.add(studentInfoRef.value);
    dialog.hide();
    func('onOk')
  } catch (e) {
    dialog.update({
      title: '啊哈？',
      message: e.message,
      progress: false,
      ok: true
    });
  }

  func('onClose')
}

const quasar = useQuasar()

function addMajorAction() {
  quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    title: '添加专业',
    message: '输入专业名称<br>需要注意的是，此处的专业名称必须与<strong>教务处学生信息</strong>中显示的专业名称完全一致，否则学生专业可能会匹配不上',
    prompt: {
      model: '',
      type: 'text' // optional
    },
    cancel: true,
    persistent: true,
    html: true,
  })
    .onOk(addMajor)
}

const majorsStore = useMajorsStore()

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

  try {
    await majorManager.add(majorName);
    await majorsStore.refreshMajors();
  } catch (e) {
    dialog.update({ title: '啊哈？', message: e });
  } finally {
    dialog.hide();
  }
}

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="activity-dialog">
      <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>
          <div class="flex flex-row gap-4">
            <q-input v-model="studentInfoRef.studentNumber" class="text-base" outlined label="学号"/>
            <q-input v-model="studentInfoRef.name" class="text-base" outlined label="姓名"/>
          </div>
          <q-select class="text-base flex-grow min-w-fit" outlined v-model="studentInfoRef.major"
                    :options="majorsStore.majors" map-options emit-value label="专业"
                    :option-value="option => option.id" :option-label="option => option.name"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  啥都没有哦(′д｀ )<br>
                  （可以在左下角添加专业）
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-card-section>

      <div class="sticky bottom-0 bg-white z-10">
        <q-separator/>
        <q-card-actions align="right">
          <slot name="actions"></slot>
          <div class="flex flex-row justify-between w-full">
            <q-btn flat @click="addMajorAction" color="primary">添加专业</q-btn>
            <div>
              <q-btn flat v-close-popup>算了</q-btn>
              <q-btn flat @click="addStudentAction" v-close-popup>好的</q-btn>
            </div>
          </div>
        </q-card-actions>
      </div>

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

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