<template>
  <el-dialog v-if="visible" :visible.sync="visible" :title="title" :fullscreen="true" append-to-body
    custom-class="base-dialog-wrapper" @close="handleClose">
    <div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
      <iframe v-if="visible"
        :src="`/static/onlyOffice/viewer.html?url=${OSSclientConfig.basePath}${path}?onlyOffice_url=${onlyOffice_url}&type=${type}&title=${title}&documentType=${documentType}&userName=${currentUser}`"
        width="100%" height="99%" frameborder="0" crossorigin="anonymous" />
    </div>
  </el-dialog>
</template>
<script>
import DOCUMENTTYPE from "@/utils/onlyOffice_type.js"
export default {
  name: "OnlyOffice",
  data() {
    return {
      visible: false,
      path: null,
      type: null,
      title: null,
      documentType: null,
      currentUser: zzSessionStorage.getItem('userName'),
      onlyOffice_url: process.env.VUE_APP_ONLYOFFICE_URL
    };
  },
  methods: {

    open(path, type, title) {
      this.path = path;
      this.type = type.toLowerCase();
      this.documentType = DOCUMENTTYPE[`.${this.type}`]
      this.title = title;
      this.visible = true;
    },
    handleClose() {
      this.$emit("closed");
    },
  },
};
</script>
<style lang="scss" scoped>
#placeholder {
  width: 100%;
  height: 100%;
}
</style>