<template>
  <div>
    <!-- 预览
    <input class="file-select" type="file" @change="handleChange"> -->
    <div ref="output" v-loading="loading" class="well" />
  </div>
</template>

<script>
import { getExtend, readBuffer, render } from '@/utils/perview'
import { parse } from 'qs'
import { getImagePerview } from '@/api/dictionary'
export default {
  data() {
    return {
      // 加载状态跟踪
      loading: false,
      // 上个渲染实例
      last: null,
      // 隐藏头部，当基于消息机制渲染，将隐藏
      hidden: false
    }
  },
  created() {
    // 允许使用预留的消息机制发送二进制数据，必须在url后添加?name=xxx.xxx&from=xxx
    const { from, name } = parse(location.search.substr(1))
    if (from) {
      window.addEventListener('message', (event) => {
        const { origin, data: blob } = event
        if (origin === from && blob instanceof Blob) {
          // 构造响应，自动渲染
          const file = new File([blob], name, {})
          this.hidden = true
          this.handleChange({ target: { files: [file] }})
        }
      })
    }
    this.getFile()
  },
  methods: {
    async handleChange(e) {
      // this.loading = true
      // try {
      //   const [file] = e.target.files
      //   const arrayBuffer = await readBuffer(file)
      //   this.loading = false
      //   this.last = await this.displayResult(arrayBuffer, file)
      // } catch (e) {
      //   console.error(e)
      // } finally {
      //   this.loading = false
      // }

      this.loading = true
      try {
        const url = e
        this.loading = false
        await this.displayImage(url)
      } 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)
      )
    },
    async displayImage(url) {
      const { output } = this.$refs
      const node = document.createElement('img')
      node.src = `${process.env.VUE_APP_BASE_API}` + url
      output.appendChild(node)
    },
    getFile() {
      // const { absolutePath, name } = this.$route.query
      // if (!absolutePath) return
      // this.loading = true
      // getFilePerview({ absolutePath }).then(async(res) => {
      //   const file = new File([res.data], name, {})
      //   this.handleChange({ target: { files: [file] }})
      //   this.loading = false
      // })
      const { fileId } = this.$route.query
      if (!fileId) return
      this.loading = true
      getImagePerview({ fileId }).then(async(res) => {
        const url = res.data
        this.handleChange(url)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.well {
  text-align: center;
  height: calc(100vh - 12px);
  img {
    height: 100%;
  }
}

</style>
