<script setup>
import {ref} from "vue";
import scoreApi from "app/src/api/score/score";
import {useQuasar} from "quasar";

const columns = [
  {name: 'courseName', required: true, label: '课程名称', align: 'left'},
  {name: 'term', label: '学期', field: 'term', sortable: true},
  {name: 'usualScore', label: '平时分', field: 'normal', sortable: true},
  {name: 'examScore', label: '考试分', field: 'exam', sortable: true},
  {name: 'ratio', label: '平时/考试占比', field: 'ratio'},
  {name: 'final', label: '最终成绩', field: 'final', sortable: true},
]

const quasar = useQuasar()

const courses = ref([{
  "id": "",
  "courseName": "",
  "scheduleName": "",
  "term": "",
  "schedule": "",
  "ratio": 0,
  "usualScore": 0,
  "examScore": 0
}])

courses.value = []

const filter = ref('')

const loading = ref(false)

async function loadScore() {
  loading.value = true;
  try {
    courses.value = await scoreApi.student.getStudentAllScore();
  } catch (e) {
    console.warn(e);
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    });
  } finally {
    loading.value = false;
  }
}

loadScore()
</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>

    <q-table flat :loading="loading" :filter="filter" :columns="columns" :rows="courses"
             class="student-score-table max-w-full">
      <template v-slot:top>
        <q-input outlined dense debounce="300" color="primary" v-model="filter" placeholder="搜索任意字段">
          <template v-slot:append>
            <q-icon name="search"/>
          </template>
        </q-input>
      </template>

      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="courseName" :props="props">
              <span class="break-all whitespace-normal">
                {{ props.row.courseName }}
              </span>
          </q-td>
          <q-td key="term" :props="props">{{ props.row.term }}</q-td>
          <q-td key="usualScore" :props="props">{{ props.row.usualScore }}</q-td>
          <q-td key="examScore" :props="props">{{ props.row.examScore }}</q-td>
          <q-td key="ratio" :props="props">
            {{ (1 - props.row.examRatio).toFixed(2) }}/{{ props.row.examRatio.toFixed(2) }}
          </q-td>
          <q-td key="final" :props="props">
            {{
              (props.row.usualScore * (1 - props.row.examRatio) + props.row.examScore * props.row.examRatio).toFixed(2)
            }}
          </q-td>

        </q-tr>
      </template>
    </q-table>

    <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">
.student-score-table
  transition: all 0.2s linear 0.2s

  th, td
    font-size: 1rem !important

  th
    font-weight: bold

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child 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

@media not all and (min-width: 400px)
  .student-score-table
    th, td
      font-size: unset !important
</style>
