<template>
  <div class="inject-content" :style="style">{{ text }}</div>
</template>

<script setup>
import { onMounted } from "vue";

const DEVELOPER_MODE = window.sessionStorage.getItem("DEVELOPER_MODE") === "1";
const QX_DEBUG_APPS = JSON.parse(
  window.sessionStorage.getItem("QX_DEBUG_APPS") || "[]"
);
const text = DEVELOPER_MODE && QX_DEBUG_APPS.length ? "调试中" : "开发模式";

const style = {
  background:
    "linear-gradient(to right, rgba(62, 142, 245, 0.6), rgb(62, 142, 245))",
  width: "26px",
  padding: "10px",
  position: "absolute",
  right: "0",
  top: "calc(100vh / 2 - 50px)",
  zIndex: 9999,
  display: "flex",
  alignItem: "center",
  justifyContent: "center",
  lineHeight: "18px",
  color: "rgb(255, 255, 255)",
  borderRadius: "6px 0px 0px 6px",
  cursor: "default",
  boxShadow: "rgba(62, 142, 245, 0.2) 0px 0px 5px",
};

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
           mutation.removedNodes */
        const nodes = mutation.addedNodes;
        nodes.forEach((node) => {
          if (
            node.innerText ===
            "Disconnected from the devServer, trying to reconnect..."
          ) {
            node.parentNode.removeChild(node);
          }
        });
        break;
      case "attributes":
        /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
           该属性之前的值为 mutation.oldValue */
        break;
    }
  });
}

onMounted(() => {
  var targetNode = document.body;
  var observerOptions = {
    childList: true, // 观察目标子节点的变化，是否有添加或者删除
    attributes: true, // 观察属性变动
    subtree: false, // 观察后代节点，默认为 false
  };
  var observer = new MutationObserver(callback);
  observer.observe(targetNode, observerOptions);
});
</script>

<style>
</style>