<template>
  <div class="goods-img">
    <div id="wangeditor" ref="editorElem"></div>
  </div>
</template>

<script>
import E from "wangeditor";
import { batchUploadImage } from "@/api/module/goods";
export default {
  props: {
    description: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      allImg: [],
      editor: null,
    };
  },
  mounted() {
    let that = this;
    // 富文本编辑器
    const editor = new E("#wangeditor");
    editor.config.height = 500;
    editor.config.uploadImgShowBase64 = true;
    editor.config.uploadImgMaxSize = 20 * 1024 * 1024
    editor.config.showLinkImg = false;
   
    // editor.config.uploadImgMaxLength = 1
    editor.config.customUploadImg = function (files, insertImgFn) {
      if (files[0].type !== "image/png" && files[0].type !== "image/jpg" && files[0].type != "image/jpeg") {
        that.$message({
            message: '上传图片格式只支持png/jpg格式',
            type: "warning"
          });
          return false;
        }
        let isImgSize = (files[0].size / 1024 /1024) > 5;
        if (isImgSize) {
          that.$message({
            message: '上传图片大小不能超过5M',
            type: "warning"
          });
          return false;
        }
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      // 上传图片，返回结果，将图片插入到编辑器中
      that.getAllImg(files).then((res) => {
        let data = { data: [],type:3 };
        let imgBase = "";
        if (res.length > 0) {
          for (let i = 0; i < res.length; i++) {
            imgBase = "";
            imgBase = res[i].split(",")[1];
            if (imgBase) {
              data.data.push({ img_data: imgBase});
            }
          }

          batchUploadImage(data).then((res) => {
            if (res.code == 1) {
              if (
                res.code == 1 &&
                Array.isArray(res.data) &&
                res.data.length > 0
              ) {
                for (let i = 0; i < res.data.length; i++) {
                  if (res.data[i].image_url) {
                    insertImgFn(res.data[i].image_url);
                  }
                }
              }
            }else {
              this.$message({type: 'error',message: res.message ? res.message : '上传图片失败'});
            }
          });
        } // res.length > 0 end
      });

      // });
    };

    editor.create();
    this.editor = editor;

    if (this.description) {
      this.editor.txt.html(this.description);
    }

    // // 增加默认图片
    // if (this.description.indexOf("default-Spring-Festival-stbz") == -1 ) { 
    //   this.editor.txt.html('<p><img id="default-Spring-Festival-stbz" style="width:100%" src="/images/spring-festival-stbz.png" /></p>' +this.description);
    // }
  },
  methods: {
    initInfo() {
      this.editor = null;
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    async getAllImg(files) {
      let imgObj = { img_data: "" };
      let res = [];
      let orgRes = "";

      files.forEach((item) => {
        res.push(
          (async (item) => {
            return await this.getBase64(item);
          })(item)
        );
      });

      return await Promise.all(res);
    },
  },
};
</script>

<style scoped>
.goods-img {
  padding: 20px;
  background-color: #fff;
}
::v-deep .w-e-text-container {
  z-index: 1000 !important;
}
::v-deep .w-e-toolbar {
  z-index: 1001 !important;
}
</style>
