<script setup lang="ts">
import { Button, Divider, Spin } from 'ant-design-vue'
import { useFileDialog } from '@vueuse/core'
import { ref } from 'vue'
import { MdPreview } from 'md-editor-v3'
import { getOcrResult } from '@/api/system/pdf'
import 'md-editor-v3/lib/preview.css'

const { files, open, reset, onChange } = useFileDialog({
  accept: 'image/*',
  directory: false,
})

const ocrResult = ref<string>('')
const loading = ref<boolean>(false)

onChange(async () => {
  ocrResult.value = ''
  loading.value = false
  if (files.value?.length && files.value?.length > 0) {
    loading.value = true

    const result = await getOcrResult({
      file: files.value.item(0),
      msg: '识别图像内容，根据内容用makedown格式整理输出。',
    })
    ocrResult.value = result.markdown
    loading.value = false
    reset()
  }
})

function handleReset() {
  reset()
  ocrResult.value = ''
  loading.value = false
}
</script>

<template>
  <div class="mx-2 mt-4">
    <Button class="mr-2" type="primary" @click="open()">
      选择文件
    </Button>
    <Button @click="handleReset">
      重置
    </Button>
    <Divider />
    <div v-if="loading" class="h-300px w-full flex flex-row items-center justify-center">
      <Spin size="large" />
    </div>
    <MdPreview v-if="!loading && ocrResult.length > 0" id="md-editor-v3" :model-value="ocrResult" class="px-4 pb-4" />
  </div>
</template>
