<script setup lang="ts">
defineOptions({
  name: "IndexDefineImport"
});
import { ref } from "vue";
import * as XLSX from "xlsx";
import {
  GetdownloadDataRosterTemplateApi,
  postUpdateDeptApi,
  getListTable
} from "@/api/download";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const $router = useRouter();
const emit = defineEmits(["handleImport"]);
const uploadShow = ref(true);
const fileDocument = ref<File | null>(null); // 存储文件
const backupUrl = import.meta.env.VITE_BACKUP_URL + "/指标导入模板.xlsx";
// 上传文件函数
// 上传文件函数
const uploadFile = async () => {
  if (!fileDocument.value) {
    ElMessage.error("请先上传文件");
    return;
  }

  try {
    const formData = new FormData();

    // // 将 tableData 转换为 XLSX 格式
    // const ws = XLSX.utils.json_to_sheet(tableData.value); // 将表格数据转为工作表
    // const wb = XLSX.utils.book_new(); // 创建一个新的工作簿
    // XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作表添加到工作簿

    // // 将工作簿转换为二进制的 XLSX 文件数据
    // const xlsxData = XLSX.write(wb, { bookType: "xlsx", type: "array" });

    // // 创建一个 Blob 对象，指定 MIME 类型为 XLSX 格式
    // const blob = new Blob([xlsxData], {
    //   type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    // });

    // // 创建一个文件对象
    // const file = new File([blob], "tableData.xlsx", {
    //   type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    // });

    // 将生成的文件添加到 FormData 中
    formData.append("file", fileDocument.value);

    // 获取文件并执行上传
    const fileToSend = formData.get("file");

    // 调用 API 上传文件
    const { data } = await postUpdateDeptApi({ file: fileToSend });
    // const { data } = await postUpdateDeptApi({ file: formData });
    if (data.code === 200) {
      // 根据后端返回的 code 判断是否成功
      ElMessage.success("文件上传并导入成功");
      // 重置上传状态
      backDefine();
      $router.push("/indexDefine/children/define");
      tableHeaders.value = []; // 清空表头
    } else {
      ElMessage.error(data.msg);
    }
  } catch (error) {
    ElMessage.error("上传失败，请重试");
    console.error(error);
  }
};

const tableHeaders = ref<any>([]);
const tableData = ref<any>([]);

const backDefine = () => {
  emit("handleImport");
};

// 处理文件上传并解析 Excel 内容
const handleUploadChange = async (file: File) => {
  fileDocument.value = file; // 保存文件
  const reader = new FileReader();
  let fileType = file.name.slice(-4);
  if (fileType == "xlsx") {
    const formData = new FormData();
    formData.append("file", fileDocument.value); // 将文件添加到表单数据
    // 调用 API 上传文件
    const { data } = await getListTable(formData);
    if (data.code === 200) {
      tableData.value = data.data;
    }
    uploadShow.value = false; // 隐藏上传区域，显示数据表
  } else {
    ElMessage.error("请上传xlsx文件");
  }

  reader.readAsArrayBuffer(file); // 读取文件为 ArrayBuffer
  return false; // 阻止默认上传行为
};

const stateDone = state => {
  const arr = ["草稿", "发布", "下架"];
  return arr[state];
};
</script>

<template>
  <div>
    <div class="w-3/4 m-auto mt-4">
      <div class="w-full bg p-3">
        <!-- <el-button class="float-right" @click="backDefine">返回</el-button> -->
        <h5>1.下载导入模板</h5>
        <p class="text-xs mt-2 text">根据提升信息完善表格内容</p>

        <el-button class="mt-2">
          <el-icon> <Download /> </el-icon
          ><a :href="backupUrl" download="指标导入模板.xlsx"
            >下载空的模板表格</a
          >
        </el-button>
      </div>
      <div class="w-full mt-4 bg p-3">
        <h5>2.上传完善后的模板</h5>
        <p class="text-xs mt-2 text mb-2">
          更新信息的模板中，如有空的数据列，则相应字段信息会被清空，请谨慎填写
        </p>
        <div v-if="uploadShow">
          <el-upload
            class="upload-demo"
            drag
            multiple
            :before-upload="file => handleUploadChange(file)"
            :show-file-list="false"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              点击<em>图标选择上传</em>或者将文件拖拽到此区域
            </div>
          </el-upload>
        </div>
        <div v-else class="mb-2">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="250"
          >
            <el-table-column prop="name" label="指标名称" />
            <el-table-column prop="define" label="指标定义" />
            <el-table-column prop="caliber" label="指标口径" />
            <el-table-column prop="categoryName" label="指标分类" />
            <el-table-column prop="source" label="来源" />
            <el-table-column prop="statue" label="状态">
              <template #default="scope">
                {{ stateDone(scope.row.statue) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="float-right">
          <el-button @click="backDefine">取消</el-button>
          <el-button type="primary" @click="uploadFile">确认</el-button>
        </div>
        <p class="h-11 no-select">.</p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bg {
  background-color: #f8f9fa;
}

.text {
  color: #999;
}

.upoload {
  float: right;
}

.no-select {
  color: rgb(255 255 255 / 0%);
  user-select: none;
}
</style>
