<template>
    <div style="width: 100%; height: 100%;">
        <div class="common-layout">
            <el-container>
                <el-header style="height: 10%; width: 80%;">
                    <h2>PDF转Word</h2>
                    <p>将PDF文档转换为Word。转换出的文件尽可能保持PDF原有格式(目前暂不支持文字大小，颜色与样式，不支持分栏排版)</p>
                </el-header>
                <el-main style="height: 800px; width: 100%; position: relative;">
                    <FileUpload fileFormats="pdf" :isConvert=true />
                </el-main>
                <el-footer style="display: flex; justify-content: center; align-items: center; width: 100%;">
                    <OcrLangList />
                    <el-button type="primary" @click="predict" :loading="loading">开始转换</el-button>
                    <el-button type="primary" @click="download" :loading="loading">下载结果</el-button>
                </el-footer>
                <section> 耗时：{{ predictTime }} ms</section>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PDFToWord, Download } from '../../../../api/api'

import { storeToRefs } from 'pinia'
import { useServerStore } from '../../../../store/Server';
import { useCanvasImgStore } from '../../../../store/CanvasImg';
import { useOcrLangStore } from '../../../../store/OcrLang';

import FileUpload from '../../../../components/FileUpload.vue'
import OcrLangList from '../../../../components/OcrLangList.vue'

const si = useServerStore();
const { api_download, api_pdf_to_word } = storeToRefs(si);
const my_canvas = useCanvasImgStore();
const { input_file } = storeToRefs(my_canvas);
const ol = useOcrLangStore();
const { ocr_lang } = storeToRefs(ol);

const fileName = ref("")
let predictTime = ref(0)
let loading = ref(false)
const output_path = ref("")

const predict = async () => {
    fileName.value = ''
    fileName.value = input_file.value?.name
    if (fileName.value == undefined || fileName.value == '') {
        alert('请上传文件！')
        return;
    }
    if (ocr_lang.value == undefined || ocr_lang.value == "") {
        alert('请先指定语言！')
        return;
    }

    loading.value = !loading.value
    var data = new FormData();
    data.append('pdf', input_file.value);
    data.append('lang', ocr_lang.value);
    data.append('page_range', "None");

    PDFToWord(api_pdf_to_word.value, data).then(res => {
        console.log(res)
        predictTime.value = res.data.cost;
        output_path.value = res.data.file_path;
        loading.value = !loading.value;
    }).catch(function (err) {
        loading.value = !loading.value;
        predictTime.value = 0
    });
};

const download = async () => {
    if (output_path.value != "") {
        Download(api_download.value, output_path.value).then(res => {
            const url = window.URL.createObjectURL(res)
            const a = document.createElement('a')
            a.href = url
            a.download = fileName.value.split('.')[0] + '.docx'
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url)
        }).catch(function (err) {
            console.log(err)
        });
    }
    else
        alert('请先上传pdf文件并等待成功转换')
}
</script>

<style scoped lang="less"></style>