<!--  -->
<template>
  <div class="p-ofd-con" style="width: 100%; height: 100%">
    <div id="ofdBox" class="img-box" style="width: 100%; overflow: auto"></div>
    <a-spin class="odf-loading" :spinning="spinning" />
    <a-result
      v-if="resultTitle"
      :status="resultStatus"
      :title="resultTitle"
      class="ofd-result"
    >
      <!-- <template #extra>
      <a-button key="console" type="primary">
        Go Console
      </a-button>
    </template> -->
    </a-result>
  </div>
</template>

<script>
// import * as OFDUils from "ofd.js";
import * as ofd from './../lib/ofd.umd'
import * as Util from './../../utils/util'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "odfBox",
  components: {},
  props: {
    url: { type: String },
    setEvent: { type: Function },
  },
  data() {
    // 这里存放数据
    return {
      spinning: false,
      resultTitle: "",
      // 'success' | 'error' | 'info' | 'warning'| '404' | '403' | '500'
      resultStatus: "info",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.pageInit();
  },
  // 方法集合
  methods: {
    getOfdDocumentObj(file, screenWidth) {
      let that = this;
      that.spinning = true;
      // let t = new Date().getTime();
      // this.loading = true;
      ofd.parseOfdDocument({
        ofd: file,
        success(res) {
          that.resultTitle = ''
          console.log("解析ofd", res, file);
          const divs = ofd.renderOfd(screenWidth, res[0]);
          that.displayOfdDiv(divs);
        },
        fail(error) {
          console.log("错误===》", error);
          that.resultTitle = '文件加载出错了'
          that.resultStatus = 'error'
          that.spinning = false;
        },
      });
    },
    geturl2File4OFD(url, fileName) {
      return new Promise((resolve, reject) => {
        var blob = null;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.setRequestHeader("Accept", "application/ofd");
        xhr.responseType = "blob";
        // 加载时处理
        xhr.onload = () => {
          // 获取返回结果
          blob = xhr.response;
          let file = new File([blob], fileName, { type: "application/ofd" });
          // console.log('geturl2File4OFD===>', file)
          // 返回结果
          resolve(file);
        };
        xhr.onerror = (e) => {
          reject(e);
        };
        // 发送
        xhr.send();
      });
    },
    displayOfdDiv(divs) {
      let contentDiv = document.getElementById("ofdBox");
      contentDiv.innerHTML = "";
      for (const div of divs) {
        contentDiv.appendChild(div);
      }
      this.spinning = false;
    },
    pageInit() {
      const screenWidth = document.getElementById("ofdBox").clientWidth;
        const fileName = Util.getCaptionFileName(this.url);
      // this.getOfdDocumentObj(this.url, screenWidth);
      this.geturl2File4OFD(this.url, fileName).then(res => {
        console.log('getOfdDocumentObj 0===>', res, screenWidth);
        this.getOfdDocumentObj(res, screenWidth)
      })
    },
  },
};
</script>
<style lang="less">
.p-ofd-con {
  position: relative;
  .odf-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
  }
  .ofd-result {
    position: absolute;
    left: 39%;
    top: 13%;
    z-index: 101;
  }
}
</style>
