<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="100%"
    custom-class="preview__dialog"
    :title="fileRow.name"
    append-to-body
    :show-close="closeable"
  >
    <div class="preview__container">
      <Loading v-if="loading"></Loading>
      <FillPage type="2" v-if="errorMessage" :tip="errorMessage"></FillPage>
      <!-- 预览压缩文件-->
      <FileTree ref="fileTreeSearch" :fileTree="fileTree" :fileRow="fileRow" />
      <!-- 预览pdf.word等文件格式 -->
      <Pdf ref="pdfSearch" :src="src" />
      <!-- 预览excel.jpg.png.txt等文件格式 -->
      <IframeSrc
        ref="iframeSrcSearch"
        :iframeSrc="iframeSrc"
        :fileRow="fileRow"
      />
      <VideoPlayer ref="videoPlayer" :fileRow="fileRow" />
    </div>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
import req from '@/request.js'
import Pdf from '@/components/common/pdf.vue'
import IframeSrc from '@/components/common/iframeSrc.vue'
import FileTree from '@/components/common/fileTree.vue'
import VideoPlayer from '@/components/common/HtVideoPlayer.vue'
import Loading from '@/components/common/Loading.vue'
import FillPage from '@/components/common/FillPage.vue'

export default {
  components: {
    Pdf,
    IframeSrc,
    FileTree,
    VideoPlayer,
    FileTree,
    Loading,
    FillPage
  },
  props: {
    closeable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileRow: '',
      iframeSrc: '',
      src: '',
      fileTree: '',
      loading: false,
      errorMessage: null
    }
  },
  computed: mapState({
    header: state => {
      return {Authorization: `Bearer ${state.login.currentUser.token}`}
    },
    actionUrl: function() {
      return window.context.portal + '/system/file/v1/upload'
    }
  }),
  methods: {
    async preview(row) {
      const this_ = this
      this.loading = true
      this.errorMessage = null
      this.fileRow = ''
      this.dialogVisible = true
      await this.$store
        .dispatch('menu/onlinePreview', row.id)
        .then(data => {
          const loadError = '加载要预览的附件时出错'
          if (!data) {
            this.errorMessage = '要预览的附件不存在'
          } else if (data.result == 'fileNotSupported') {
            this.errorMessage = '当前附件格式不支持预览'
          } else if (
            typeof data == 'object' &&
            data.hasOwnProperty('state') &&
            (!data.state || !data.result)
          ) {
            this.errorMessage = data.message || loadError
          } else if (
            typeof data == 'object' &&
            data.hasOwnProperty('result') &&
            data.result === 'error'
          ) {
            this.errorMessage = loadError
          } else {
            this.fileRow = row
            this.src = null
            this.iframeSrc = null
            switch (data.result) {
              case 'html':
                this.iframeSrc = window.context.portal + data.pdfUrl
                this.$refs.iframeSrcSearch.handleOpen()
                break
              case 'txt':
                this.iframeSrc = window.context.portal + data.TxtUrl
                this.$refs.iframeSrcSearch.handleOpen()
                break
              case 'picture':
                this.iframeSrc = window.context.portal + data.currentUrl
                this.$refs.iframeSrcSearch.handleOpen()
                break
              case 'compress':
                this_.download(row.id)
                // this.fileTree = JSON.parse(data.fileTree).childList;
                // this.$refs.fileTreeSearch.handleOpen();
                this.errorMessage = '不支持压缩文件的在线预览'
                break
              case 'media':
                this_.download(row.id)
                // this.$refs.videoPlayer.show();
                this.errorMessage = '不支持视频的在线播放'
                break
              default:
                this.src = window.context.portal + data.pdfUrl
                this.$refs.pdfSearch.handleOpen()
                break
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    //下载附件
    download(id) {
      this.$store.dispatch('menu/downloadFile', id)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.el-dialog__wrapper ::v-deep {
  .preview__dialog {
    height: calc(100% - 60px);
    background: transparent;
    margin: 0 !important;

    .el-dialog__header {
      background: $--color-black;
      min-height: 20px;
      padding: 10px;
    }
    .el-dialog__title {
      color: $--color-white;
    }
    .el-dialog__headerbtn {
      top: 10px;
    }
    .el-dialog__close {
      color: $--color-white;
    }
    .el-dialog__body {
      width: 80%;
      background: $--color-white;
      height: calc(100% - 44px);
      margin: 0 auto;
    }
  }
}

.preview__container {
  height: 100%;
}
</style>
