<template>
  <el-dialog v-model="visible" :width="width" append-to-body show-close :close-on-click-modal="false">
    <template #header>
      <div class="dialog-title-container">
        <span class="title-label" style="color: #fff; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; line-height: 26px;"> <el-icon> <Document /> </el-icon>预览</span>
      </div>
    </template>
    <div>
      <div style="padding: 8px 24px 16px 24px">
        <vue-office-excel v-if="['xlsx', 'xls'].includes(fileExtension)" :src="`${baseUrl}${form.fileUrl}`" style="width: 100%; min-height: 800px;"></vue-office-excel>
        <vue-office-docx v-else-if="['doc', 'docx'].includes(fileExtension)" :src="`${baseUrl}${form.fileUrl}`" style="width: 100%; min-height: 800px;"></vue-office-docx>
        <vue-office-pdf v-else-if="['pdf'].includes(fileExtension)" :src="`${baseUrl}${form.fileUrl}`" style="width: 100%; min-height: 800px;"></vue-office-pdf>
        <iframe v-else-if="['txt',].includes(fileExtension)" :src="`${baseUrl}${form.fileUrl}`" style="width: 100%; min-height: 800px;"></iframe>
        <el-image v-else-if="['jpg', 'png'].includes(fileExtension)" style="width: 100%; min-height: 800px" :src="`${baseUrl}${form.fileUrl}`" 
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="[`${baseUrl}${form.fileUrl}`]"/>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
  import { reactive } from "vue";
  import VueOfficeDocx from '@vue-office/docx';
  import '@vue-office/docx/lib/index.css'; 
  import VueOfficeExcel from '@vue-office/excel';
  import '@vue-office/excel/lib/index.css'; 
  import VueOfficePdf from '@vue-office/pdf';
  import '@vue-office/pdf/lib/index.js'; 
  const { proxy } = getCurrentInstance();

  const props = defineProps({
    getList: {
      type: Function,
      default: () => { },
    },
    width: {
      type: String,
      default: "1200px",
    },
  });

  const fileExtension = ref('')
  // import api from '@/api/biz/fileStorage'
  const data = reactive({
    visible: false,
    list: [],
    total: 0,
    query: {
      name: "",
      total: 0,
      pageSize: 15,
      pageNum: 1,
    },
    files: [],
    months: [],
    form: {},
    selection: [],
    baseUrl: import.meta.env.VITE_APP_BASE_API,
    options: {},
  });
  const {
    visible,
    baseUrl,
    form,
  } = toRefs(data);
  function open(arg) {
    visible.value = true;
    form.value = arg;
    // loading.value = true
    fileExtension.value = arg.fileName.match(/\.([^.]+)$/)[1];
  }
  /**
   * 对话框关闭 事件
   */
  function close() {
    visible.value = false;
  }
 
  defineExpose({
    open,
  });
</script>