<template>
  <div>
    <input
      ref="inputer"
      :accept="accept"
      :multiple="multiple"
      class="fileUp"
      type="file"
      :disabled="disabled"
      name="file"
      @change="handleChange($event)"
    />
  </div>
</template>

<script>
import urlConfig from "@/apis/url-config";
import { get_business_companyNo, getToken } from "@/utils/auth";
import resToken from "@/mixins/resToken";
//Uploadcondition 用于判断个性化文件 //返回 false 就不会上传文件
//UploadErrorEvent 上传成功
//UploadErrorEvent 上传失败

export default {
  name: "fileUpload",
  mixins: [resToken],
  props: {
    //@reject 默认值
    accept: String, //上传文件类型
    multiple: {
      //是否可以上传多张图片
      type: Boolean,
      default: false,
    },
    disabled: {
      //是否禁用
      type: Boolean,
      default: false,
    },
    uploadcondition: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      imgAPI: urlConfig.baseURL,
    };
  },
  methods: {
    async handleChange(event) {
      // console.log(event)
      let that = this;
      let inputDOM1 = that.$refs.inputer;
      const files = inputDOM1.files;
      console.log(files);
      let length = files.length;
      if (length === 0) return;
      that.loading = that.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      for (let i = 0; i <= length; i++) {
        if (i === length) {
          this.loading.close();
          that.$refs.inputer.value = "";
        } else {
          let str = await that.httpupLoad(files, i);
          console.log(i, str);
          if (str === "error") {
            that.$emit("UploadErrorEvent");
          } else if (str === "break") {
            that.$emit("UploadErrorEvent", "break");
          } else {
            that.$emit("UploadSuccessEvent", str);
          }
        }
      }
    },
    async httpupLoad(files, i) {
      return new Promise(async (resolve, reject) => {
        let that = this;
        if (!this.uploadcondition(files[i])) {
          resolve("break");
        } else {
          let form = new FormData();
          form.append("image", files[i]);
          form.append("token", getToken());
          form.append("supplierNo", get_business_companyNo());
          const res = await axios.post(`${that.imgAPI}abutment/uploadImg`, form);
          const { status, data } = res ?? {};
          if (status === 200) {
            const { code, data: cdata } = data ?? {};
            if (code === 0) {
              const { url, name } = cdata[0];
              resolve({
                url: `${that.imgAPI}storage/${url}`,
                name: name,
              });
            } else if (code >= 101 && code <= 104) {
              resolve({
                url: `noToken`,
                name: "",
              });
            } else if (code === 105 || code === 106) {
              resolve({
                url: `noSupplierNo`,
                name: "",
              });
            } else {
              resolve("break");
            }
          } else {
            reject();
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileUp {
  opacity: 0;
  width: 100%;
  height: 100%;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  &:hover {
    cursor: pointer;
  }
}
</style>
