<template>
  <div :class="{'hide' : hideUpload}">
    <el-upload
      :file-list="fileList"
      :action="reqUrl"
      :headers="headers"
      :onSuccess="onSuccess"
      :accept="isImg ? 'image/*' : ''"
      list-type="picture-card"
      :onPreview="onPreview"
      :onRemove="onRemove"
      :beforeUpload="beforeUpload"
      :limit="limit || 1"
      :data="extraData"
      :disabled="disabled"
    >
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">{{tips}}</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <p v-if="sizeTips" class="tips">{{sizeTips}}</p>
  </div>
</template>

<script>
/*
 * value：当前上传的图片链接 String多图逗号隔开
 * limit：当前最大上传数，默认为1
 * isImg：true=限制上传类型为png或jpg，fales=不限制上传类型,默认为false
 * maxFileSize：限制文件上传最大值
 * subPath：图片上传目录
 * disabled: 是否禁用上传F
 */
export default {
  name: "UploadImg",
  props: [
    "value",
    "limit",
    "isImg",
    "maxFileSize",
    "subPath",
    "tip",
    "disabled",
    "sizeTips"
  ],
  data() {
    return {
      reqUrl: 'https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/' + app.api.upload,
      headers: app.headers(),
      dialogVisible: false,
      hideUpload: false,
      dialogImageUrl: "",
      tips: "",
      maxSize: 10 * 1024 * 1024,
      fileList: [],
      extraData: {} //上传额外参数
    };
  },
  watch: {
    value(newVal) {
      this.initData();
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.value) {
        this.fileList = [];
        let _value = this.value.split(",");
        for (let i = 0; i < _value.length; i++) {
          let obj = {
            url: _value[i],
            uid: i
          };
          this.fileList.push(obj);
        }
      }
      this.tips = this.tip;
      if (this.subPath) {
        this.extraData.subPath = this.subPath;
      }
      this.isMaxNumber();
      // if (this.isImg && this.maxFileSize) {
      //   this.tips =
      //     "只能上传jpg/png文件，且文件不超过" + this.maxFileSize + "K";
      // } else if (this.isImg) {
      //   this.tips = "只能上传jpg/png文件";
      // } else if (this.maxFileSize > 0) {
      //   this.tips = "文件不超过" + this.maxFileSize + "K";
      // }
    },
    onSuccess(res, file) {
      let nowFileList = [];
      if (res.code == 200) {
        this.fileList.push({
          url: res.content
        });
        this.isMaxNumber();
        for (let i = 0; i < this.fileList.length; i++) {
          nowFileList.push(this.fileList[i].url);
        }
        this.$emit("input", nowFileList.join(","));
      } else {
        this.$notify.error({
          title: "错误",
          message: res.errMsg
        });
      }
    },
    onPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      if (this.maxFileSize) {
        const isSize = file.size / 1024 < this.maxFileSize;
        if (!isSize) {
          this.$message.error(
            "上传图片大小不能超过 " + this.maxFileSize + "K!"
          );
          return false;
        }
      }

      return true;
    },
    onRemove(file, fileList) {
      let nowFileList = [];
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
          for (let i = 0; i < this.fileList.length; i++) {
            nowFileList.push(this.fileList[i].url);
          }
          this.isMaxNumber();
          break;
        }
      }
      this.$emit("input", nowFileList.join(","));
    },
    isMaxNumber() {
      if (this.limit) {
        this.hideUpload = this.limit <= this.fileList.length;
      } else {
        this.hideUpload = this.fileList.length > 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-upload__tip {
  // margin-top: -15px;
}
.hide /deep/.el-upload--picture-card {
  display: none;
}
.tips {
  margin: 0;
  font-size: 12px;
  line-height: 12px;
}
</style>