<template>
  <div class="h-full bg-white">
    <fs-crud ref="crudRef" v-bind="crudBinding" />

    <n-drawer v-model:show="importActive" default-width="40%" placement="right" resizable>
      <n-drawer-content title="导入科目学员成绩">
        <n-space> 当前上传操作用于处理 批量导入 学员成绩分数功能 </n-space>
        <n-upload
          class="flex-col-center"
          style="margin-top: 30%"
          multiple
          directory-dnd
          action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
          :max="1"
        >
          <n-upload-dragger>
            <div>
              <svg-icon icon="material-symbols:upload" class="w-30 h-30" style="margin: 0 auto" />
            </div>
            <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
            <n-p depth="3" style="margin: 8px 0 0 0">
              请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码 上传成功后, 后台会自动解析
              学员的成绩分数, 并录入成绩库
            </n-p>
          </n-upload-dragger>
        </n-upload>
      </n-drawer-content>
    </n-drawer>

    <n-drawer v-model:show="viewActive" default-width="50%" placement="left" resizable>
      <n-drawer-content title="查看科目学员成绩">
        <ScoresView :subject-id="subjectId" />
      </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/index.vue';
const importActive = ref<boolean>(false);
const viewActive = ref<boolean>(false);
const subjectId = ref<number>(0);
const context: any = {
  importActiveFunc: (id: number) => {
    if (id > 0) {
      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>
./component/scoreCrud
