<script setup lang="ts">
import PageMaintenance from '@/components/pages/PageMaintenance.vue'
import SectionDataTable from '@/components/sections/SectionDataTable.vue'
import SectionFormPanel from '@/components/sections/SectionFormPanel.vue'
import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
import { useSingleRecordMaintenancePage } from '@/composables/page-drivers/useSingleRecordMaintenancePage'

const page = useSingleRecordMaintenancePage()
</script>

<template>
  <PageMaintenance
    v-model:search-panel-open="page.searchPanelOpen.value"
    :page="page.pageModel.value"
    @create="page.commands.openAddDialog"
  >
    <template #search-fields>
      <SectionSearchPanel
        v-model="page.search.value"
        :departments="page.departments"
        :grade-options="page.gradeOptions"
        :statuses="page.statuses"
        @reset="page.resetSearch"
      />
    </template>
    <template #table>
      <SectionDataTable
        v-model:current-page="page.currentPage.value"
        :grade-label="page.formState.gradeLabel"
        :headers="page.tableHeaders.value"
        :items="page.students.value"
        :items-per-page="page.itemsPerPage"
        :page-count="page.pageCount.value"
        :page-summary="page.pageSummary.value"
        :row-props="page.formState.rowProps"
        :status-color="page.formState.statusColor"
        @delete="page.flow.requestDeleteConfirmation"
        @edit="page.commands.openEditDialog"
        @view="page.commands.openViewDialog"
      />
    </template>
  </PageMaintenance>

  <SectionFormPanel
    v-bind="page.formPanelProps.value"
    v-on="page.formPanelEvents"
  />

  <v-snackbar v-model="page.snackbarVisible.value" color="success" location="bottom right" :timeout="2200">
    儲存成功
  </v-snackbar>
</template>
