interface WaterMarkProps {
  width: number;
  height: number;
  rotate: number;
  color: string;
  size: number;
  opacity: number;
  content: string;
}
export function createWatermark(options: WaterMarkProps) {
  // 判断水印是否存在，如果存在，那么不执行
  if (document.getElementById('watermark')) return;
  const colLen = parseInt(String(window.innerWidth / options.width)) * 2; // 一行显示几列
  const cols = Array.from({ length: colLen }, () => {
    return (
      '<span style="display: inline-block; line-height:' +
      options.height +
      'px; width:' +
      options.width +
      'px; text-align: center; transform:rotate(' +
      options.rotate +
      'deg); color:' +
      options.color +
      '; font-size:' +
      options.size +
      'px; opacity:' +
      options.opacity +
      ';">' +
      options.content +
      '</span>'
    );
  }).join('');

  const divLine = document.createElement('div');
  divLine.innerHTML = cols;
  const rowLen = parseInt(String(window.innerHeight / options.height)) * 2; // 一列显示几行
  let columns = Array.from({ length: rowLen }, () => {
    return '<div style="white-space: nowrap;">' + divLine.innerHTML + '</div>';
  }).join('');

  const layer = document.createElement('div');
  layer.innerHTML = columns;
  layer.id = 'watermark'; // 给水印盒子添加类名
  layer.style.position = 'fixed';
  layer.style.top = '0'; // 整体水印距离顶部距离
  layer.style.left = '0'; // 改变整体水印的left值
  layer.style.zIndex = '99999'; // 水印页面层级
  layer.style.pointerEvents = 'none';
  document.body.appendChild(layer); // 到页面中
}
