<template>
  <div class="edit-menus">
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="加粗"
        src="../../img/menu_bold.png"
        @mousedown="(event) => execCommand('bold', event)"
      />
    </div>
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="倾斜"
        src="../../img/menu_italic.png"
        @mousedown="(event) => execCommand('italic', event)"
      />
    </div>
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="下划线"
        src="../../img/menu_underline.png"
        @mousedown="(event) => execCommand('underline', event)"
      />
    </div>
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="上标"
        src="../../img/menu_superscript.png"
        @mousedown="(event) => execCommand('superscript', event)"
      />
    </div>
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="下标"
        src="../../img/menu_subscript.png"
        @mousedown="(event) => execCommand('subscript', event)"
      />
    </div>
    <div v-if="$parent.enableAnswerPoint" class="edit-menu-item">
      <img
        class="intLink"
        title="答题点"
        src="../../img/answer_point_x.png"
        @mousedown="addAnswerPoint"
      />
    </div>
    <div class="edit-menu-item">
      <img
        class="intLink"
        title="插入图片"
        src="../../img/menu_image.png"
        @mousedown="insertImage"
      />
      <input
        ref="ImageInput"
        type="file"
        accept=".jpg,.jpeg,.png"
        title="插入图片"
        @change="addImage"
      />
    </div>
    <div v-if="$parent.enableAudio" class="edit-menu-item">
      <img
        class="intLink"
        title="插入音频"
        src="../../img/menu_audio.png"
        @mousedown="$refs.AudioInput.click()"
      />
      <input
        ref="AudioInput"
        type="file"
        accept=".mp3"
        title="插入音频"
        @change="addAudio"
      />
    </div>
    <div v-if="$parent.enableFormula" class="edit-menu-item">
      <img
        class="intLink"
        title="插入公式"
        src="../../img/menu_formula.png"
        @mousedown="addFormula"
      />
    </div>

    <!-- <span class="intLink" title="显示源码" @click="setDocMode('HTML')">
      &lt;/&gt;
    </span>
    <span class="intLink padding-x" title="to JSON" @click="setDocMode('JSON')"
      >{ }</span
    > -->

    <!-- formula dialog -->
    <formula-dialog
      ref="FormulaDialog"
      @confirm="formulaConfirm"
    ></formula-dialog>
  </div>
</template>

<script>
import { setDocMode } from "./changeMode";
import { audioHandle } from "./audio";
import { imageHandle } from "./image";
import { answerPointHandle } from "./answerPoint";
import FormulaDialog from "./FormulaDialog";

export default {
  name: "VMenu",
  components: { FormulaDialog },
  data() {
    return {
      curEditFocusRange: null,
    };
  },
  methods: {
    setDocMode(type) {
      setDocMode(type, this.$parent.$refs.editor);
    },
    execCommand(command, event) {
      event.preventDefault();
      if (!this.checkEditorFocus()) {
        window.getSelection().removeAllRanges();
        this.$el.nextSibling.focus();
      } else {
        document.execCommand(command);
      }
    },
    /**
     * @param {Event} event
     */
    // 暂时不考虑音频上传
    async addAudio(event) {
      // console.log(event, event.target.files[0]);
      audioHandle.bind(this.$parent)(event);
    },
    /**
     * @param {Event} event
     */
    insertImage(event) {
      event.preventDefault();
      if (!this.checkEditorFocus()) {
        window.getSelection().removeAllRanges();
        this.$el.nextSibling.focus();
      } else {
        // console.log(event, event.target.files[0]);
        this.$refs.ImageInput.click();
      }
    },
    async addImage(event) {
      // console.log(event, event.target.files[0]);
      imageHandle.bind(this.$parent)(event);
    },
    /**
     * @param {Event} event
     */
    async addAnswerPoint(event) {
      event.preventDefault();
      if (!this.checkEditorFocus()) {
        window.getSelection().removeAllRanges();
        this.$el.nextSibling.focus();
      } else {
        answerPointHandle.bind(this.$parent)(event);
      }
    },
    checkEditorFocus() {
      const selection = window.getSelection();
      return selection.focusNode && this.checkDomInEditor(selection.focusNode);
    },
    /**
     * @param {Event} event
     */
    addFormula(event) {
      event.preventDefault();
      if (!this.checkEditorFocus()) {
        window.getSelection().removeAllRanges();
        this.$el.nextSibling.focus();
      }
      this.curEditFocusRange = window.getSelection().getRangeAt(0);
      this.$refs.FormulaDialog.open();
    },
    checkDomInEditor(dom) {
      const editorUid = this.$parent["_uid"];
      const siblingBodyCls = `v-editor-body-${editorUid}`;
      let parentNode = dom;
      while (
        !(
          (parentNode.className &&
            parentNode.className.includes(siblingBodyCls)) ||
          parentNode.nodeName === "BODY"
        )
      ) {
        parentNode = parentNode.parentNode;
      }

      return (
        parentNode.className && parentNode.className.includes(siblingBodyCls)
      );
    },
    formulaConfirm(result) {
      if (!this.curEditFocusRange) {
        const selection = window.getSelection();
        this.curEditFocusRange = selection.getRangeAt(0);
      }
      this.curEditFocusRange.deleteContents();

      const el = document.createElement("img");
      el.src = result.dataUrl;
      el.dataset.isImage = true;
      el.dataset.latex = result.latex;
      el.style = `width: ${result.param.width}px;height:${result.param.height}px;`;
      this.curEditFocusRange.insertNode(el);
      this.curEditFocusRange.collapse();
      this.$parent.emitJSON();
    },
  },
};
</script>

<style>
.edit-menu-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  padding: 4px 0;
  margin: 0 4px;
  overflow: hidden;
  cursor: pointer;
}
.edit-menu-item:hover img {
  opacity: 0.6;
}
.edit-menu-item img {
  display: block;
  position: relative;
  height: 100%;
  z-index: 8;
}
.edit-menu-item input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 30px;
  opacity: 0;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
}
</style>
