<template>
  <div :id="ids" class="sheet-title-Editor"></div>
</template>

<script>
import E from "wangeditor";
import {
  PAPER_W,
  PAPER_H,
  SVG_BORDER_PROP,
  CONTENT_MT,
  CONTENT_ML,
  ANCHORPROP,
  CONTENT_START_X,
  CONTENT_START_Y,
  INFO_W,
  INFO_H,
  INFO_ITEM_GAP,
  INFO_ITEM_MARGIN,
  ID_LENGTH,
  INFO_LEFT_X,
  INFO_LEFT_W,
  ID_TITLE_H,
  ID_TITLE_Y,
  NUMBER_CELL_H,
  NUMBER_ITEM_W,
  NUMBER_ITEM_H,
  NUMBER_ITEM_MT,
  NUMBER_ITEM_ML,
} from "@/utils/sheetConfig.js";
export default {
  props: {
    ids: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    items: {
      type: Array,
      default: () => [],
    },
    allItems: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myEditor: null,
      completeItems: [],
      isNewPage: false,
      pageCount: 1,
    };
  },
  methods: {
    define({ editor, prop, change, validate }) {
      if (typeof validate != "function") {
        validate = function (value) {
          return {
            valid: true, // 验证的结果。true: 验证通过；false: 验证失败。
            data: value, // 处理后的值，不需要处理直接返回即可
          };
        };
      }
      let temp = editor.config[prop];
      Object.defineProperty(editor.config, prop, {
        enumerable: true,
        configurable: true,
        get: function () {
          return temp;
        },
        set: function (value) {
          const { valid, data } = validate(value);
          if (valid && data !== temp) {
            temp = data;
            change(temp);
          }
          return temp;
        },
      });
    },

    // 拖拽改变编辑器的高度
    dragReSize(editor) {
		let that = this
      // 将一个 HTML 字符串转换为由 wangEditor.$（一个类 jQuery 的东东） 包裹的实例对象
      const reel = E.$(
        '<div style="position: absolute;bottom: 0;left: 0;width: 100%;background-color: none;cursor: n-resize;border-top: 3px solid transparent;"></div>'
      );
      // 将这个实例添加到 wangEditor 的编辑区容器中
      editor.$textContainerElem.append(reel); // 添加鼠标事件
      reel.on("mousedown", function mousedown(down) {
        let last = down; // 鼠标移动，更新 wangEditor 实例中的 height 配置项
        function mousemove(move) {
          editor.config.height += move.clientY - last.clientY;
          last = move;
        } // 在鼠标弹起事件中移除事件监听
        function mouseup() {
          document.removeEventListener("mousemove", mousemove);
          document.removeEventListener("mouseup", mouseup);
		  that.$EventBus.$emit('doRefresh')
        }
        // 将鼠标事件绑定到 document 上
        document.addEventListener("mousemove", mousemove);
        document.addEventListener("mouseup", mouseup);
      });
    },

    equalAltitude({ editor, max, min }) {
      editor.config.onchange = function () {
        const last = Array.prototype.slice.call(
          editor.$textElem.elems[0].children,
          -1
        )[0];
        if (last) {
          const height = last.offsetTop + last.clientHeight;
          // editor.config.height = editor.config.height = height < min ? min : height > max ? max : height
        }
      };
    },

    doRenderContent(content){
      this.myEditor.txt.clear()
      this.myEditor.txt.html(content);
    }
  },
  mounted() {
    const editor = new E("#" + this.ids);
    editor.config.height = this.type === "0" ? "" : 30;

    this.define({
      editor: editor,
      prop: "height",
      change(value) {
        editor.$textContainerElem.css("height", `${value}px`);
      },
      validate(value) {
        const data = parseFloat(value);
        return {
          valid: !isNaN(data), // 数据校验：设置的值只能为数字
          data: data, // 此处返回的是被处理后的数据
        };
      },
    });
    // 因为动态更新编辑器高度涉及到 wangEditor 的 onchange 回调，
    // 而 onchange 必须在 create 前的配置才有效，所以放在 create 前。
    this.equalAltitude({ editor: editor });

    editor.config.menus = [
      "bold",
      "fontSize",
      "fontName",
      "italic",
      "underline",
      "strikeThrough",
      "indent",
      "lineHeight",
      "foreColor",
      "backColor",
      "undo",
    ];

    editor.config.onfocus = (html) => {
      let toolbarDom = document.getElementById(this.ids).getElementsByClassName("w-e-toolbar")[0]
      let editorDom = document.getElementById(this.ids).getElementsByClassName("w-e-text")[0]
      editorDom.style.border = '1px solid #000'  
      toolbarDom.style.display = "flex";
    };

    editor.config.onblur = (html) => {
      let toolbarDom = document.getElementById(this.ids).getElementsByClassName("w-e-toolbar")[0]
      let editorDom = document.getElementById(this.ids).getElementsByClassName("w-e-text")[0]
      editorDom.style.border = '0 solid #000'  
      toolbarDom.style.display = "none";
    };
    editor.config.focus = false;
    editor.config.showFullScreen = false;
    editor.config.placeholder = "";
    editor.create();
    this.dragReSize(editor);
    this.myEditor = editor;
  },
  watch: {
    content: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doRenderContent('<p style="font-weight:bold;color:#000">' + n + '</p>');
        })
      },
      immediate: true,
	  deep:true
    },
  },
};
</script>

<style>
.sheet-title-Editor {
  position: relative;
  width: 590px;
  margin: 10px auto 0 auto;
  border: 0 solid #000 !important;
}

.sheet-title-Editor .w-e-toolbar {
  display: none;
  position: absolute;
  top: -32px;
  left: -1px;
  width: 590px;
  border: 1px solid #000 !important;
  border-bottom: none !important;
}

.sheet-title-Editor .w-e-text-container {
  border: none !important;
  z-index: 1 !important;
}

.sheet-title-Editor .w-e-text {
  font-size: 12px;
  padding: 0;
  overflow: hidden !important;
}

.sheet-title-Editor .w-e-toolbar .w-e-menu {
  width: 30px;
  height: 30px;
}

.sheet-title-Editor .underline {
  /* text-decoration: underline; */
  border-bottom: 1px solid #333;
  margin: 10px;
  display: inline-block;
}

.sheet-title-Editor .complete-item {
  margin: 0 4px;
  display: inline-block;
}
</style>