<!--
 * @Author: wrh
 * @Date: 2024-06-04 18:18:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-16 10:38:51
-->
<template>
  <div v-loading="loading">
    <vue-office-docx :src="url" v-if="fileType == 'docx'" />
    <vue-office-excel :src="url" v-if="fileType == 'xlsx'" />
    <vue-office-pdf :src="url" v-if="fileType == 'pdf'"></vue-office-pdf>
    <div v-if="fileType == 'doc' || fileType == 'xls' || fileType == 'zip' || fileType == 'rar'">
      <el-empty :image-size="200" :description="'抱歉，' + fileType + '类型文件不支持在线预览，请下载到本地查看'">
        <el-link type="primary" :href="url" :underline="false" target="_blank">
          <span>立即下载</span>
        </el-link>
      </el-empty>
    </div>

  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
      loading: true,
      url: "",
      fileType: ""
    };
  },
  created() {
    this.loading = true;
    if (this.$route.query.url) {
      this.url = this.$route.query.url;
      this.getFileType();
    }
  },
  methods: {
    getFileType() {
      let suffix = this.url.split(".").slice(-1);
      this.fileType = suffix;
      this.loading = false;
    }
  },
};
</script>

<style lang="scss" scoped></style>