<script setup lang="ts">
import { ref } from "vue";
import { read, utils } from "xlsx";

import {
  ElMessage,
  ElUpload,
  UploadFile,
  UploadProps,
  ElLoading
} from "element-plus";

const uploadRef = ref<InstanceType<typeof ElUpload>>(null);
const execlFile = ref<UploadFile | null>(null);
const emit = defineEmits(["onSuccess"]);

//上传文件改变
const handleChange: UploadProps["onChange"] = uploadFile => {
  const rawFile = uploadFile.raw;
  if (!rawFile) return;
  upload(rawFile);
};

const upload = rawFile => {
  if (beforeUpload(rawFile)) {
    readerData(rawFile);
  }
};
const readerData = async uploadFile => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)"
  });
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onload = e => {
      const data = e.target.result;
      const workbook = read(data, { type: "array" });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const header = getHeaderRow(worksheet);
      const results = utils.sheet_to_json(worksheet, { defval: "" });
      emit("onSuccess", { header, results });
      loading.close();
      resolve({ isok: true });
    };
    reader.readAsArrayBuffer(uploadFile);
  });
};

const getHeaderRow = sheet => {
  const headers = [];
  const range = utils.decode_range(sheet["!ref"]);
  let C;
  const R = range.s.r;
  /* 从第一行开始 */
  for (C = range.s.c; C <= range.e.c; ++C) {
    /* 遍历范围中的每一列 */
    const cell = sheet[utils.encode_cell({ c: C, r: R })];
    /* 查找第一行中的单元格 */
    let hdr = "UNKNOWN " + C; // <--替换为所需的默认值
    if (cell && cell.t) hdr = utils.format_cell(cell);
    headers.push(hdr);
  }
  return headers;
};

const beforeUpload: UploadProps["beforeUpload"] = async uploadFile => {
  const isLt1M = uploadFile.size / 1024 < 500;
  if (isLt1M) {
    return true;
  }
  ElMessage.warning("请不要上传大于500KB的文件");
  return false;
};

//删除穿文件
const handleRemove: UploadProps["onRemove"] = () => (execlFile.value = null);

defineExpose({
  onDisplay: () => (execlFile.value = null)
});
</script>

<template>
  <el-upload
    ref="uploadRef"
    action="#"
    accept=".xls,.xlsx"
    drag
    class="upload"
    :auto-upload="false"
    @change="handleChange"
    @remove="handleRemove"
    @before-upload="beforeUpload"
    multiple
    style="width:100%;height:100%;margin-bottom: 10px"
  >
    <!-- class="execl-uploader" -->
    <div class="el-upload__text" v-if="!execlFile">点击此处,上传文件</div>
  </el-upload>
</template>

<style lang="scss" scoped>
.upload {
  :deep(.el-upload-list){
    display: none !important;
  }
}

.execl-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  display: flex;
  flex-direction: column;
  justify-content: center;

  &:hover {
    border-color: var(--el-color-primary);
  }



  .el-upload__text {
    line-height: 200px;
    font-size: 22px;
  }
}
</style>
