<template>
  <div class="ocr-container">
    <h3>文件上传测试</h3>
    
    <div class="upload-section">
      <input 
        type="file" 
        ref="fileInput" 
        accept="image/*" 
        style="display: none" 
        @change="handleFileChange" 
      />
      <button class="upload-btn" @click="triggerFileInput">选择图片文件</button>
      <span v-if="fileName" class="file-name">已选择: {{ fileName }}</span>
    </div>
    
    <button 
      class="convert-btn" 
      @click="convertToBase64" 
      :disabled="!selectedFile"
    >
      转换为Base64
    </button>
    
    <div v-if="base64Result" class="result-section">
      <p>转换成功！Base64字符串已保存，长度为: {{ base64Result.length }}</p>
      <div class="preview">
        <img :src="base64Result" alt="预览" />
      </div>
    </div>

    <button 
      class="convert-btn" 
      @click="beginOcr" 
      
    >
      开始orc 识别
    </button>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fileToBase64 } from '@/utils/image';
import { createWorker } from 'tesseract.js';

defineOptions({
  name: 'OcrTest',
});


const fileInput = ref<HTMLInputElement | null>(null);
const selectedFile = ref<File | null>(null);
const fileName = ref<string>('');
const base64Result = ref<string>('');

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click();
};

// 处理文件选择
const handleFileChange = (event: Event) => {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    selectedFile.value = input.files[0];
    fileName.value = selectedFile.value.name;
    // 自动重置input以便于再次选择相同文件
    input.value = '';
  }
};


//开始ocr
const beginOcr = async () => {
  console.log('我开始识别~~~~~')
  const worker = await createWorker(['chi_sim'],1,{
    logger: (m) => console.log(m),
    langPath: 'https://tessdata.projectnaptha.com/4.0.0'
  });
     
        const res = await worker.recognize(base64Result.value);
				console.log('识别结果:', res); //text是最后识别到的内容
        await worker.terminate(); //终止worker线程,节省内存资源

};

// 转换文件为base64
const convertToBase64 = async () => {
  if (!selectedFile.value) return;
  
  try {
    base64Result.value = await fileToBase64(selectedFile.value);
    console.log('文件已转换为base64格式');
  } catch (error) {
    console.error('转换失败:', error);
    alert('转换失败: ' + (error instanceof Error ? error.message : '未知错误'));
  }
};

onMounted(() => {
  console.log('OcrTest mounted');
});
</script>

<style scoped>
.ocr-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.upload-section {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-btn, .convert-btn {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.upload-btn:hover, .convert-btn:hover {
  background-color: #45a049;
}

.convert-btn {
  background-color: #2196F3;
}

.convert-btn:hover {
  background-color: #0b7dda;
}

.convert-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.file-name {
  margin-left: 10px;
  font-size: 14px;
}

.result-section {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.preview {
  margin-top: 10px;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.preview img {
  width: 100%;
  height: auto;
}
</style>
