/*  上传组件
 * 用法<yl-upload :fileId="fileId" @getUpload="getUpload" />
 */
<template>
  <div>
    
    <div v-if="fileId">
      <img
        @click="check(fileId)"
        :src="
          accept === '.pdf'
            ? require('@/assets/PDF.png')
            : require('@/assets/doc.png')
        "
        alt
        style="width: 35px; height: 35px"
      />
      <i
        class="el-icon-close"
        @click="deltabpdf(fileId)"
        style="
          cursor: pointer;
          position: absolute;
          top: 13px;
          left: 72px;
          color: #808287;
        "
      ></i>
    </div>
    <el-upload
      v-else
      v-loading="loading"
      element-loading-text="上传中···"
      action=""
      :on-change="handleChange"
      :show-file-list="false"
      :file-list="fileList"
      :accept="accept"
      :auto-upload="false"
      ref="upload"
    >
      <el-button type="primary" :disabled="canUp">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { uploadData, uploadCheck } from "@/api/user";

export default {
  name: "ylUpload",
  props: {
    // 文档类别
    accept: {
      type: Number,
      default: ".pdf"
    },
    // 最大M数
    maxSize: {
      type: Number,
      default: 10
    },
    // 传递的值
    fileId: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    // 上传文件
    handleChange(file) {
      this.loading = true;
      const max = this.maxSize * 1024 * 1024;
      if (file.size > max) {
        this.$message({
          message: "上传文件大小不能超过" + this.maxSize + "M!",
          type: "warning"
        });
        this.loading = false;
        return false;
      } else if (file.name.indexOf(",") !== -1) {
        this.$message.warning("文件名称不能存在英文逗号");
        this.loading = false;
        return false;
      } else if (this.accept && this.accept.indexOf("/") === -1) {
        const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        const acceptArr = this.accept
          .replace(/\./g, "")
          .toLowerCase()
          .split(",");
        if (!acceptArr.includes(suffix)) {
          this.$message.warning(`仅支持上传${acceptArr.join("、")}格式文件`);
          this.loading = false;
          return false;
        }
      }

      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = async (e) => {
        console.log(e)
        const fileCode = e.target.result;
        const data = {
          fileName: file.name,
          itemcode: "haier",
          fileContent: fileCode
        };
        const res = await uploadData(data, this);
        if (res.success == true) {
          this.$emit("getUpload", res.data.id);
          this.loading = false;
        }
      };
    },
    // 表单点击预览
    check(id) {
      let file = {
        id: id
      };
      uploadCheck(file).then((res) => {
        if (res.success == true) {
          const a = this.dataURLtoBlob(res.data.fileContent);
          window.open(a);
        }
      });
    },
    deltabpdf(id) {
      this.$emit("getUpload", "");
    }
  }
};
</script>

<style>
</style>