<script setup>
import {ref} from "vue";
import {useQuasar} from "quasar";
import dayjs from "dayjs";
import studentManager from "app/src/api/student/student";
import AdminStudentAddPane from "pages/admin/student/AdminStudentAddPane.vue";
import AdminCourseAddPane from "pages/admin/course/AdminCourseAddPane.vue";
import AdminStudentImportPane from "pages/admin/student/AdminStudentImportPane.vue";
import TeacherScoreImportPane from "pages/teacher/score/TeacherScoreImportPane.vue";
import majorManager from "app/src/api/major/major";
import {useMajorsStore} from "stores/majors";

const studentListPagination = ref({
  sortBy: 'studentNumber',
  descending: false,
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 10
})

const studentListColumns = [
  {name: 'name', align: 'left', label: '学生', sortable: true},
  {name: 'studentNumber', align: 'left', label: '学号', field: 'studentNumber', sortable: true},
  {name: 'grade', align: 'left', label: '年级', field: 'grade', sortable: true},
  {name: 'major', align: 'left', label: '专业', field: 'major', sortable: true},
  {name: 'edit', align: 'center', label: '操作', field: 'edit'}
]

const studentRows = ref([])

const loading = ref(true)

const quasar = useQuasar()

function refreshStudentList() {
  studentRows.value = []
  studentListPagination.value.page = 1
  studentListPagination.value.rowsPerPage = 10
  refreshStudents({pagination: {page: 1, rowsPerPage: 10}})
}

async function refreshStudents(props) {
  const {page, rowsPerPage} = props.pagination
  loading.value = true

  try {
    const response = await studentManager.list(page, rowsPerPage)
    updateListData(response)
  } catch (e) {
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  } finally {
    loading.value = false
  }
}

const majorsStore = useMajorsStore()

async function refreshData() {
  try {
    // 先拿第一页的数据
    const response = await studentManager.list(1, 10)
    updateListData(response)
  } catch (e) {
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message
    })
  } finally {
    loading.value = false
  }
}

refreshData()

function updateListData(response) {
  studentListPagination.value.page = response.current
  studentListPagination.value.rowsNumber = response.total
  studentListPagination.value.rowsPerPage = response.pageSize

  studentRows.value.splice(0, studentRows.value.length, ...response.result)
}

const studentAddDialogState = ref(false)

async function doDeleteStudent(id) {
  const dialog = quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    message: '与服务器通信中...',
    progress: true,
    persistent: true,
    ok: false
  })

  try {
    await studentManager.deleteStudent(id)
    refreshStudentList()
    dialog.hide()
  } catch (e) {
    dialog.update({
      title: '啊哈？',
      message: e.message,
      progress: false,
      ok: true
    })
  }

  await refreshStudents()
}

function deleteStudentAction(id, name) {
  const dialog = quasar.dialog({
    transitionShow: 'fade',
    transitionHide: 'fade',
    title: '确认？',
    message: '真的要删除"' + name + '"？',
    cancel: true,
  })
    .onCancel(() => dialog.hide())
    .onOk(() => doDeleteStudent(id))
}

const studentImportPaneState = ref(false)

</script>

<template>
  <div class="flex flex-col gap-4 px-6 pt-1 pb-6">
    <div>
      <h1 class="text-3xl mb-1">管理学生</h1>
      <p>在这里可以添加/删除全体学生信息</p>
    </div>

    <div class="flex flex-col gap-1 max-w-full">
      <q-table v-model:pagination="studentListPagination" :loading="loading" @request="refreshStudents"
               :columns="studentListColumns" :rows="studentRows" class="table-admin max-w-full">
        <template v-slot:top>
          <div class="flex flex-row gap-2">
            <q-btn @click="studentAddDialogState = true" color="primary" icon="add" label="添加"/>
            <q-btn @click="studentImportPaneState = true" color="primary" icon="download" label="从Excel文件批量导入"/>
          </div>
          <!--          <q-space/>-->
          <!--          <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="name" :props="props">
              <span class="break-all whitespace-normal">{{ props.row.name }}</span>
            </q-td>
            <q-td key="studentNumber" :props="props">{{ props.row.studentNumber }}</q-td>
            <q-td key="grade" :props="props">{{ props.row.grade }}</q-td>
            <q-td key="major" :props="props">{{ majorsStore.majorNames[props.row.major] }}</q-td>
            <q-td key="edit" :props="props">
              <div class="flex flex-row justify-center gap-4 w-full transition-all">
                <!--                <q-btn @click="console.log('查看课程详情')" outline label="查看/修改" icon="edit"></q-btn>-->
                <q-btn @click="deleteStudentAction(props.row.id, props.row.name)" outline color="red" label="删除"
                       icon="delete"></q-btn>
              </div>
            </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"
    />

    <AdminStudentAddPane v-model:open="studentAddDialogState" @onOk="() => refreshStudentList()"/>

    <AdminStudentImportPane v-model:open="studentImportPaneState" v-model:student-list="studentRows"
                            @on-ok="() => refreshStudentList()"/>
  </div>
</template>

<style lang="sass">
.table-admin
  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
</style>

<style scoped lang="sass">

</style>
