<!--  -->
<template>
  <div class="out">
    <el-upload
      :class="{ hide: hideUpload }"
      ref="imgListRef"
      :limit="1"
      :file-list="fileList"
      :on-change="onUploadChange"
      :before-upload="beforeFileUpload"
      action="#"
      :accept="imgType"
      list-type="picture-card"
      :auto-upload="false"
    >
      <i class="el-icon-plus"></i>
      <div
        slot="file"
        slot-scope="{ file }"
        style="position: relative; height: 100%"
      >
        <!-- pdf -->
        <img
          class="el-upload-list__item-thumbnail"
          v-if="!isPdf"
          :src="file.url"
          alt
        />
        <img
          class="el-upload-list__item-thumbnail"
          v-else
          src="~@/assets/images/pdf.png"
          alt
        />
        <div v-if="isPdf" class="pdf-name">{{ pdfName }}</div>

        <!-- ofd -->
        <img
          class="el-upload-list__item-thumbnail"
          v-if="!isOfd"
          :src="file.url"
          alt
        />
        <img class="el-upload-list__item-thumbnail" v-else alt />
        <div v-if="isOfd" class="pdf-name">{{ ofdName }}</div>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleRemove(file, fileList)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <div class="title">支持图片、pdf、ofd格式上传</div>
    <div class="inside">
      <el-button type="primary" @click="handleScan" size="small" plain
        >发票识别</el-button
      >
      <el-button type="primary" @click="handleCheck" size="small" plain
        >发票验真</el-button
      >
    </div>
    <el-image-viewer
      v-if="dialogVisible"
      :zIndex="9999"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
    <!-- 文件在线预览 -->
    <FilePreview
      :previewFile="previewFile"
      :fileUrl="fileUrl"
      @update="previewFile = false"
    />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { uploadInvoiceApi } from "@/api/common";
export default {
  name: "",
  props: {
    files: Array,
  },
  watch: {
    files: {
      handler(list) {
        this.fileList = list;
        if (list.length >= 1) {
          this.hideUpload = true;
        } else {
          this.hideUpload = false;
        }
      },
    },
    deep: true,
  },
  data() {
    return {
      hideUpload: false,
      imgType: ".jpeg, .jpg, .png, .pdf ,.ofd",
      fileList: [],
      dialogVisible: false,
      isPdf: false,
      isOfd: false,
      pdfName: null,
      ofdName: null,
      imgList: null,
      fileUrl: null,
      previewFile: false,
      invoiceForm: {},
    };
  },
  components: {
    ElImageViewer,
    FilePreview: () => import("@/components/FilePreview"),
  },
  computed: {},
  methods: {
    // 删除照片时的回调方法
    handleRemove(file, files) {
      this.fileList = [];
      this.$emit("onConfirm", this.fileList);
      return false;
    },
    // 上传照片时的回调方法
    onUploadChange(file, fileList) {
      this.beforeFileUpload(file, fileList);
    },
    beforeFileUpload(file, fileList) {
      console.log(file);
      //选择图片后做图片格式限制（手动上传图片时，before-upload钩子无效，使用此方法替代）
      const isImage =
        file.raw.type == "image/png" ||
        file.raw.type == "image/jpg" ||
        file.raw.type == "image/jpeg" ||
        file.raw.type == "application/pdf" ||
        file.raw.type == "application/ofd";
      // const isLt5M = file.size < 1024 * 1024 * 5;
      if (!isImage) {
        this.$message.warning("上传只能是png,jpg,jpeg格式!");
      }
      if (file.raw.type == "application/pdf") {
        this.isPdf = true;
        this.pdfName = file.raw.name;
      } else {
        this.isPdf = false;
      }
      if (file.raw.type == "application/ofd") {
        this.isOfd = true;
        this.pdfName = file.raw.name;
      } else {
        this.isOfd = false;
      }
      let FormDatas = new FormData();
      FormDatas.append("multipartFile", file.raw);
      this.$modal.loading("正在上传，请稍候...");
      uploadInvoiceApi(FormDatas)
        .then((res) => {
          this.invoiceForm = res.data;
          this.fileList.push({ name: file.name, url: res.data.fileUrl }); //成功过后手动将文件添加到展示列表里
          this.$emit("onConfirm", this.fileList);
          this.$modal.closeLoading();
        })
        .catch(() => {
          this.fileList = [];
          this.$modal.closeLoading();
        });
    },
    closeImgViewer() {
      this.dialogVisible = false;
    },
    // 图片预览
    handlePictureCardPreview(file) {
      if (file.name.indexOf(".pdf") > -1) {
        this.fileUrl = this.fileList[0].url;
        this.previewFile = true;
      } else {
        this.imgList = [file.url];
        this.dialogVisible = true;
      }
    },
    // 发票识别
    handleScan() {
      if (this.fileList.length) {
        this.$emit("onScan", this.invoiceForm);
      } else {
        this.$fm("请先上传发票!");
      }
    },
    // 发票验真
    handleCheck() {
      if (this.fileList.length) {
        this.$emit("onCheck");
      } else {
        this.$fm("请先上传发票!");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/form/index.scss";
.pdf-name {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 115px;
  line-height: 15px;
  font-size: smaller;
  bottom: 0;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  // height: auto !important;
  object-fit: cover;
}
</style>
