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

    <n-drawer v-model:show="active" default-width="80%" placement="left" resizable>
      <n-drawer-content title="在线预览文件">
        <n-watermark
          content="爱扣钉机密文件 禁止外泄!"
          cross
          fullscreen
          :font-size="16"
          :line-height="16"
          :width="384"
          :height="384"
          :x-offset="12"
          :y-offset="60"
          :rotate="-15"
        />
        <ExcelView v-if="fileType === 'XLSX'" :url="fileURL" />
        <WordView v-else-if="fileType === 'DOCX'" :url="fileURL" />
        <ImageView v-else-if="fileType === 'IMAGE'" :url="fileURL" />
        <PdfView v-else-if="fileType === 'PDF'" :url="fileURL" />
        <div v-else :url="fileURL">
          <div class="other-file">
            <h1>当前文件不支持预览, 请下载后查看</h1>
            <n-button type="primary" dashed @click="downloadFiles"> 点击我下载当前文件 </n-button>
          </div>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script setup lang="ts">
import { watch, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { useFs } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';
import ExcelView from './excelView.vue';
import WordView from './wordView.vue';
import ImageView from './imageView.vue';
import PdfView from './pdfView.vue';

const fileURL = ref<string>('');
const fileType = ref<string>('');
const active = ref<boolean>(false);
const message = useMessage();

const props = defineProps({
  studentNumber: {
    type: String,
    default: 'default'
  }
});

const context = {
  message,
  archivesForm: {},
  studentNumber: props.studentNumber,
  viewActiveFunc: (type: string, token: string) => {
    fileURL.value = `http://localhost:3200/proxy-pattern/archive/getFileByToken?archiveToken=${token}`;
    fileType.value = type;
    active.value = true;
  }
};
function downloadFiles() {
  window.location.href = fileURL.value;
}
const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
watch(
  () => props.studentNumber,
  () => {
    context.studentNumber = 'default';
    if (props.studentNumber) {
      context.studentNumber = props.studentNumber;
    }
    crudExpose.doRefresh();
  }
);
</script>
<style scoped lang="scss">
.other-file {
  margin-top: 20%;
  font-size: 30px;
}
</style>
