<template>
  <!-- 右鍵菜單 -->
  <div>
    <div
      v-if="menuVisible"
      @mousedown.prevent
      class="custom-menu"
      :style="{ top: menuY + 'px', left: menuX + 'px' }"
    >
      <ul>
        <li @click="copyText">復(fù)制</li>
        <li @click="cutText">剪切</li>
        <li @click="pasteText">粘貼</li>
      </ul>
    </div>
    <div id="vditor" @contextmenu.prevent="showMenu"></div>
  </div>
</template>

<script setup>
// 安裝插件vditor
import Vditor from "vditor";
import "vditor/dist/index.css";
import { ref, onMounted } from "vue";
onMounted(() => {
  document.addEventListener("click", hideMenu); // 初始化全局點(diǎn)擊事件，隱藏右鍵菜單
  initVditor();
});
const vditor = ref(null); // 使用 ref 來存儲 vditor 實(shí)例
const initVditor = () => {
  if (vditor.value) {
    vditor.value.setValue("你好，這是測試");
  } else {
    console.log("初始化macket", import.meta.env.MODE);
    vditor.value = new Vditor("vditor", {
      width: "100%",
      cdn: import.meta.env.MODE === "development" ? "./public" : "./",
      placeholder: "請輸入內(nèi)容...",
      toolbar: [],
      preview: {
        markdown: {
          sanitize: false,
        },
      },
      after() {
        vditor.value.setValue("你好，這是測試"); // 一次性設(shè)置所有內(nèi)容，并移除開頭的多余空格
      },
      input(value) {
        const markdownContent = vditor.value.getValue();
      },
    });
  }
};
// 用于控制右鍵菜單的顯示和位置
const menuVisible = ref(false);
const menuX = ref(0);
const menuY = ref(0);
const copiedText = ref(""); // 用于保存復(fù)制或剪切的文本
let lastFocusedElement = null; // 用于保存最后聚焦的元素
const fuzhitext = ref("");
// 顯示右鍵菜單
function showMenu(event) {
  copiedText.value = vditor.value.getSelection();
  menuVisible.value = true;
  menuX.value = event.clientX;
  menuY.value = event.clientY;
  document.addEventListener("click", hideMenu); // 點(diǎn)擊其他地方隱藏菜單
  // 保存當(dāng)前聚焦的元素
  lastFocusedElement = document.activeElement;
  console.log(lastFocusedElement);
}
// 隱藏右鍵菜單
function hideMenu() {
  menuVisible.value = false;
  //   document.removeEventListener('click', hideMenu);
}
// 復(fù)制選中的文本
function copyText() {
  if (copiedText.value) {
    console.log("復(fù)制的內(nèi)容:", copiedText.value);
    fuzhitext.value = copiedText.value;
  } else {
    console.log("沒有選中的文本");
  }
  // 延遲聚焦以保持選中狀態(tài)
  setTimeout(() => {
    vditor.value.focus();
  }, 0);
  vditor.value.updateValue(copiedText.value);
  hideMenu();
}
// 粘貼文本
function pasteText() {
  if (fuzhitext.value) {
    vditor.value.deleteValue();
    // 這里你可以使用插入內(nèi)容的API來粘貼文本
    vditor.value.insertValue(fuzhitext.value);
  }
  setTimeout(() => {
    lastFocusedElement.focus();
  }, 0);
  hideMenu();
}
// 剪切
function cutText() {
  if (copiedText.value) {
    console.log("復(fù)制的內(nèi)容:", copiedText.value);
    fuzhitext.value = copiedText.value;
  } else {
    console.log("沒有選中的文本");
  }
  vditor.value.deleteValue();
  setTimeout(() => {
    lastFocusedElement.focus();
  }, 0);
  hideMenu();
}
</script>
<style scoped>
.custom-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: slideDown 0.2s ease-in-out; /* 添加下拉動畫 */
}
.custom-menu ul {
  list-style-type: none;
  padding: 0; /* 移除內(nèi)邊距 */
  margin: 0; /* 移除外邊距 */
  min-width: 95px;
}
.custom-menu ul li {
  padding: 8px 30px; /* 增加上下內(nèi)邊距 */
  cursor: pointer;
  transition: background-color 0.2s; /* 添加背景色過渡效果 */
}
.custom-menu ul li:hover {
  background-color: #e9f5ff; /* 懸停時(shí)背景色變化 */
  border-radius: 10px;
}
/* 下拉動畫 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px); /* 初始位置稍微上移 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>