<template>
  <a-image class="cImg" v-if="isImage(itemdata.fileName)" :src="itemdata.url" />
  <img v-else-if="isDocument(itemdata.fileName)" src="@/assets/images/document.png" :alt="itemdata.fileName" />
  <img v-else-if="isRar(itemdata.fileName)" src="@/assets/images/rar.png" :alt="itemdata.fileName" />
  <img v-else-if="isMedia(itemdata.fileName)" src="@/assets/images/media.png" :alt="itemdata.fileName" />
  <img v-else src="@/assets/images/other.png" :alt="itemdata.fileName" />
  <a-button style="margin-top: 20px; margin-right: 10px" type="link" @click="download(itemdata)">下載</a-button>
  <a-button
    style="margin-top: 20px"
    v-if="isDocument(itemdata.fileName) || isPDF(itemdata.fileName)"
    type="primary"
    @click="previewFile(itemdata)"
    >預覽</a-button
  >
</template>

<script setup name="attachview">
  import { defineProps, toRef, defineExpose, ref, nextTick } from 'vue'
  import axios from 'axios'
  const pageCount = ref(0)
  const props = defineProps({
    itemdata: {
      type: Object,
      default: () => {},
      required: true
    }
  })
  const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp)$/i
  const documentExtensions = /\.(doc|docx|ppt|pptx|xls|xlsx)$/i
  const rarExtensions = /\.(rar|zip|7z|tar|iso|gzip)$/i
  const mediaExtensions = /\.(mp3|mp4|wmv|aiv|mov|flv|mkv)$/i
  const isImage = (filename) => {
    if (!filename) return false
    return imageExtensions.test(filename.toLowerCase())
  }
  const isDocument = (filename) => {
    if (!filename) return false
    return documentExtensions.test(filename.toLowerCase())
  }
  const isRar = (filename) => {
    if (!filename) return false
    return rarExtensions.test(filename.toLowerCase())
  }
  const isMedia = (filename) => {
    if (!filename) return false
    return mediaExtensions.test(filename.toLowerCase())
  }
  const previewFile = (pdfdata) => {
    axios
      .get(pdfdata.url, {
        responseType: 'arraybuffer',
        headers: {
          'Content-Disposition': 'inline;filename=' + encodeURIComponent(pdfdata.fileName)
        }
      })
      .then((response) => {
        console.log(response.status) // 輸出狀態碼
        console.log(response.headers) // 輸出響應頭信息
        var contype = response.headers['content-type']
        const blob = new Blob([response.data], { type: contype }) // 文件的content-type在后端接口中返回
        const url = window.URL.createObjectURL(blob)  // 以預覽模式在瀏覽器中打開文件
        window.open(url, pdfdata.fileName)
      })
  }
  const download = (data) => {
    window.open(data.url) // 打開文件的下載鏈接
  }
  // 類型判斷
  const isPDF = (filename) => /\.pdf$/i.test(filename)
</script>

<style scoped></style>