<script setup>

import {useQuasar} from "quasar";
import {useMajorsStore} from "stores/majors";
import {useUserInfoStore} from "stores/user";

const props = defineProps({
  courseInfo: {
    type: Object,
    default() {
      return {
        id: "test_625a9861d82f",
        name: "编译原理",
        courseHours: 72,
        springTerm: Math.random() >= 0.5
      }
    }
  }
})

const func = defineEmits([])

const quasar = useQuasar()

const userInfoStore = useUserInfoStore()
const majorStore = useMajorsStore()

function showCourseDetail() {
  quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    title: props.courseInfo.name,
    html: true,
    message: `
        <strong>课程ID：</strong>&emsp;&emsp;${props.courseInfo.id}<br>
        <strong>课程名称：</strong>&emsp;${props.courseInfo.name}<br>
        <strong>课时：</strong>&emsp;&emsp;&emsp;${props.courseInfo.courseHours}<br>
        <strong>上课专业：</strong>&emsp;${majorStore.majorNames[userInfoStore.info.details.major]}<br>
        <strong>目标年级：</strong>&emsp;${userInfoStore.info.details.grade}<br>
        <strong>学期：</strong>&emsp;&emsp;&emsp;${props.courseInfo.springTerm ? '春季期' : '秋季期'}<br>
`,
  })
}

</script>

<template>
  <q-card class="dont-cover text-white p-1 flex-grow"
          :class="props.courseInfo.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.courseInfo.name }}</p>
        <p>{{ props.courseInfo.springTerm ? '春季期' : '秋季期' }}课程</p>
      </q-card-section>
      <q-card-section>
        <p>{{ majorStore.majorNames[props.courseInfo.targetMajor] }}</p>
      </q-card-section>
    </div>

    <q-separator dark/>

    <q-card-actions vertical class="dont-cover">
      <q-btn flat @click="showCourseDetail">查看信息</q-btn>
      <slot :courseInfo="props.courseInfo"></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>
