<!--
author:        Kane Wang <wangkane@qq.com>
date:          2025-10-28 11:18:51
component:     UploadRegulatory
Copyright © CPIC All rights reserved
-->
<template>
    <div class="wrapper">
        <!-- <VuePdfEmbed v-if="ui.isPDF" :source="ui.fileURL" text-layer annotation-layer /> -->
        <VueOfficePdf v-if="ui.isPDF" :src="ui.fileURLPDF" @error="errorHandle" />
        <VueOfficeDocx v-if="ui.isDocx" :src="ui.fileURLDocx" @error="errorHandle" />
        <VueOfficeExcel
            v-if="ui.isXlsx"
            :src="ui.fileURLXlsx"
            @error="errorHandle"
        />
    </div>
</template>
<script lang="ts">
import {reactive, ref } from "vue";
import { ElMessage } from "element-plus";
// import VuePdfEmbed, { useVuePdfEmbed }  from "vue-pdf-embed";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";


import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
import "@vue-office/excel/lib/index.css";

export default {
    name:"UploadRegulatory",
    components: {
        VueOfficePdf,
        VueOfficeDocx,
        VueOfficeExcel,
    },
    setup()
    {
        const  ui = reactive({
            showUI: true,
            isPDF: false,
            isDocx: false,
            isXlsx: true,
            fileURLPDF: "http://10.39.0.1:8080/regulatory/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E9%83%A8/%E5%85%B3%E4%BA%8E%E5%8D%B0%E5%8F%91%E3%80%8A%E5%A4%AA%E5%B9%B3%E6%B4%8B%E4%BA%A7%E9%99%A9%E5%8E%A6%E9%97%A8%E5%88%86%E5%85%AC%E5%8F%B8IT%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%E5%8A%9E%E6%B3%95%E3%80%8B%EF%BC%882019%E5%B9%B4%E4%BF%AE%E8%AE%A2%EF%BC%89%E7%9A%84%E9%80%9A%E7%9F%A5/%E5%8E%A6%E5%A4%AA%E4%BF%9D%E4%BA%A7%E5%8F%91%E3%80%902019%E3%80%9146%E5%8F%B7%E5%85%B3%E4%BA%8E%E5%8D%B0%E5%8F%91%E3%80%8A%E5%A4%AA%E5%B9%B3%E6%B4%8B%E4%BA%A7%E9%99%A9%E5%8E%A6%E9%97%A8%E5%88%86%E5%85%AC%E5%8F%B8IT%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%E5%8A%9E%E6%B3%95%E3%80%8B%EF%BC%882019%E5%B9%B4%E4%BF%AE%E8%AE%A2%EF%BC%89%E7%9A%84%E9%80%9A%E7%9F%A5.pdf",
            fileURLDocx: "http://10.39.0.1:8080/regulatory/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E9%83%A8/%E5%85%B3%E4%BA%8E%E5%8D%B0%E5%8F%91%E3%80%8A%E5%A4%AA%E5%B9%B3%E6%B4%8B%E4%BA%A7%E9%99%A9%E5%8E%A6%E9%97%A8%E5%88%86%E5%85%AC%E5%8F%B8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E9%9C%80%E6%B1%82%E7%AE%A1%E7%90%86%E5%8A%9E%E6%B3%95%EF%BC%882020%E5%B9%B4%E4%BF%AE%E8%AE%A2%EF%BC%89%E3%80%8B%E7%9A%84%E9%80%9A%E7%9F%A5/%E9%99%84%E4%BB%B62%EF%BC%9A%E4%B8%9A%E5%8A%A1%E9%9C%80%E6%B1%82%E8%AF%B4%E6%98%8E%E4%B9%A6.docx",
            fileURLXlsx: "http://10.39.0.1:8081/regulatory/%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E9%83%A8/%E5%85%B3%E4%BA%8E%E5%8D%B0%E5%8F%91%E3%80%8A%E5%A4%AA%E5%B9%B3%E6%B4%8B%E4%BA%A7%E9%99%A9%E5%8E%A6%E9%97%A8%E5%88%86%E5%85%AC%E5%8F%B8%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E9%9C%80%E6%B1%82%E7%AE%A1%E7%90%86%E5%8A%9E%E6%B3%95%EF%BC%882020%E5%B9%B4%E4%BF%AE%E8%AE%A2%EF%BC%89%E3%80%8B%E7%9A%84%E9%80%9A%E7%9F%A5/%E9%99%84%E4%BB%B64%EF%BC%9A%E5%88%86%E5%85%AC%E5%8F%B8%E8%87%AA%E5%BB%BA%E7%B3%BB%E7%BB%9F%E9%83%A8%E7%BD%B2%E6%83%85%E5%86%B5%E7%99%BB%E8%AE%B0%E8%A1%A8.xlsx",

        });

        const errorHandle = ()=>
        {
            ElMessage.error( "渲染文档出错！" );
        };

        return {
            ui,
            errorHandle, };
    },
};
</script>
<style lang="scss">
.wrapper {
    margin: 10px 10px 10px 10px;

    width: calc(100% - 20px);
    height: calc( 100vh - 70px);

    // .VueOfficeExcel {
    //     height: calc( 100vh - 70px);
    // }

    >*+* {
        margin-top: 10px;
    }
}
</style>