<template>
  <div class="app-container">
    <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleClick" class="not-print-content">打印</el-button>
    <div class="container" style="margin-top: 20px;">
      <div v-show="loading" class="well loading">正在加载中，请耐心等待...</div>
      <div v-show="!loading" class="well" ref="output"></div>
    </div>
  </div>
</template>

<script>
  import { getExtend, readBuffer, render } from '@/utils/util';
  import { parse } from 'qs';
  import axios from 'axios'
  export default {
    data() {
      return {
        loading: false,
        url: '',
        fileName: '',
        id: ''
      }
    },
    created() {
      this.loading = true
      this.url = this.$route.query.url || ''

      this.fileName = this.$route.query.fileName || ''
      this.id = this.$route.query.id || ''
      console.log(this.url)
      console.log(this.fileName)
      console.log(this.id)
      if(this.url != '') {
        this.getLoadEnclosure();
      }
    },
    methods: {
      handleClick() {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            //是否ie
            remove_ie_header_and_footer();
          }
        window.print();
      },
      //去掉页眉页脚
      remove_ie_header_and_footer() {
        var hkey_path =
          "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
        try {
          var RegWsh = new ActiveXObject("WScript.Shell");
          RegWsh.RegWrite(hkey_path + "header", "");
          RegWsh.RegWrite(hkey_path + "footer", "");
        } catch (e) {}
      },
      getLoadEnclosure() {
        const filename = this.fileName
        axios({
          url: "http://124.232.146.72:7015/api/common/attach/"+this.id,
          method: 'get',
          responseType: 'blob',
        }).then(({ data }) => {
          if (!data) {
            console.error('文件下载失败');
          }
          const file = new File([ data ], filename, {});
          this.handleChange({ target: { files: [ file ] } });
        }).finally(() => {
          this.loading = false;
        })
      },
      async handleChange(e) {
        this.loading = true;
        try {
          const [ file ] = e.target.files;
          this.filename = file.name && decodeURIComponent(file.name) || '';
          const arrayBuffer = await readBuffer(file);
          this.loading = false
          this.last = await this.displayResult(arrayBuffer, file)
          console.log("last")
          console.log(this.last)
        } catch (e) {
          console.error(e)
        } finally {
          this.loading = false
        }
      },
      displayResult(buffer, file) {
        // 取得文件名
        const { name } = file;
        // 取得扩展名
        const extend = getExtend(name);
        // 输出目的地
        const { output } = this.$refs;
        // 生成新的dom
        const node = document.createElement('div');
        // 添加孩子，防止vue实例替换dom元素
        if (this.last) {
          output.removeChild(this.last.$el);
          this.last.$destroy();
        }
        const child = output.appendChild(node);
        // 调用渲染方法进行渲染
        return new Promise((resolve, reject) => render(buffer, extend, child)
            .then(resolve).catch(reject));
      }
    }
  }
</script>

<style scoped>
  @media print {
    .not-print-content {
        display: none;
    }
  }
  @page { margin: 0; }
</style>
