<template>
    <div id="document">
        <div style="height:60px">
            <img class="back" style="width:45px;right:40px;position:absolute" :src="backPNG" @click="goBack" />
        </div>
        <div style="display: none">
            <form enctype="multipart/form-data" method="post" target="collabora-online-viewer" id="collabora-submit-form">
                <input name="access_token" :value="originName" type="hidden" id="access-token"/>
                <input name="access_token_ttl" :value="originName" type="hidden" id="access-token-ttl"/>
                <input type="submit" value="" />
            </form>
        </div>

        <iframe id="collabora-online-viewer" allowfullscreen="true" name="collabora-online-viewer" style="width:90%;height:78%;position:absolute;">
        </iframe>

    </div>
    
</template>

<script>
import backPNG from "../../assets/img/setting/back.png";
import{get, post} from "../../util/http_util"
export default  {
    data(){
        return{
            backPNG: backPNG,
            wopiClientUrl: "",
            wopiSrc: window.location.origin + "/api/wopi/files/",
            accessToken: "",
            name: "1",
            folder: "",
            originName: ""
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
        loadDocument(){
            get("api/wopi/collaboraUrl").then(res=>{
                this.wopiClientUrl = res.url;
                this.accessToken = res.token;
                 // 需要注意的事，无法通过localhost去访问页面实现在线编辑，因为在策略中actionUrl这个地址返回的响应头中Content-Security-Policy的frame-ancestors设置的是仅仅允许wopiClientUrl的地址和wopiSrc地址的html页面上可以通过iframe嵌入本页面
                 //换而言之frame嵌入actionUrl这个地址的时候，宿主页面所在的域名只能是wopiClientUrl和wopiSrc所在的地址。
                let actionUrl = this.wopiClientUrl + "WOPISrc=" + this.wopiSrc + this.name +"?folder=" + this.folder;
                this.originName && (actionUrl += "&&originName=" + this.originName);
                document.getElementById("collabora-submit-form").action = actionUrl;
                document.getElementById("collabora-submit-form").submit();         

            }).catch(err=>{
                this.$message.warning("加载失败");
            });
        }
    },activated(){
        this.folder = this.$route.params.folder;
        this.name = this.$route.params.name;
        this.originName = this.$route.params.originName;
        this.loadDocument();
    },mounted(){

    }
}
</script>

<style lang="scss">
#document{
    width: 99%;
    height: 97%;
    margin: 0;
    padding: 20px;
}