import { getAnswerPointImg } from "../utils";
/**
 * 和clipboard.js部分内容相同，注意同步修改
 *
 * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
 */
export async function answerPointHandle() {
  this.$refs.editor.focus();

  // let sel, range;
  // if (window.getSelection) {
  //   sel = window.getSelection();
  // }

  const node = document.createElement("img");
  node.src = getAnswerPointImg("X");
  node.dataset.isAnswerPoint = true;
  node.dataset.isAnswerPointX = true;
  node.dataset.order = 0;

  document.execCommand("insertHTML", false, node.outerHTML);
}

/**
 * 答题点拖动后更新，通过判断是否有 [data-is-answer-point-x] 来判断是否是拖动
 * 因为drag会触发两次input，第一次事件是删除，要忽略第一次事件
 *
 * @this {Object} VEditor 因为VEditor会带很多选项，所以绑定this传过来
 */
export async function answerPointRebuild($event) {
  // console.log($event.inputType);
  if ($event.inputType === "deleteByDrag") return;

  const answerPoints = this.$refs.editor.querySelectorAll(
    "[data-is-answer-point]"
  );
  let answerPointsChanged = [];
  [...answerPoints].forEach((answerPoint, index) => {
    answerPointsChanged.push(answerPoint.dataset.order);
    answerPoint.dataset.order = index + 1;
    answerPoint.src = getAnswerPointImg(index + 1);
  });
  this.$emit("answer-point-changed", answerPointsChanged);
}
