<template>
    <div id='hc-vab-only-office' class="hc-vab-only-office">
        <HcNoData ui="hc-office-no-data" tip="暂无文档文件数据"/>
    </div>
</template>

<script setup>
import {onMounted, ref, watch, onBeforeUnmount} from "vue";
import {useAppStore} from "~src/store";

const props = defineProps({
    isEdit: { //可否编辑
        type: Boolean,
        default: true
    },
    lang: { //语言
        type: String,
        default: 'zh-CN'
    },
    src: { //文件地址
        type: String,
        default: ''
    },
    url: { //编辑保存地址
        type: String,
        default: 'http://47.110.251.215:8090/blade-manager/exceltab/callbackSave'
    },
    title: { //标题
        type: String,
        default: ''
    },
    type: { //类型
        type: String,
        default: 'docx'
    },
    isPrint: { //可否打印
        type: Boolean,
        default: false
    },
    isDownload: { //可否下载
        type: Boolean,
        default: true
    },
    key: { //文件key
        type: String,
        default: ''
    },
    token: {
        type: String,
        default: ''
    },
    model: {
        type: String,
        default: ''
    },
})

//编辑器变量
const userStore = useAppStore()
const docEditor = ref(null)
const userInfo = ref(userStore.getUserInfo);

//监听
watch(() => [
    userStore.getUserInfo,
    props.src
], ([info, src]) => {
    userInfo.value = info
    if (src) {
        initDocEditor(src)
    }
})

//渲染完成
onMounted(() => {
    if (props.src) {
        initDocEditor(props.src)
    }
})

//初始化编辑器
const initDocEditor = async (src) => {
    const user = userInfo.value;
    if( docEditor.value !== null ) {
        docEditor.value?.destroyEditor();
        docEditor.value = null;
    }
    if (src) {
        //创建编辑器示例
        docEditor.value = new DocsAPI.DocEditor('hc-vab-only-office', {
            document: {
                fileType: props.type,
                key: props.key ||'',
                title: props.title,
                permissions: {
                    edit: props.isEdit, //是否可以编辑: 只能查看，传false
                    print: props.isPrint,
                    download: props.isDownload,
                    "fillForms": true,  //是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
                    "review": true      //跟踪变化
                },
                url: src,
            },
            documentType: getFileType(props.type),
            editorConfig: {
                callbackUrl: props.url, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
                lang: props.lang,       //语言设置
                //定制
                customization: {
                    autosave: true,     //是否自动保存
                    chat: false,
                    forcesave:true,     //开启手动保存
                    comments: false,
                    help: true,
                    hideRightMenu:true,
                    plugins: false,     //是否显示插件
                },
                user:{
                    id: user.user_id,
                    name: user.user_name
                },
                mode: props.model ? props.model : 'edit',
            },
            width: '100%',
            height: '100%',
            token: props.token || ''
        })
    }
}

//获取文件类型
const getFileType = (type) => {
    let docType = ''
    let fileTypesDoc = [
        'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
    ]
    let fileTypesCsv = [
        'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
    ]
    let fileTypesPPt = [
        'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
    ]
    if (fileTypesDoc.includes(type)) {
        docType = 'text'
    }
    if (fileTypesCsv.includes(type)) {
        docType = 'spreadsheet'
    }
    if (fileTypesPPt.includes(type)) {
        docType = 'presentation'
    }
    return docType
}

//销毁
onBeforeUnmount(() => {
    if( docEditor.value !== null ) {
        docEditor.value?.destroyEditor();
        docEditor.value = null;
    }
})
</script>

<style lang="scss" scoped>
.hc-vab-only-office {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>

<style lang="scss">
.hc-office-no-data.hc-no-data-box {
    .no-data-c {
        width: 300px;
        .desc {
            font-size: 20px;
        }
    }
}
</style>
