let watermark = {}

let setWatermark = (str) => {


    let id = '1.23452384164.123412416';
    let mainContent = document.getElementById('main-content')    
    if (document.getElementById(id) !== null) {
        // document.body.removeChild(document.getElementById(id));
        mainContent.removeChild(document.getElementById(id));
    }


    let can = document.createElement('canvas');



    can.width = 620;
    can.height = 320;

    let cans = can.getContext('2d');

    cans.rotate(-15 * Math.PI / 180);
    cans.font = '14px Roboto, sans-serif';

    cans.fillStyle = 'rgba(200, 200, 200, 0.40)';

    cans.textAlign = 'left';

    cans.textBaseline = 'Middle';

    cans.fillText(str, can.width / 8, can.height / 2);

    let div = document.createElement('div');
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '110px';
    div.style.left = '0px';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = document.documentElement.clientWidth + 'px';
    div.style.height = document.documentElement.clientHeight + 'px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    // document.body.appendChild(div);
    mainContent.appendChild(div);
    return id;
}

watermark.set = (str) => {
    window.onload = () => {
        let id = setWatermark(str);
        setInterval(() => {
            if (document.getElementById(id) === null) {
                id = setWatermark(str);
            }
        }, 500);
        window.onresize = () => {
            setWatermark(str);
        };
    }
}

export default watermark;