<script setup>

import {useQuasar} from "quasar";

const props = defineProps({
  scheduleInfo: {
    type: Object,
    default() {
      return {
        id: "",
        name: "",
        course: "",
        startWeek: 0,
        endWeek: 0,
        time: 0,
        weekday: 0,
        academicTerm: "",
        place: "",
        ratio: 0
      }
    }
  }
})

const func = defineEmits([])

const quasar = useQuasar()

function showCourseDetail() {
  quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    title: props.scheduleInfo.name,
    html: true,
    message: `
          <table>
            <tr><td>课程ID：</td><td>${props.scheduleInfo.courseId}</td></tr>
            <tr><td>课堂ID：</td><td>${props.scheduleInfo.scheduleId}</td></tr>
            <tr><td>课程名称：</td><td>${props.scheduleInfo.courseName}</td></tr>
            <tr><td>课时：</td><td>${props.scheduleInfo.courseHours}</td></tr>
            <tr><td>周次：</td><td>${props.scheduleInfo.startWeek}-${props.scheduleInfo.endWeek}周</td></tr>
            <tr><td>时间：</td><td>第${props.scheduleInfo.time + 1}大节，星期${numbers[props.scheduleInfo.weekday]}</td></tr>
            <tr><td>上课地点：</td><td>${props.scheduleInfo.place}</td></tr>
            <tr><td>学期：</td><td>${props.scheduleInfo.academicTerm}，${props.scheduleInfo.springTerm ? '春季期' : '秋季期'}</td></tr>
            <tr><td>考试成绩占比：</td><td>${props.scheduleInfo.examRatio}</td></tr>
          </table>
        `,
  })
}

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

</script>

<template>
  <q-card class="dont-cover text-white p-1 flex-grow"
          :class="props.scheduleInfo.springTerm ? 'bg-teal-500' : 'bg-orange-400'">
    <div class="cursor-pointer" @click="showCourseDetail">
      <q-card-section class="card-title dont-cover flex flex-col gap-2">
        <p class="course-name-text text-2xl sm:text-3xl text-weight-bold">{{ props.scheduleInfo.courseName }}</p>
        <p>星期{{ numbers[props.scheduleInfo.weekday] }}，第{{ props.scheduleInfo.time + 1 }}大节</p>
      </q-card-section>
      <q-card-section>
        <p>{{ props.scheduleInfo.academicTerm }}学期，{{ props.scheduleInfo.startWeek }} - {{
            props.scheduleInfo.endWeek
          }}周</p>
      </q-card-section>
    </div>

    <q-separator dark/>

    <q-card-actions vertical class="dont-cover">
      <q-btn flat class="cursor-default" @click="showCourseDetail">查看信息</q-btn>
      <slot :scheduleInfo="props.scheduleInfo"></slot>
    </q-card-actions>
  </q-card>
</template>

<style scoped lang="sass">
.card-title, .course-name-text
  transition: all 0.2s linear 0s

@media not all and (min-width: 400px)
  .course-name-text
    line-height: 2rem
</style>
