<template>
  <div class="h-full bg-white">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
    <n-drawer v-model:show="importActive" default-width="100%" placement="right" resizable>
      <ImportScores
        :subject-id="subjectId"
        @close-emits="
          () => {
            importActive = false;
          }
        "
      />
    </n-drawer>
    <n-drawer v-model:show="viewActive" default-width="100%" placement="left" resizable>
      <n-drawer-content title="查看科目学员成绩">
        <ScoresView
          :subject-id="subjectId"
          @close-emits="
            () => {
              viewActive = false;
            }
          "
        />
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';
import ScoresView from './component/viewScores.vue';
import ImportScores from './component/importScores.vue';
const importActive = ref<boolean>(false);
const viewActive = ref<boolean>(false);
const subjectId = ref<number>(0);
const context: any = {
  importActiveFunc: (id: number) => {
    subjectId.value = id;
    importActive.value = true;
  },
  viewActiveFunc: (id: number) => {
    subjectId.value = id;
    viewActive.value = true;
  }
};
const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });

onMounted(() => {
  crudExpose.doRefresh();
});
</script>

<style scoped></style>
