var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import { createVNode as _createVNode } from "vue";
import { useToken } from "@antdv/pro-provider";
import { classNames, numberType, objectType, oneOfType, stringType, useState, vNodeType } from "@antdv/pro-utils";
import { useConfigContextInject } from "ant-design-vue/lib/config-provider/context";
import { computed, defineComponent, watchEffect } from "vue";
const waterMarkProps = {
  /** 类名 */
  className: stringType(),
  /** 样式 */
  style: objectType(),
  /** 水印样式 */
  markStyle: objectType(),
  /** 水印类名 */
  markClassName: stringType(),
  /** 水印之间的水平间距 */
  gapX: numberType().def(212),
  /** 水印之间的垂直间距 */
  gapY: numberType().def(222),
  /** 追加的水印元素的z-index */
  zIndex: numberType().def(9),
  /** 水印的宽度 */
  width: numberType().def(120),
  /** 水印的高度 */
  height: numberType().def(64),
  /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
  offsetTop: numberType(),
  /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
  offsetLeft: numberType(),
  /** 水印绘制时，旋转的角度，单位 ° */
  rotate: numberType().def(-22),
  /** ClassName 前缀 */
  prefixCls: stringType(),
  /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
  image: stringType(),
  /** 水印文字内容 */
  content: oneOfType([String, Array]),
  /** 文字颜色 */
  fontColor: stringType(),
  /** 文字样式 */
  fontStyle: oneOfType([String]).def("normal"),
  /** 文字族 */
  fontFamily: stringType().def("sans-serif"),
  /** 文字粗细 */
  fontWeight: oneOfType([String, Number]).def("normal"),
  /** 文字大小 */
  fontSize: oneOfType([Number, String]).def(16),
  children: vNodeType()
};
function getPixelRatio(context) {
  if (!context) {
    return 1;
  }
  const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
}
const WaterMark = defineComponent({
  name: "WaterMark",
  inheritAttrs: false,
  props: waterMarkProps,
  setup(props, {
    slots
  }) {
    const {
      token
    } = useToken();
    const [base64Url, setBase64Url] = useState("");
    const {
      getPrefixCls
    } = useConfigContextInject();
    const prefixCls = computed(() => getPrefixCls("pro-layout-watermark", props.prefixCls));
    watchEffect(() => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const ratio = getPixelRatio(ctx);
      const canvasWidth = `${(props.gapX + props.width) * ratio}px`;
      const canvasHeight = `${(props.gapY + props.height) * ratio}px`;
      const canvasOffsetLeft = props.offsetLeft || props.gapX / 2;
      const canvasOffsetTop = props.offsetTop || props.gapY / 2;
      canvas.setAttribute("width", canvasWidth);
      canvas.setAttribute("height", canvasHeight);
      if (!ctx) {
        console.error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas");
        return;
      }
      ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
      ctx.rotate(Math.PI / 180 * Number(props.rotate));
      const markWidth = props.width * ratio;
      const markHeight = props.height * ratio;
      const writeContent = (contentText, offsetTop = 0) => {
        const markSize = Number(props.fontSize) * ratio;
        ctx.font = `${props.fontStyle} normal ${props.fontWeight} ${markSize}px/${markHeight}px ${props.fontFamily}`;
        ctx.fillStyle = props.fontColor || token.value.colorFill;
        if (Array.isArray(contentText)) {
          contentText == null ? void 0 : contentText.forEach((item, index) => ctx.fillText(item, 0, index * markSize + offsetTop));
        } else {
          ctx.fillText(contentText, 0, offsetTop ? offsetTop + markSize : 0);
        }
        setBase64Url(canvas.toDataURL());
      };
      if (props.image) {
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.referrerPolicy = "no-referrer";
        img.src = props.image;
        img.onload = () => {
          ctx.drawImage(img, 0, 0, markWidth, markHeight);
          setBase64Url(canvas.toDataURL());
          if (props.content) {
            writeContent(props.content, img.height + 8);
          }
        };
        return;
      }
      if (props.content) {
        writeContent(props.content);
      }
    });
    return () => {
      var _a;
      const {
        children = (_a = slots.default) == null ? void 0 : _a.call(slots),
        style,
        className,
        markStyle,
        markClassName,
        // antd 内容层 zIndex 基本上在 10 以下 https://github.com/ant-design/ant-design/blob/6192403b2ce517c017f9e58a32d58774921c10cd/components/style/themes/default.less#L335
        zIndex,
        gapX,
        width
      } = props;
      const wrapperCls = classNames(`${prefixCls.value}-wrapper`, className);
      const waterMarkCls = classNames(prefixCls.value, markClassName);
      return _createVNode("div", {
        "style": __spreadValues({
          position: "relative"
        }, style),
        "class": wrapperCls
      }, [children, _createVNode("div", {
        "class": waterMarkCls,
        "style": __spreadValues(__spreadValues({
          zIndex,
          position: "absolute",
          left: 0,
          top: 0,
          width: "100%",
          height: "100%",
          backgroundSize: `${gapX + width}px`,
          pointerEvents: "none",
          backgroundRepeat: "repeat"
        }, base64Url ? {
          backgroundImage: `url('${base64Url}')`
        } : {}), markStyle)
      }, null)]);
    };
  }
});
export {
  WaterMark,
  waterMarkProps
};
