/**
 * 創(chuàng)建防刪除水印
 * @param {HTMLElement} container - 水印掛載容器
 * @param {WatermarkOptions} options - 水印配置項(xiàng)
 * @returns {() => void} 銷毀函數(shù)（清理監(jiān)聽/定時(shí)器/節(jié)點(diǎn)）
 */
export function createWatermark(container, options = {}) {
    // 1. 默認(rèn)配置（支持外部覆蓋）
    const defaultOptions = {
        text: '智能匯 AI',      // 水印文字
        color: '#000000',      // 文字顏色
        opacity: 0.08,         // 透明度
        fontSize: 18,          // 字體大小(px)
        rotate: -20,           // 旋轉(zhuǎn)角度(°)
        density: 200,          // 單個(gè)水印塊尺寸(px)，控制密度
    };
    const opts = { ...defaultOptions, ...options };
    
    // 2. 狀態(tài)管理（避免閉包污染，統(tǒng)一維護(hù)）
    let watermarkDiv = null;   // 水印DOM節(jié)點(diǎn)
    let observer = null;       // MutationObserver實(shí)例
    let resizeTimer = null;    // resize防抖定時(shí)器
    
    // 3. 核心方法（下文拆解）
    const createWatermarkElement = () => {};  // 生成水印節(jié)點(diǎn)
    const initObserver = () => {};            // 初始化DOM監(jiān)聽
    const handleResize = () => {};            // 處理窗口resize
    
    // 4. 初始化執(zhí)行
    createWatermarkElement();
    initObserver();
    window.addEventListener('resize', handleResize);
    
    // 5. 返回銷毀函數(shù)（關(guān)鍵：避免內(nèi)存泄漏）
    return () => {
        observer?.disconnect();                          // 停止DOM監(jiān)聽
        watermarkDiv?.parentNode?.removeChild(watermarkDiv); // 移除水印節(jié)點(diǎn)
        window.removeEventListener('resize', handleResize);  // 解綁resize事件
        clearTimeout(resizeTimer);                       // 清理定時(shí)器
    };
}

const createWatermarkElement = () => {
    // 1. 創(chuàng)建Canvas實(shí)例，設(shè)置單個(gè)水印塊尺寸
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = opts.density;  // 單個(gè)水印寬度 = 密度值
    canvas.height = opts.density; // 單個(gè)水印高度 = 密度值

    // 2. 配置文字樣式（關(guān)鍵：透明度與旋轉(zhuǎn)）
    ctx.font = `${opts.fontSize}px sans-serif`;  // 字體大小
    ctx.fillStyle = opts.color;                  // 文字顏色
    ctx.globalAlpha = opts.opacity;              // 整體透明度（0-1）
    ctx.textAlign = 'center';                    // 文字水平居中
    ctx.textBaseline = 'middle';                 // 文字垂直居中

    // 3. 旋轉(zhuǎn)文字并繪制（弧度轉(zhuǎn)換是關(guān)鍵）
    ctx.save(); // 保存當(dāng)前繪圖狀態(tài)
    // 平移到Canvas中心（避免旋轉(zhuǎn)后文字偏移）
    ctx.translate(canvas.width / 2, canvas.height / 2);
    // 角度轉(zhuǎn)弧度：Math.PI * 角度 / 180
    ctx.rotate((opts.rotate * Math.PI) / 180);
    // 繪制文字（x=0,y=0對應(yīng)平移后的中心）
    ctx.fillText(opts.text, 0, 0);
    ctx.restore(); // 恢復(fù)繪圖狀態(tài)

    // 4. 轉(zhuǎn)為base64，創(chuàng)建水印DOM節(jié)點(diǎn)
    const dataURL = canvas.toDataURL('image/png'); // 轉(zhuǎn)為圖片格式
    watermarkDiv = document.createElement('div');
    watermarkDiv.className = 'watermark-layer';
    watermarkDiv.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;  // 關(guān)鍵：不攔截點(diǎn)擊事件
        z-index: 9999;         // 確保在最上層（避免被遮擋）
        background-image: url(${dataURL});
        background-repeat: repeat; // 平鋪整個(gè)容器
    `;

    // 5. 處理容器定位（關(guān)鍵：確保水印相對容器定位）
    const containerPosition = window.getComputedStyle(container).position;
    if (containerPosition === 'static') { // static無法作為absolute的包含塊
        container.style.position = 'relative';
    }

    // 6. 掛載水印節(jié)點(diǎn)
    container.appendChild(watermarkDiv);
    return watermarkDiv;
};

const initObserver = () => {
    // 1. 創(chuàng)建Observer實(shí)例，定義變化處理邏輯
    observer = new MutationObserver((mutations) => {
        let needRestore = false; // 標(biāo)記是否需要恢復(fù)水印
        
        // 2. 遍歷所有DOM變化記錄
        mutations.forEach((mutation) => {
            // 場景1：子節(jié)點(diǎn)被刪除（水印節(jié)點(diǎn)被移除）
            if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                mutation.removedNodes.forEach((node) => {
                    // 匹配水印節(jié)點(diǎn)（直接節(jié)點(diǎn)或類名匹配）
                    if (node === watermarkDiv || (node.classList?.contains('watermark-layer'))) {
                        needRestore = true;
                    }
                });
            }
            // 場景2：水印節(jié)點(diǎn)屬性被修改（如style/class被篡改）
            if (mutation.type === 'attributes' && mutation.target === watermarkDiv) {
                // 僅監(jiān)聽關(guān)鍵屬性（style/class），減少不必要的判斷
                if (['style', 'class'].includes(mutation.attributeName)) {
                    needRestore = true;
                }
            }
        });

        // 3. 延遲恢復(fù)（關(guān)鍵：避免無限循環(huán)）
        if (needRestore) {
            // 100ms延遲：讓瀏覽器先處理完當(dāng)前DOM變化，再執(zhí)行恢復(fù)
            setTimeout(() => {
                // 雙重判斷：避免重復(fù)創(chuàng)建（如多次刪除事件觸發(fā)）
                if (!container.querySelector('.watermark-layer')) {
                    createWatermarkElement(); // 重新生成水印
                }
            }, 100);
        }
    });

    // 4. 配置監(jiān)聽選項(xiàng)（最小化監(jiān)聽范圍，提升性能）
    observer.observe(container, {
        childList: true,        // 監(jiān)聽子節(jié)點(diǎn)添加/刪除
        attributes: true,       // 監(jiān)聽節(jié)點(diǎn)屬性變化
        subtree: true,          // 監(jiān)聽后代節(jié)點(diǎn)（避免水印被嵌套刪除）
        attributeFilter: ['style', 'class'], // 僅監(jiān)聽關(guān)鍵屬性，減少開銷
    });
};

const handleResize = () => {
    // 防抖邏輯：200ms內(nèi)僅執(zhí)行一次重繪
    if (resizeTimer) {
        clearTimeout(resizeTimer); // 清除未執(zhí)行的定時(shí)器
    }
    resizeTimer = setTimeout(() => {
        // 先移除舊水印，再創(chuàng)建新水印（避免疊加）
        if (watermarkDiv && watermarkDiv.parentNode) {
            watermarkDiv.parentNode.removeChild(watermarkDiv);
        }
        createWatermarkElement(); // 重新生成適配新尺寸的水印
    }, 200); // 200ms：兼顧響應(yīng)速度（無明顯卡頓）與性能（減少重繪次數(shù)）
};

<template>
  <el-dialog v-model="visible" title="對話記錄預(yù)覽">
    <div ref="previewRef" class="preview-container">
      </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onUnmounted, nextTick } from 'vue';
import { createWatermark } from '@/utils/watermarkUtil';

// 1. 狀態(tài)管理
const visible = ref(false);       // 彈窗顯示狀態(tài)
const previewRef = ref(null);     // 水印掛載容器ref
let destroyWatermark = null;      // 水印銷毀函數(shù)（全局維護(hù)）

// 2. 水印初始化（核心：處理DOM時(shí)序）
const initWatermark = async () => {
  // 第一步：清理舊水?。ū苊庵貜?fù)創(chuàng)建）
  if (destroyWatermark) {
    destroyWatermark();
    destroyWatermark = null;
  }
  // 第二步：等待Vue DOM更新（nextTick：確保ref已關(guān)聯(lián)DOM）
  await nextTick();
  // 第三步：等待el-dialog動(dòng)畫結(jié)束（300ms：匹配組件默認(rèn)動(dòng)畫時(shí)長）
  setTimeout(() => {
    // 雙重判斷：確保容器DOM存在
    if (previewRef.value) {
      destroyWatermark = createWatermark(previewRef.value, {
        text: '智能匯 AI',
        opacity: 0.08,
        density: 200,
      });
    }
  }, 300);
};

// 3. 監(jiān)聽彈窗狀態(tài)變化
watch(visible, (isVisible) => {
  if (isVisible) {
    initWatermark(); // 彈窗打開：初始化水印
  } else {
    // 彈窗關(guān)閉：清理水?。ㄡ尫刨Y源）
    destroyWatermark?.();
    destroyWatermark = null;
  }
});

// 4. 組件卸載：強(qiáng)制清理（避免內(nèi)存泄漏）
onUnmounted(() => {
  destroyWatermark?.();
  destroyWatermark = null;
});
</script>