<template>
  <div class="h-full bg-white">
    <n-tabs type="line" class="h-full" animated justify-content="space-evenly">
      <n-tab-pane class="h-full" name="填写表格" tab="填写表格">
        <fs-crud ref="crudRef" v-bind="crudBinding" />
      </n-tab-pane>
      <n-tab-pane name="导入Excel" tab="导入Excel">
        <div style="height: 12vh"></div>
        <n-card style="width: 50%; margin: 0 auto">
          <n-button style="position: relative; top: -4rem; float: right" @click="closeTabs">关闭</n-button>
          <n-space> 当前上传操作用于处理 批量导入 学员成绩分数功能 </n-space>
          <n-space> 上传分数表格前, 请先下载模板表格 填写数据 </n-space>
          <n-space>
            必须使用标准模板导入数据才能被解析,
            <n-button @click="downloadTemplate">点击我下载分数模板表格</n-button>
          </n-space>
          <div style="height: 8vh"></div>
          <n-upload
            class="flex-col-center"
            multiple
            directory-dnd
            :action="uploadFile"
            :max="1"
            @before-upload="beforeUpload"
            @finish="handleFinish"
          >
            <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>
          <div style="height: 8vh"></div>
        </n-card>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import type { UploadFileInfo } from 'naive-ui';
import { useFs } from '@fast-crud/fast-crud';
import importScoresFile from '@/public/分数导入.xlsx';
import { getServiceEnvConfig } from '~/.env-config';
import createCrudOptions from './curd';
const { url, proxyPattern } = getServiceEnvConfig(import.meta.env);
const uploadFile = proxyPattern ? `${proxyPattern}/scores/import` : `${url}/scores/import`;

interface Emits {
  (e: 'closeEmits', value: boolean): void;
}
const emits = defineEmits<Emits>();

const props = defineProps({
  subjectId: {
    type: Number,
    default: 0
  }
});

const context = {
  subjectId: props.subjectId,
  viewActiveCloseFunc: () => {
    emits('closeEmits', true);
  }
};

function closeTabs() {
  emits('closeEmits', true);
}
function handleFinish() {
  emits('closeEmits', true);
  window.$message?.success('上传成功');
}

function beforeUpload(data: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
  if (data.file.file?.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    window.$message?.error('只能上传 Excel 格式的表格文件 请重新上传');
    return false;
  }
  return true;
}

function downloadTemplate() {
  window.location.href = importScoresFile;
}

const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
onMounted(() => {
  crudExpose.doRefresh();
});
</script>
<style scoped lang="scss">
:deep(.n-tabs-pane-wrapper) {
  height: 100%;
}
</style>
