<template>
  <div class="upload_button">
    <el-button :loading="preLoading" class="preview" :icon="View" plain @click="handlePreview">预览</el-button>
    <el-button :loading="downloading" class="download" :icon="Download" @click="handleDownload">下载</el-button>
    <el-button type="danger" class="delete" :icon="Delete" plain @click="removeAudio">删除</el-button>
  </div>

  <el-dialog :title="fileShow.fileName" v-model="dialogVisible" width="50%" top="20px" append-to-body destroy-on-close>
    <div class="mti-file-container">
      <img :src="fileShow.src" alt="图片加载失败" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { View, Download, Delete } from "@element-plus/icons-vue";

import { downloadAttachment } from "@/api/common";

const props = defineProps({
  file: {
    type: Object,
    default() {
      return {};
    }
  }
});

const emit = defineEmits(["removeFile"]);

const preLoading = ref(false);
const downloading = ref(false);
const dialogVisible = ref(false);
const fileShow = ref({
  src: "",
  type: "",
  fileName: ""
});
// 预览
const handlePreview = () => {
  preLoading.value = true;
  downloadAttachment(props.file.fileId).then((res: any) => {
    console.log(props.file);
    if (props.file.fileType === "pdf" || props.file.fileType === "PDF") {
      const blob = new Blob([res], { type: "application/pdf;charset=UTF-8" });
      const bFile = URL.createObjectURL(blob);
      preLoading.value = false;
      window.open(bFile);
    } else {
      const bFile = URL.createObjectURL(res);
      fileShow.value = {
        src: bFile,
        type: props.file.type,
        fileName: props.file.fileName
      };
      preLoading.value = false;
      dialogVisible.value = true;
    }
  });
};

// 下载
const handleDownload = () => {
  downloadAttachment(props.file.fileId).then((res) => {
    downloading.value = true;
    const blob: any = res;
    const a = document.createElement("a");
    a.style.display = "none";
    a.download = decodeURI(props.file.fileName);
    try {
      a.href = window.URL.createObjectURL(blob);
    } catch (err) {
      ElMessage.warning("暂无文件信息.请通知开发人员导入文件模版");
    }
    a.click();
    a.remove();
    downloading.value = false;
    window.setTimeout(function () {
      window.URL.revokeObjectURL(blob);
    }, 0);
  });
};

// 删除
const removeAudio = () => {
  emit("removeFile", props.file.fileId);
};
</script>

<style lang="scss" scoped>
.mti-file-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  img {
    width: 100%;
  }
}

.upload_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  :deep(.el-button) {
    height: 32px;
    border-width: 1px;
    border-style: solid;
    margin-left: 10px;
    background: #fff;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
  }
  .delete {
    color: #dc281e;
    border-color: #df3d34;
  }
  .preview {
    color: #088a4e;
    border-color: #088a4e;
  }
  .download {
    color: #4069f2;
    border-color: #4069f2;
  }
}
</style>
