<script setup>

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

const courseListColumns = [
  {name: 'name', align: 'left', label: '课程', sortable: true},
  {name: 'courseHours', align: 'left', label: '课时', field: 'courseHours', sortable: true},
  {name: 'examRatio', align: 'left', label: '考试成绩占比', field: 'examRatio', sortable: true},
  {name: 'term', align: 'left', label: '春/秋学期', field: 'springTerm', sortable: true},
  {name: 'edit', align: 'left', label: '操作', field: 'edit'}
]

const filter = ref('')

const loading = ref(false)

const quasar = useQuasar()

const courseList = ref([])

async function loadCourse() {
  loading.value = true

  try {
    courseList.value = await courseApi.teacher.getCourseForTeacher()
  } catch (e) {
    console.warn(e)
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  }

  loading.value = false
}

loadCourse()
</script>

<template>
  <div class="flex flex-col gap-8 px-6 pt-1 pb-6 max-w-full">
    <div>
      <h1 class="text-3xl mb-1">成绩</h1>
      <p>选择相应的课程，查看和修改成绩信息</p>
    </div>

    <div class="flex flex-col gap-6 max-w-full">
      <q-table :loading="loading" :filter="filter" :columns="courseListColumns" :rows="courseList"
               class="table-teacher max-w-full">
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="name" :props="props">
              <span class="break-all whitespace-normal">{{ props.row.name }}</span>
            </q-td>
            <q-td key="courseHours" :props="props">{{ props.row.courseHours }}</q-td>
            <q-td key="examRatio" :props="props">{{ props.row.examRatio }}</q-td>
            <q-td key="term" :props="props" :class="props.row.springTerm === true ? 'text-green' : 'text-amber-700'">
              {{ props.row.springTerm === true ? '春季期' : '秋季期' }}
            </q-td>

            <q-td key="edit" :props="props">
              <router-link :to="`/teacher/score/view/${props.row.id}`">
                <q-btn outline class="flex-grow w-full">查看</q-btn>
              </router-link>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>

    <q-inner-loading
      :showing="loading"
      label="与服务器通信中..."
      label-class="text-teal"
      label-style="font-size: 1.1em"
      color="gray"
      class="z-10"
    />
  </div>
</template>

<style lang="sass">
.table-teacher
  transition: all 0.2s linear 0.2s

  th, td
    font-size: 1rem !important

  th
    font-weight: bold

  tr th
    background-color: white

  thead tr:first-child th:first-child
    background-color: white

  tbody tr:nth-child(odd)
    background-color: rgb(248, 248, 248)

  tbody tr:nth-child(even)
    background-color: white

  th:first-child,
  td:first-child
    position: sticky
    left: 0
    z-index: 1

  th:first-child
    z-index: 3 !important

  thead tr th
    position: sticky
    z-index: 2

  thead tr:first-child th
    top: 0
</style>

<style scoped lang="sass">

</style>
