<template>
  <div style="display: inline-block">
    <el-button
      v-if="interceptTheSuffix(filePath, '.txt')"
      link
      type="primary"
      @click="fnPreviewTxt(filePath)"
    >
      [预览]
    </el-button>
    <el-button
      v-if="interceptTheSuffix(filePath, '.pdf')"
      text
      link
      type="primary"
      @click="fnPreviewPdf(filePath)"
    >
      [预览]
    </el-button>
    <el-button
      v-if="interceptTheSuffix(filePath, '.mp4')"
      link
      type="primary"
      @click="fnPreviewVideo(filePath)"
    >
      [预览]
    </el-button>
    <el-button
      v-if="
        interceptTheSuffix(filePath, '.jpg') ||
        interceptTheSuffix(filePath, '.png') ||
        interceptTheSuffix(filePath, '.jpeg')
      "
      link
      type="primary"
      @click="fnPreviewImage(filePath)"
    >
      [预览]
    </el-button>
    <a
      v-if="
        interceptTheSuffix(filePath, '.doc') ||
        interceptTheSuffix(filePath, '.xls') ||
        interceptTheSuffix(filePath, '.ppt') ||
        interceptTheSuffix(filePath, '.docx') ||
        interceptTheSuffix(filePath, '.xlsx') ||
        interceptTheSuffix(filePath, '.pptx')
      "
      :href="
        'http://view.officeapps.live.com/op/view.aspx?src=' +
        VITE_FILE_URL +
        filePath
      "
      target="_blank"
    >
      [预览]
    </a>
    <layout-pdf
      v-model:visible="data.pdfDialog.visible"
      :src="data.pdfDialog.src"
      append-to-body
    />
    <layout-txt
      v-model:visible="data.txtDialog.visible"
      :src="data.txtDialog.src"
      append-to-body
    />
    <layout-video
      v-model:visible="data.videoDialog.visible"
      :src="data.videoDialog.src"
      append-to-body
    />
    <el-dialog v-model="data.imageDialog.visible" title="图片" append-to-body>
      <img
        :src="data.imageDialog.src"
        alt="Preview Image"
        style="width: 100%; object-fit: scale-down"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { interceptTheSuffix } from "@/assets/js/utils.js";
import { reactive } from "vue";
import LayoutVideo from "@/components/video/index.vue";
import LayoutTxt from "@/components/txt/index.vue";
import LayoutPdf from "@/components/pdf/index.vue";

defineOptions({
  name: "LayoutMultipleAttachmentPreviews",
});
defineProps({
  filePath: {
    type: String,
    required: true,
    default: "",
  },
});
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const data = reactive({
  pdfDialog: {
    visible: false,
    src: "",
  },
  videoDialog: {
    visible: false,
    src: "",
  },
  txtDialog: {
    visible: false,
    src: "",
  },
  imageDialog: {
    visible: false,
    src: "",
  },
});
const fnPreviewTxt = async (FILEPATH) => {
  data.txtDialog.visible = true;
  data.txtDialog.src = FILEPATH;
};
const fnPreviewPdf = (FILEPATH) => {
  data.pdfDialog.visible = true;
  data.pdfDialog.src = FILEPATH;
};
const fnPreviewVideo = (FILEPATH) => {
  data.videoDialog.visible = true;
  data.videoDialog.src = FILEPATH;
};
const fnPreviewImage = (FILEPATH) => {
  data.imageDialog.visible = true;
  data.imageDialog.src = VITE_FILE_URL + FILEPATH;
};
</script>

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