// 水印画布
import React, { useEffect, useRef, memo } from 'react';
import { connect } from 'react-redux';
import styles from './index.less';
import Warn from './component/warn';
import img_shuiyin from 'images/img_shuiyin.png';

const config = { attributes: true, childList: true, subtree: true };
const callback = function (mutationsList) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if (mutation.removedNodes?.length) {
        mutation.removedNodes.forEach((value) => {
          if (value.className === styles.canvas) {
            // 删除了dom
            window.location.reload();
          }
        });
      }
    } else if (mutation.type === 'attributes' && mutation.target.className === styles.canvas) {
      window.location.reload();
      // 属性动了就重载
    }
  }
};

function WatermarkCanvas({ width, height, permission }: { permission: boolean; width?: number; height?: number }) {
  useEffect(() => {
    //监测水印状态
    if (!permission) {
      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback);

      // 以上述配置开始观察目标节点
      observer.observe(ref.current, config);
    }
  }, [permission]);
  const ref: {
    current;
  } = useRef(null);

  return !window.appConfig.LOCAL && !permission ? (
    <div ref={ref}>
      <Warn />
      <div
        className={styles.canvas}
        style={{
          width: width,
          height: height,
          backgroundImage: `url(${img_shuiyin})`
        }}
      />
    </div>
  ) : null;
}
function mapStateToProps({ screenDetail }) {
  const { permission } = screenDetail;

  return {
    permission
  };
}
export default connect(mapStateToProps, {})(WatermarkCanvas);
