// 创建观察器：records 是本轮收集到的所有 DOM 变更
const observer = new MutationObserver((records) => {
  for (const record of records) {
    if (record.type === "childList") {
      console.log("子节点发生了增删");
    }
    if (record.type === "attributes") {
      console.log("属性被修改：", record.attributeName);
    }
  }
});

// 配置并开始观察
observer.observe(targetNode, {
  attributes: true,
  childList: true,
  subtree: true,
});

// 之后如有需要，可停止观察
observer.disconnect();

const count = ref(0);

// 模拟自增
const addCount = () => count.value++;

watch(
  () => count.value,
  (val, oldVal) => {
    // val: 最新值；oldVal: 上一次的值
  },
  {
    immediate: true,
    deep: true,
  }
);

watchEffect(() => {
  // 访问 count 时会被自动收集为依赖
  console.log("当前 count:", count.value);
});

// parentRef：水印父容器（一般为页面主容器或某个 section）
const parentRef = ref();

// uId：触发重建水印的计数器
const uId = ref(0);

// useWater：内部基于 canvas 生成水印图案，返回 { base, styleSize }
const bg = useWater(props);
const { base, styleSize } = bg.value;

let div; // 当前水印节点

// 依赖驱动的水印重建
watchEffect(() => {
  // 访问 uId，建立依赖关系
  uId.value;
  if (!parentRef.value) return;

  // 移除旧水印
  if (div) {
    div.remove();
  }

  // 创建新水印容器
  div = document.createElement("div");
  div.style.backgroundImage = `url(${base})`;
  div.style.backgroundSize = `${styleSize}px ${styleSize}px`;
  div.style.backgroundRepeat = "repeat";
  div.style.width = "100%";
  div.style.height = "100%";
  div.style.position = "absolute";
  div.style.inset = "0";

  parentRef.value.appendChild(div);
});

// 初始化观察器
let ob;

onMounted(() => {
  ob = new MutationObserver((records) => {
    for (const record of records) {
      // 1. 节点被删除
      for (const dom of record.removedNodes) {
        if (dom === div) {
          uId.value++;
          return;
        }
      }

      // 2. 节点属性被修改（例如被设置 display:none）
      if (record.target === div) {
        uId.value++;
        return;
      }
    }
  });

  ob.observe(parentRef.value, {
    childList: true, // 监听子节点新增/删除
    attributes: true, // 监听属性变更
    subtree: true, // 监听子树
  });
});

// 组件卸载时清理，防止内存泄漏
onUnmounted(() => {
  if (ob) {
    ob.disconnect();
  }
  div = null;
});