<template>
  <div class="dec-modify-content dec-set-rich">
    <div class="dec-flex-list side">
      <span class="d-left big">背景颜色</span>
      <div class="d-right">
        <div style="float: right; margin-right: 40px">
          <color-picker :color="arg.bgColor" @change="ensure"></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">编辑内容</span>
    </div>
    <div class="main_rich">
      <vue-editor
        id="editor"
        useCustomImageHandler
        @image-added="handleImageAdded"
        v-model="arg.content"
      ></vue-editor>
    </div>
    <div class="surplus">最多可以输入10000字</div>
    <div class="d-error" v-if="!arg.content">富文本内容不能为空</div>
    <div class="d-tips">
      <em class="tip">T</em>
      小程序富文本展示以实际效果为准，左侧预览仅供参考
    </div>
  </div>
</template>

<script>
import colorPicker from "../../../modal/colorPicker";
import { VueEditor } from "vue2-editor";
export default {
  props: ["tab", "checked"],
  inject: ["decAxios"],
  components: {
    VueEditor,
    colorPicker,
  },
  data() {
    return {
      arg: null,
      newName: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
    if (!this.arg.bgColor) {
      this.arg.bgColor = "#dddddd";
    }
  },
  methods: {
    ensure(val) {
      this.arg.bgColor = val;
    },
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let fileName = file.name.split(".");
      let fileInfo = {
        fileCate: "2",
        fileTyle: fileName.length > 1 ? fileName[fileName.length - 1] : "",
        fileName: "",
        biz: "temp",
        file: file,
      };
      const that = this;
      function successCallback(imgurl) {
        let url = that.decAxios.decImgDomain(imgurl);
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      }
      function failCallback(mes) {
        mes && that.$message.error(mes);
      }

      const uploadHandle = (name) => {
        fileInfo.fileName = name;
        // 不对图片地址进行保存，仅仅获取图片地址
        this.decAxios
          .uploadSource(fileInfo, successCallback, failCallback, false)
          .then((res) => {
            if (res.code === 200) {
              !res.message && successCallback(res.url);
            } else {
              failCallback(res.message);
            }
          });
      };
      uploadHandle(fileName[0]);
    },
  },
};
</script>
