<template>
  <div>
    <el-dialog
      v-model="modelValue"
      title="文件解析"
      width="1000px"
      :show-close="true"
      :center="true"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <h1>文件文本提取工具</h1>
      <p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>

      <div class="container">
        <input
          type="file"
          id="file-input"
          accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"
        />
        <button @click="chooseFile">选择文件</button>
        <p id="file-info">未选择文件</p>
      </div>

      <button id="extract-btn" disabled>提取文本</button>

      <h3>提取结果：</h3>
      <div id="result">请先上传文件...</div>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:modelValue", "change"]);
onMounted(() => {
  nextTick(() => {
    const fileInput = document.getElementById("file-input");
    const fileInfo = document.getElementById("file-info");
    const extractBtn = document.getElementById("extract-btn");
    const resultDiv = document.getElementById("result");
    let selectedFile = null;
    // 监听文件选择
    fileInput.addEventListener("change", function (e) {
      if (e.target.files.length > 0) {
        selectedFile = e.target.files[0];
        fileInfo.textContent = `已选择: ${selectedFile.name} (${(
          selectedFile.size / 1024
        ).toFixed(2)} KB)`;
        extractBtn.disabled = false;
      } else {
        selectedFile = null;
        fileInfo.textContent = "未选择文件";
        extractBtn.disabled = true;
      }
      if (selectedFile.type == "video/mp4") {
        upfileOnchange(selectedFile);
      }
    });
    // 提取文本按钮点击事件
    extractBtn.addEventListener("click", async function () {
      if (!selectedFile) return (resultDiv.textContent = "请先选择文件");
      resultDiv.textContent = "正在处理文件...";
      try {
        let text = "";
        const fileType = selectedFile.name.split(".").pop().toLowerCase();
        console.log(selectedFile);

        if (fileType === "txt") {
          // 处理文本文件
          text = await readTextFile(selectedFile);
        } else if (fileType === "pdf") {
          // 处理PDF文件
          text = await extractTextFromPDF(selectedFile);
        } else if (fileType === "docx") {
          // 处理Word文件
          text = await extractTextFromDocx(selectedFile);
          console.log(text, "===word");
        } else if (["mp4", "mp3", "wav"].includes(fileType)) {
          // 处理mp4,mp3,wav文件
          await start();
          text = "数据加载有点慢，请稍等。。。。";
          setTimeout(() => {
            resultDiv.textContent = videoText;
          }, 2000);
        } else {
          throw new Error("不支持的文件类型");
        }
        resultDiv.textContent = text || "未提取到文本内容";
      } catch (error) {
        resultDiv.textContent = `处理失败: ${error.message}`;
        console.error(error);
      }
    });
  });
});

// 读取文本文件
function readTextFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(new Error("文件读取失败"));
    reader.readAsText(file);
  });
}

// 提取PDF文本
async function extractTextFromPDF(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();

    fileReader.onload = async function () {
      try {
        const typedArray = new Uint8Array(this.result);
        const pdf = await pdfjsLib.getDocument(typedArray).promise;
        let fullText = "";

        for (let i = 1; i <= pdf.numPages; i++) {
          const page = await pdf.getPage(i);
          const textContent = await page.getTextContent();
          const text = textContent.items.map((item) => item.str).join(" ");
          fullText += text + "\n\n";
        }

        resolve(fullText);
      } catch (error) {
        reject(error);
      }
    };

    fileReader.onerror = reject;
    fileReader.readAsArrayBuffer(file);
  });
}

// 提取Word文档文本
async function extractTextFromDocx(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = function (event) {
      const arrayBuffer = event.target.result;

      mammoth
        .extractRawText({ arrayBuffer: arrayBuffer })
        .then(function (result) {
          resolve(result.value);
        })
        .catch(function (error) {
          reject(error);
        });
    };

    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

const onComfirm = () => {
  const resultDiv = document.getElementById("result");
  let obj = {
    text: resultDiv.textContent
  };
  emits("change", obj);
};

// 关闭
const handleClose = () => {
  const resultDiv = document.getElementById("result");
  resultDiv.textContent = "请先上传文件";
  const fileInfo = document.getElementById("file-info");
  fileInfo.textContent = "未选择文件";
  emits("update:modelValue", false);
};

const chooseFile = () => {
  document.getElementById("file-input").click();
};
</script>

<style lang="scss" scoped>
.container {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

#file-input {
  display: none;
}

button {
  background: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}

button:hover {
  background: #45a049;
}

#result {
  margin-top: 20px;
  white-space: pre-wrap;
  background: #f9f9f9;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 320px;
  overflow-y: auto;
}

#file-info {
  margin: 10px 0;
  font-style: italic;
  color: #666;
}

::v-deep .el-dialog {
  margin-top: 10px;
}
</style>