'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var lodashEs = require('lodash-es');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var Preview = require('./Preview.cjs');
var PreviewGroup = require('./PreviewGroup.cjs');
var context = require('./context.cjs');
var utils = require('./utils.cjs');
var vueTypes = require('../../../utils/vue/vueTypes.cjs');
var index = require('../../../hooks/use-merged-state/index.cjs');
var css = require('../../../utils/dom/css.cjs');
var _class = require('../../../utils/dom/class.cjs');

function imageProps() {
  return {
    src: String,
    wrapperClassName: String,
    wrapperStyle: {
      type: Object,
      default: void 0
    },
    rootClassName: String,
    prefixCls: String,
    previewPrefixCls: String,
    previewMask: {
      type: [Boolean, Function],
      default: void 0
    },
    placeholder: vueTypes.default.any,
    fallback: String,
    preview: {
      type: [Boolean, Object],
      default: true
    },
    onClick: {
      type: Function
    },
    onError: {
      type: Function
    }
  };
}
let uuid = 0;
const ImageInternal = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "VcImage",
  inheritAttrs: false,
  props: imageProps(),
  emits: ["click", "error"],
  setup(props, {
    attrs,
    slots,
    emit
  }) {
    const prefixCls = vue.computed(() => props.prefixCls);
    const previewPrefixCls = vue.computed(() => `${prefixCls.value}-preview`);
    const preview = vue.computed(() => {
      const defaultValues = {
        visible: void 0,
        onVisibleChange: () => {
        },
        getContainer: void 0
      };
      return typeof props.preview === "object" ? utils.mergeDefaultValue(props.preview, defaultValues) : defaultValues;
    });
    const src = vue.computed(() => {
      var _a;
      return (_a = preview.value.src) != null ? _a : props.src;
    });
    const isCustomPlaceholder = vue.computed(() => props.placeholder && props.placeholder !== true || slots.placeholder);
    const previewVisible = vue.computed(() => preview.value.visible);
    const getPreviewContainer = vue.computed(() => preview.value.getContainer);
    const isControlled = vue.computed(() => previewVisible.value !== void 0);
    const onPreviewVisibleChange = (val, preval) => {
      var _a, _b;
      (_b = (_a = preview.value).onVisibleChange) == null ? void 0 : _b.call(_a, val, preval);
    };
    const [isShowPreview, setShowPreview] = index.useMergedState(!!previewVisible.value, {
      value: previewVisible,
      onChange: onPreviewVisibleChange
    });
    const status = vue.ref(isCustomPlaceholder.value ? "loading" : "normal");
    vue.watch(() => props.src, () => {
      status.value = isCustomPlaceholder.value ? "loading" : "normal";
    });
    const mousePosition = vue.ref(null);
    const isError = vue.computed(() => status.value === "error");
    const groupContext = context.imageContext.inject();
    const {
      isPreviewGroup,
      setCurrent,
      setShowPreview: setGroupShowPreview,
      setMousePosition: setGroupMousePosition,
      registerImage
    } = groupContext;
    const currentId = vue.ref(uuid++);
    const canPreview = vue.computed(() => props.preview && !isError.value);
    const onLoad = () => {
      status.value = "normal";
    };
    const onError = (e) => {
      status.value = "error";
      emit("error", e);
    };
    const onPreview = (e) => {
      if (!isControlled.value) {
        const {
          left,
          top
        } = css.getOffset(e.target);
        if (isPreviewGroup.value) {
          setCurrent(currentId.value);
          setGroupMousePosition({
            x: left,
            y: top
          });
        } else {
          mousePosition.value = {
            x: left,
            y: top
          };
        }
      }
      if (isPreviewGroup.value)
        setGroupShowPreview(true);
      else
        setShowPreview(true);
      emit("click", e);
    };
    const onPreviewClose = () => {
      setShowPreview(false);
      if (!isControlled.value)
        mousePosition.value = null;
    };
    const img = vue.ref(null);
    vue.watch(() => img, () => {
      if (status.value !== "loading")
        return;
      if (img.value.complete && (img.value.naturalWidth || img.value.naturalHeight))
        onLoad();
    });
    let unRegister = () => {
    };
    vue.onMounted(() => {
      vue.watch([src, canPreview], () => {
        unRegister();
        if (!isPreviewGroup.value)
          return () => {
          };
        unRegister = registerImage(currentId.value, src.value, canPreview.value);
        if (!canPreview.value)
          unRegister();
      }, {
        flush: "post",
        immediate: true
      });
    });
    vue.onUnmounted(() => {
      unRegister();
    });
    const toSizePx = (l) => {
      if (lodashEs.isNumber(l))
        return `${l}px`;
      return l;
    };
    return () => {
      const {
        prefixCls: prefixCls2,
        wrapperClassName,
        fallback,
        src: imgSrc,
        placeholder,
        wrapperStyle,
        rootClassName
      } = props;
      const {
        width,
        height,
        crossorigin,
        decoding,
        alt,
        sizes,
        srcset,
        usemap,
        class: cls,
        style
      } = attrs;
      const {
        icons,
        maskClassName,
        ...dialogProps
      } = preview.value;
      const wrappperClass = _class.classNames(prefixCls2, wrapperClassName, rootClassName, {
        [`${prefixCls2}-error`]: isError.value
      });
      const mergedSrc = isError.value && fallback ? fallback : src.value;
      const imgCommonProps = {
        crossorigin,
        decoding,
        alt,
        sizes,
        srcset,
        usemap,
        width,
        height,
        class: _class.classNames(`${prefixCls2}-img`, {
          [`${prefixCls2}-img-placeholder`]: placeholder === true
        }, cls),
        style: {
          height: toSizePx(height),
          ...style
        }
      };
      return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
        "class": wrappperClass,
        "onClick": canPreview.value ? onPreview : (e) => emit("click", e),
        "style": {
          width: toSizePx(width),
          height: toSizePx(height),
          ...wrapperStyle
        }
      }, [vue.createVNode("img", {
        ...imgCommonProps,
        ...isError.value && fallback ? {
          src: fallback
        } : {
          onLoad,
          onError,
          src: imgSrc
        },
        "ref": img
      }, null), status.value === "loading" && vue.createVNode("div", {
        "aria-hidden": "true",
        "class": `${prefixCls2}-placeholder`
      }, [placeholder || slots.placeholder && slots.placeholder()]), slots.previewMask && canPreview.value && vue.createVNode("div", {
        "class": [`${prefixCls2}-mask`, maskClassName]
      }, [slots.previewMask()])]), !isPreviewGroup.value && canPreview.value && vue.createVNode(Preview.default, {
        ...dialogProps,
        "aria-hidden": !isShowPreview.value,
        "visible": isShowPreview.value,
        "prefixCls": previewPrefixCls.value,
        "onClose": onPreviewClose,
        "mousePosition": mousePosition.value,
        "src": mergedSrc,
        "alt": alt,
        "getContainer": getPreviewContainer.value,
        "icons": icons,
        "rootClassName": rootClassName
      }, null)]);
    };
  }
});
ImageInternal.PreviewGroup = PreviewGroup.default;

exports.default = ImageInternal;
exports.imageProps = imageProps;
//# sourceMappingURL=Image.cjs.map
