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

const open = defineModel('open')

/**
 *
 * @type {ModelRef<{id: number,
 * name: string,
 * course: string,
 * startWeek: number,
 * endWeek: number,
 * time: number,
 * weekday: number,
 * academicTerm: string,
 * place: string,
 * ratio: number,
 * distribution: any,
 * teachers: {
 *     id: string,
 *     name: string,
 *     createTime: string,
 *     editTime: string,
 *     deleted: boolean
 *   }[]}>}
 */
const courseSchedule = defineModel('courseSchedule')

const course = ref({})

const quasar = useQuasar()

const selected = ref(false)

const courseTeachers = ref([])

async function init(schedule) {
  courseSchedule.value = schedule
  try {
    const [scheduleSelected, courseInfo, courseTeacherList] = await Promise.all([
      courseApi.student.checkSelected(schedule.id),
      courseApi.getInfo(schedule.course),
      courseTeacherApi.list(schedule.course)
    ])

    selected.value = scheduleSelected;
    course.value = courseInfo;
    courseTeachers.value = courseTeacherList;
  } catch (e) {
    console.warn(e)
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })

    throw e
  }
}

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

function action() {
  if (selected.value) {
    func('onDelete', courseSchedule.value)
  } else {
    func('onOk', courseSchedule.value)
  }
}

function getTeacherText(teachers) {
  if (teachers) {
    return teachers.map(teacher => teacher.name).join('，')
  }
  return ''
}

defineExpose({
  init
})

const numbers = {1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日',}

</script>

<template>
  <q-dialog no-shake transition-show="fade" transition-hide="fade" v-model="open">
    <q-card class="dialog-body flex flex-col px-2">
      <q-card-section>
        <div v-if="selected" class="text-h6">这个格子已经选过了</div>
        <div v-else class="text-h6">选择？</div>
      </q-card-section>

      <q-separator/>

      <q-card-section class=" flex-grow">
        <div class="flex flex-col gap-1 text-base">
          <span><strong>课程ID：</strong>&emsp;&emsp;{{ courseSchedule.course }}<br></span>
          <span><strong>课程名称：</strong>&emsp;{{ course?.name }}<br></span>
          <q-separator/>
          <span><strong>课时：</strong>&emsp;&emsp;&emsp;{{ course?.courseHours }}<br></span>
          <span><strong>周次：</strong>&emsp;&emsp;&emsp;{{ courseSchedule.startWeek }}-{{ courseSchedule.endWeek }}周<br></span>
          <span><strong>节次：</strong>&emsp;&emsp;&emsp;第{{ courseSchedule.time + 1 }}大节，星期{{ numbers[courseSchedule.weekday] }}<br></span>
          <span><strong>上课地点：</strong>&emsp;{{ courseSchedule.place }}<br></span>
          <span><strong>上课教师：</strong>&emsp;{{ getTeacherText(courseTeachers) }}<br></span>
          <span><strong>学期：</strong>&emsp;&emsp;&emsp;{{ courseSchedule.academicTerm }}，{{ courseSchedule.springTerm ? '春季期' : '秋季期' }}<br></span>
          <q-separator/>
          <div class="flex flex-col mt-6">
            <span class="text-base">以上就是该课堂安排的信息</span>
            <span class="text-base">确定了吗？</span>
          </div>

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

      <q-separator/>

      <q-card-actions align="right">
        <slot name="actions"></slot>
        <q-btn flat v-close-popup>算了</q-btn>
        <q-btn v-if="selected" flat @click="action" v-close-popup color="red">退了</q-btn>
        <q-btn v-else flat @click="action" v-close-popup>就决定是它了！</q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>

</template>

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