<template>
    <el-dialog
      :close-on-click-modal="false"
      title="预览文件"
      :visible.sync="dialogVisible"
      width="70%"
      :destroy-on-close="true"
      :append-to-body="true"
      :close-on-press-escape="false"
      @close="handleClose"
      style="height: 100%"
    >
      <template v-if="isTxt">
        <!-- 在文本框中预览文件内容 -->
        <el-input type="textarea" :rows="30" v-model="resultContentObj" >
        </el-input>
      </template>
      <template v-if="isDocx">
        <vue-office-docx
          :src="docxData"
          style="height: 600px;"
          @rendered="rendered"
        />
      </template>
      <template v-if="isPdf">
        <vue-office-pdf
          :src="pdfFileData"
          style="height: 600px;"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </template>
      <template v-if="isVideos">
        <div class="input_video">
          <video-player  class="video-player vjs-custom-skin"
                         ref="videoPlayer"
                         :playsinline="true"
                         :options="playerOptions"
          ></video-player>
        </div>
      </template>
    </el-dialog>
</template>

<script>
import axios from 'axios'
import {
  getToken
} from "@/utils/auth";
import { videoPlayer } from "vue-video-player";

export default {
  components: { videoPlayer},

  props: {
    uploadUrl: {
      type: String,
      required: false
    },
    // 是否多选
    isMultiple: {
      type: Boolean,
      default() {
        return false
      },
      required: false
    },
    // 文件类型
    type: {
      type: Array,
      default() {
        return []
      },
      required: false
    },
    //上传类型
    acceptType: {
      type: String,
      required: false
    },
    // 上传数量
    limit: {
      type: Number,
      default() {
        return 1
      },
      required: false
    },
    // 文件
    dataFile: {
      type: [Object, Array, String],
      default() {
        return ''
      },
      required: false
    },
    isDetail: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      // txt
      dialogVisible:false,
      isTxt:false,
      resultContentObj:'',
      // docx
      isDocx:false,
      docxData: null,
      //pdf文件
      isPdf:false,
      pdfFileData: null, // 默认文档类型
      previewLoading:false,
      previewUseFront: "txt,doc,docx,pdf",
      isVideos:false,
      // 视频播放
      playerOptions : {
        playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay : false, //如果true,浏览器准备好时开始回放。
        muted : false, // 默认情况下将会消除任何音频。
        loop : false, // 视频一结束就重新开始。
        preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language : 'zh-CN',
        aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources : [],
        poster : "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar : {
          timeDivider : true,//当前时间和持续时间的分隔符
          durationDisplay : true,//显示持续时间
          remainingTimeDisplay : false,//是否显示剩余时间功能
          fullscreenToggle : true  //全屏按钮
        }
      }
    };
  },
  watch: {
  },
  methods: {
    //前端组件预览
    frontModulePreview(row){
      let self = this
      self.initPreviewData()
      self.previewLoading = true
      if(row.fileName.endsWith(".jpg") || row.fileName.endsWith(".png")){
        this.$viewerApi({images: [row.fileUrl]})
        self.previewLoading = false
        self.$emit('previewLoadingClose')
        return
      }
      if(row.fileName.endsWith(".mp4") || row.fileName.endsWith(".webm")){
        if(row.fileName.endsWith(".mp4")){
          this.playerOptions.sources = [
            {
              src: row.fileUrl,
              type: 'video/mp4'
            }
          ]
        }else{
          this.playerOptions.sources = [
            {
              src: row.fileUrl,
              type: 'video/webm'
            }
          ]
        }

        self.dialogVisible = true
        self.isVideos = true;
        self.previewLoading = false
        self.$emit('previewLoadingClose')
        return
      }

      axios({
        method: 'post',
        url: process.env.VUE_APP_BASE_API + "/common/preview/download",
        responseType: 'blob',
        data: {
          'filePath': row.filePath,
          'fileOldName': row.fileOldName
        },
        headers: { 'Authorization': 'Bearer ' + getToken() }
      }).then(res => {
        const content = res.data;
        if(row.fileName.endsWith(".txt")){
          self.dialogVisible = true
          self.previewLoading = false
          let blob = new Blob([res.data]);
          blob.text().then(data =>{
            self.resultContentObj = data;
            self.isTxt = true;
            self.previewLoading = false; // 确保在数据处理完成后关闭加载状态
            self.$emit('previewLoadingClose')
          })
          // self.previewLoading = false
        }else if (row.fileName.endsWith(".docx")) {
          // renderAsync(response.data, self.$refs.file);
          self.isDocx = true
          self.dialogVisible = true; // 打开预览弹窗
          content.arrayBuffer().then(res=>{
            self.docxData = res
          })
          self.previewLoading = false
          self.$emit('previewLoadingClose')

        }else if(row.fileName.endsWith(".doc") || row.fileName.endsWith(".pdf")){
          self.isPdf = true
          self.dialogVisible = true; // 打开预览弹窗
          content.arrayBuffer().then(res=>{
            self.pdfFileData = res
          })
          self.previewLoading = false
          self.$emit('previewLoadingClose')
        }
      }).catch(err => {
        console.info("err===============", err)
        self.previewLoading = false
        self.$emit('previewLoadingClose')
      });
    },
    //初始化预览组件
    initPreviewData(){
      this.isTxt = false
      this.isDocx = false
      this.isPdf = false
      this.resultcontentObj = ''
      this.docxData = null
      this.pdfFileData = null
    },
    rendered(){
      console.log("渲染完成1")
    },
    renderedHandler(){
      console.log("pdf渲染完成2")
    },
    errorHandler(){
      console.log("pdf渲染失败3")
    },
    handleClose(){
      this.$emit("previewClose");
    }
  }
};
</script>
