<template>
    <span>
        <el-link type="primary" @click="openUploadClick">文件({{ list.length }})</el-link>
        <ed-dialog ref="edDialog" :showOkBtn="false" :visible.sync="visible" title="预览" @close="visible = false">
            <el-table :data="list" border>
                <el-table-column label="文件名称" prop="name">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="preview(scope.row)">预览</el-button>
                        <el-button size="small" type="text" @click="uploadHandleDownload(scope.row)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </ed-dialog>
        <ed-dialog ref="iframeDialog" :fullscreen="true" :showOkBtn="false" :title="title"
                   :visible.sync="iframeVisible" @close="iframeVisible = false">
            <div v-loading="loading" style="height: 100%;">
                <iframe ref="Iframe" :src="src" class="iframeClass" height="100%" width="100%"></iframe>
            </div>
        </ed-dialog>
    </span>
</template>

<script>
import {getFileAccessHttpUrl, DefaultUrl } from "../../api/easyData";
import {encode}               from "js-base64";

export default {
  name: "FileView",
  props: {
    list: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      visible: false,
      iframeVisible: false,
      src: '',
      title: '',
      loading: false,
    }
  },
  methods: {
    openUploadClick() {
      this.visible = true
    },
    preview(cellValue) {
      this.title = cellValue.name
      let imageTypes = ['jpg', 'gif', 'jpeg', 'png']
      const imageList = imageTypes.includes(cellValue.type) ? [{...cellValue, url: this._makeUrl(cellValue)}] : []
      const fileUrl = !imageTypes.includes(cellValue.type) ? [this._makeUrl(cellValue)] : []
      if (fileUrl.length > 0) {
        this.src = this.$EdFrame.FILE_PREVIEW_URL + encodeURIComponent(encode(fileUrl.join('|')))
        this.iframeVisible = true
        this.$nextTick(() => this.iframeLoad())
      } else if (imageList.length > 0) {
        this.$viewerApi({images: imageList})
      }
    },
    /**
     * @name 文件下载
     * @param file
     * @description 新窗口打开
     */
    uploadHandleDownload(file) {
      if (file.filePath) window.open(this._makeUrl(file))
    },
    /** 把file对象转换为下载url全地址 */
    _makeUrl(file) {
      return getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath)
    },
    iframeLoad() {
      this.loading = true;
      const iframe = this.$refs.Iframe;
      console.info(this.$refs, iframe)
      if (iframe.attachEvent) { // IE
        iframe.attachEvent('onload', () => {
          this.loading = false;
        });
      } else { // 非IE
        iframe.onload = () => {
          this.loading = false;
        };
      }
    }
  }
}
</script>

<style scoped>
.iframeClass {
  border: none;
}
</style>
