<template>
  <div class="app-container">
    <!-- 预览加载 -->

    <el-dialog title="预 览" :visible.sync="previewOpen" width="1500px">
      <div v-loading="kkLoad">
        <iframe ref="iframeBody" :src="dialogFileUrl" width="100%" height="800px" frameborder="0"></iframe>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import * as searchPageApi from '@/api/manager/digsearch';
  // import Editor from '@/components/Editor';
  import { Base64 } from 'js-base64';
      export default {
    name: "DiaLog",
    components: {
          // Editor,
                    },
    data() {
      return {
        kkLoad: false,
        previewOpen: false,
        iframeBody: null,
        dialogFileUrl: null,
        Base64: require('js-base64').Base64,
      };
    },
    methods: {
      /** 打开弹窗 */
    async open(result) {
        this.previewOpen = true;
        this.rendered();
        this.iframeLoad();
    },

      iframeLoad() {
        //this.$nextTick() 异步监听预览接口是否执行结束
        this.$nextTick(() => {
          this.kkLoad = true
          this.iframeBody = this.$refs.iframeBody
          if (this.iframeBody.attachEvent) {
            // IE
            this.iframeBody.attachEvent('onload', () => {
              this.kkLoad = false
            })
          } else {
            // 非IE
            this.iframeBody.onload = () => {
              this.kkLoad = false
            }
          }
        })
      },
      rendered() {
        this.dialogFileUrl = null
        const storedData = localStorage.getItem('detailData');
        this.detailData = JSON.parse(storedData);
        // txt
        // var originUrl = 'http://114.48.101.215/admin-api/adv/search/download3?filePath=/%E4%BF%A1%E5%88%9B%E4%BA%A7%E5%93%81%E7%9B%AE%E5%BD%95/TRS%E4%BF%A1%E5%88%9B%E4%BA%A7%E5%93%81%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83.txt&sourcename=ftp02'; //要预览文件的访问地址
        // doc
        var originUrl = 'http://114.48.101.215/admin-api/adv/search/download3?filePath=' + this.detailData.file_path + '&sourcename=' + this.detailData.sourcename; //要预览文件的访问地址
        // pdf
        // var originUrl = 'http://114.48.101.215/admin-api/adv/search/download3?filePath=/%E4%BA%A7%E5%93%81%E5%BA%93/%E5%8F%91%E5%B8%83%E4%BA%A7%E5%93%81/%E4%BA%A7%E5%93%81%E8%A1%A8%E4%B8%80/TRS%20WCM/V7.0%20Build1015/05Fix%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E5%B7%A5%E5%85%B7%EF%BC%88%E6%89%8B%E5%86%8C%EF%BC%89/TRSWCM7.0Fix%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E6%89%8B%E5%86%8C.pdf&sourcename=ftp02'; //要预览文件的访问地址
        console.log('originUrladmin=' + originUrl);
        // var originUrl = 'http://114.48.101.215/admin-api/adv/search/download3?filePath=/产品库/发布产品/产品表二/TRS CDS/V4.5 Build1019/V4.5%20Build1019/TRS CDS4.5安装手册.pdf&sourcename=ftp02';
        var previewUrl = originUrl + '&fullfilename=' + this.detailData.file_name + '.' + this.detailData.file_type;

        console.log('previewUrladmin=' + previewUrl);

        this.dialogFileUrl = 'http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl))
        console.log('dialogFileUrladmin=' + this.dialogFileUrl);
        this.previewOpen = true
        // const searchParams = {
        //   filePath: this.detailData.file_path,
        //   sourcename: this.detailData.sourcename,
        //   fileName: this.detailData.file_name,
        //   fileType: this.detailData.file_type
        // };
        // searchPageApi.getDownload(searchParams)
        //   .then(response => {
        //     const blob = new Blob([response], { type: 'application/octet-stream' });
        //     console.log('blob=' + blob);
        //     // const blob = new Blob([response], { type: 'arraybuffer' });
        //     const url = URL.createObjectURL(blob);
        //     console.log('url='+url);
        //     this.dialogFileUrl = 'http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
        //     // this.dialogFileUrl = 'http://127.0.0.1:8012/onlinePreview?url=aHR0cDovLzEyNy4wLjAuMTo4MDEyL2RlbW8vMDEx5YWs5ZGKLnBkZg%3D%3D'
        //     this.previewOpen = true

        //   })
        //   .catch(error => {
        //     console.error('文件预览失败！:', error);
        //   });
      }

    }
  };
</script>
